利用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");
    
});

• 後續準備用面向對象的方式封裝下，將圖表展現和數據接口獨立出來，方便其餘項目引用