利用ECharts开发的步骤

• 引入Echarts的相关库文件，以及自定义的js文件

<script src="${pageContext.request.contextPath}/js/echarts/source/echarts.js"></script>
    <script src="${pageContext.request.contextPath}/js/phoneSample.js"></script>

• 定义图表的展示位置，建议使用bootstrap布局

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
         <ul id="myTab" class="nav nav-tabs">
             <li class="active"><a href="#iPhone" data-toggle="tab">iPhone</a></li>
             <li><a href="#SAMSUNG" data-toggle="tab">SAMSUNG</a></li>
             </ul>

          <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="iPhone">
                <div class="row placeholders" style="float:clear;">
                     <h2><strong>iPhone手机分析</strong></h2>
                </div>
                  <div class="row placeholders">
                  <div class="col-xs-6 col-sm-3 placeholder" id ="pie4All_iPhone" style="height:500px;width:650px">
                  </div>
                  <div class="col-xs-6 col-sm-3 placeholder" id ="bar_iPhone" style="height:500px;width:650px;float:left;">
                  </div>
                </div>
                <div class="row placeholders">
                  <div class="col-xs-6 col-sm-3 placeholder" id ="pie4Not_iPhone" style="height:500px;width:650px">
                  </div>
                </div>
            </div>
            <div class="tab-pane fade" id="SAMSUNG">
                  <div class="row placeholders" style="float:clear;">
                     <h2><strong>SAMSUNG手机分析</strong></h2>
                </div>
                  <div class="row placeholders">
                  <div class="col-xs-6 col-sm-3 placeholder" id ="pie4All_SAMSUNG" style="height:500px;width:650px">
                  </div>
                  <div class="col-xs-6 col-sm-3 placeholder" id ="bar_SAMSUNG" style="height:500px;width:650px;float:left;">
                  </div>
                </div>
                <div class="row placeholders">
                  <div class="col-xs-6 col-sm-3 placeholder" id ="pie4Not_SAMSUNG" style="height:500px;width:650px">
                  </div>
                </div>
            </div>
          </div>
         </div>

• 编写phoneSample.js文件，处理图表数据（代码很简单，详见注释）

//封装饼状图参数
function setOptionPie(data){

    var legend_data = [];
    if(data && data.length > 0){

        $.each(data, function(idx, d){

            legend_data.push(d.name);
        });

    }

    var option = {
        title : {
            text: data.title || '',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:legend_data
        },
        calculable : true,
        series : [
            {
                type:'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:data,
                itemStyle : {
                    normal : {
                        label : {
                            show: true,
                            position : 'outer',
                            formatter : "{b}\n{d}%",//在饼状图上显示百分比
                            /*textStyle : {
                                color : 'rgba(30,144,255,0.8)',
                                align : 'center',
                                baseline : 'middle',
                                fontFamily : '微软雅黑',
                                fontSize : 30,
                                fontWeight : 'bolder'
                            }*///自定义饼图上字体样式
                        },
                        labelLine : {
                            show : true,
                        }
                    },
                    emphasis : {
                        label : {
                            show : true,
                            formatter : "{d}%"//鼠标移动到饼状图上显示百分比
                        }
                    }

                }
            }
        ]
    };

    return option;
}

//封柱状状图参数
function setOptionBar(data){

    var legend_data = [];

    //var series = [];
    if(data && data.length > 0){

        $.each(data, function(idx, d){

            legend_data.push(d.name);
            //series.push({name:d.name,type:'bar',itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},data:d.data});
        });

    }

    /*var option = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data:legend_data
            },
            calculable : true,
            xAxis : [
                {
                    type : 'value'
                }
            ],
            yAxis : [
                {
                    type : 'category',
                    data : data && data[0] ? data[0].yAxis : []
                }
            ],
            series : series
        };
    return option;*/

    var option = {
            title : {
                text: data.title || '',
                x:'center'
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data:legend_data
            },
            calculable : true,
            xAxis : [
                {
                    type : 'value'
                }
            ],
            yAxis : [
                {
                    type : 'category',
                    data : data && data[0] ? data[0].yAxis : []
                }
            ],
            series : [
                {
                    name:legend_data[0],
                    type:'bar',
                    stack: '总量',
                    itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                    data:data[0].data
                },
                {
                    name:legend_data[1],
                    type:'bar',
                    stack: '总量',
                    itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                    data:data[1].data
                },
                {
                    name:legend_data[2],
                    type:'bar',
                    stack: '总量',
                    itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                    data:data[2].data
                }
            ]
        };
    return option;
}

//设置相关参数，展示图表
function showChart(data, type, phoneFlag) {
    require([ 'echarts', 'echarts/chart/'+(type.substr(0,3) == 'pie'?'pie':type) ], function(ec) {
        var myChart = ec.init(document.getElementById(type+'_'+phoneFlag));

        var option = null;

        if(type == 'pie4All'){
            data.title = "口碑现状";
            option = setOptionPie(data);
        }else if(type == 'bar'){
            data.title = "用户评价的分布现状";
            option = setOptionBar(data);
        }else if(type == 'pie4Not'){
            data.title = "负面信息属性分布状况";
            option = setOptionPie(data);
        }

        myChart.setOption(option);

        window.onresize = function () {
            myChart.resize();
        };

    });
}

// 请求后台数据，填充图表
function ajaxChart(phoneFlag, type) {

    $.ajax({
        type : "POST",
        dataType : "json",// 返回json格式的数据
        url : "../psServlet",
        data : {
            phoneFlag : phoneFlag,
            method: type
        },
        success : function(data) {

            if(data && data.length > 0){
                showChart(data, type, phoneFlag);
            }
        }
    });

}

$(function(){

    // 加载图表所需的js库文件
    require.config({
        paths: {
            echarts: path+'/js/echarts/source'
        }
    });

    ajaxChart("iPhone", "pie4All");
    ajaxChart("iPhone", "bar");
    ajaxChart("iPhone", "pie4Not");

    ajaxChart("SAMSUNG", "pie4All");
    ajaxChart("SAMSUNG", "bar");
    ajaxChart("SAMSUNG", "pie4Not");

});

• 后续准备用面向对象的方式封装下，将图表展示和数据接口独立出来，方便其他项目引用