echarts

官網：

http://echarts.baidu.com/

注意：圖表的請求必須先請求後臺，獲得數據，再去渲染圖表。因此須要使用同步請求。

一、引入js

<script type="text/javascript" src="${ctx}/shop/resources/plugins/echarts-2.2.1/build/dist/echarts.js"></script>

二、html

<!-- 圖表 -->
    <div id="chartDiv" class="easyui-panel" title="圖表" data-options="closed:true">
     <div id="echarts-line" style="height:280px;">
     </div>
    </div>
    <div id="chartDialog" class="easyui-dialog" title="工單處理量" data-options="iconCls:'icon-save',closed:true" style="width:50%;height:85%">
     <div class="easyui-panel" data-options="fit:true" style="padding:25px 20px;background-color:#F7F7F7">
      <div id="echarts-pie" style="height:100%;"></div>
     </div>
    </div>

三、畫折線圖  

  function(yAxisData1,yAxisData2){//y軸的值。數組形式
  //在主文件引入後你將得到一個AMD環境，配置require.conifg以下：
   require.config({paths: {echarts:'/shop/resources/plugins/echarts-2.2.1/build/dist'}});
   require(
            [
                'echarts',
                'echarts/chart/line',   // 按需加載所需圖表，如需動態類型切換功能，別忘了同時加載相應圖表
            ],
            function (ec) {  //回調函數
                var myChart = ec.init(document.getElementById('main'));
                var option = {
                    //這裏本身設置
                    legend: {data:['投訴工單','問題工單'],x:'right',y:25},
                    title:{show:true,text:'工單處理量統計',x:'center',y:20},
                    grid:{y:60,x:60,y2:40,x2:40,borderWidth:0,backgroundColor:'#fff'},
                    tooltip:{trigger:'axis',backgroundColor:'rgba(0,0,0,0.5)',axisPointer: {type: 'line'}},
                     xAxis : [{data:customOption.xAxisData,boundaryGap:false,axisLabel:{show:true},splitLine:{show:false}}],
                     series : [{"type":"line","name":'投訴工單',"data":yAxisData1},{"type":"line","name":'問題工單',"data":yAxisData1}]//數據
         yAxis : [{splitLine:{show:false},splitArea:{show:false}}],
                }
                var myChart = ec.init(document.getElementById('main'),'macarons');//初始化圖表                  
                window.onresize = myChart.resize;//動調用resize達到自適應的效果
                myChart.on(ecConfig.EVENT.CLICK, paintPieDynamic);//點擊折現圖表事件的回調函數
                myChart.setOption(option);//配置圖表
            }
        );
}

顯示效果：

 

四、數據傳遞

 //param,獲取折線圖的數據
   function paintPieDynamic(param){
   //這裏應該經過傳遞過來的折線圖的參數，去請求滸苔，獲得餅圖數據
    var month = param.name;
    var name = param.seriesName;
    var arr = new Array();
    /*for(prop in codeMap){
     arr.push({value:prop,name:codeMap[prop],code:prop,month:month,type:name});
    }*/
    if(name == "問題工單"){
     var param = {flag:'year',month:month.substring(0,month.length-1),type:3};
    //Ajax請求
     holly.get(holly.getPath()+"/rest/complainSheet/complainListCount",param,function(e){
      if(e.success && e.content != null){
       for(var i = 0 ; i <e.content.length;i++){
        if(e.content[i].PROV != null){
         arr.push({value:e.content[i].TOTAL,name:codeMap[e.content[i].PROV],code:e.content[i].PROV,month:month,type:name});
        }
       }
      }
     },true);
     $("#chartDialog").dialog({title:"問題工單"});
    }else{
     var param = {flag:'year',month:month.substring(0,month.length-1),type:1};
    //Ajax請求
     holly.get(holly.getPath()+"/rest/complainSheet/complainListCount",param,function(e){
      if(e.success && e.content != null){
       for(var i = 0 ; i <e.content.length;i++){
        if(e.content[i].PROV != null){
         arr.push({value:e.content[i].TOTAL,name:codeMap[e.content[i].PROV],code:e.content[i].PROV,month:month,type:name});
        }
       }
      }
     },true);
     $("#chartDialog").dialog({title:"投訴工單"});//是把餅圖放在一個dialog中
    }
    $("#chartDialog").dialog('open');
    //餅圖的數據arr，從折線圖中獲取參數，請求後臺，組合數據
    paintPie({dom:'echarts-pie',data:arr});
   }

 五、畫餅圖

   function paintPie(customOption){
    require.config({paths: {echarts:holly.getPath()+'/hollybeacon/resources/plugins/echarts-2.2.1/build/dist'}});
    require(['echarts','echarts/chart/pie'],function(ec){
     var ecConfig = require('echarts/config');
     var legendData = [];
     for(var i=0;i<customOption.data.length;i++){
        legendData.push(customOption.data[i].name);
      }
     var option={
        legend:{data:legendData},
         tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},
         calculable : false,
         toolbox: {show : true,feature : {mark : {show: false},saveAsImage : {show: true}}},
         series : [{
          center:['50%','50%'],
          name:'工單處理量',
                type:'pie',
                radius : '80%',
                data:customOption.data,
                itemStyle : {
                    normal : {
                        label : {
                            show : true
                        },
                        labelLine : {
                            show : true
                        }
                    },
                },
            }]
     }
     var myChart = ec.init(document.getElementById(customOption.dom),'macarons');
     myChart.on(ecConfig.EVENT.CLICK, tiaozhuan);//點擊回調事件，跳轉到對應頁面
     myChart.setOption(option,true);
    });
   }

顯示效果：

  

 六、跳轉到對應的頁面

//跳轉到對應已處理頁面
   function tiaozhuan(param){   //遍歷傳遞過來的屬性值
   //其實這裏應該跳轉
    for(prop in param.data){
     console.log(prop+": "+param.data[prop]);
    }
   }

  六、圖表上的事件

 myChart.on(ecConfig.EVENT.CLICK, tiaozhuan);//都是ecConfig.EVENT.事件

 以下事件：