Echarts是百度開發的外掛，非常實用，對資料進行統計和分析有著高效效率，它節省了開發人員的大部分開發時間。

       下面就簡單介紹一下如何實用echarts這個外掛。

               下載完成後，我們要將 echarts-xxx\doc\example\www資料夾下的js考本到專案中，然後新建一個頁面，在頁面引用一個js資料夾中echarts.js檔案。

在新建 的頁面中，新增一個div。

<span style="white-space:pre">        </span><div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>  
              然後新增一個js檔案，進行外掛的配置和資料繫結，如下：
[javascript] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片
// Step:3 為模組載入器配置echarts的路徑，從當前頁面連結到echarts.js，定義所需圖表路徑  
require.config({  
    paths: {  
        echarts: './js'  
    }  
});  
// Step:4 動態載入echarts然後在回撥函式中開始使用，注意保持按需載入結構定義圖表路徑  
require(  
    [  
         'echarts',  
         'echarts/chart/bar',  
         'echarts/chart/line',  
    ],  
    function (ec) {  
        var myChart = ec.init(document.getElementById('main'));  
        myChart.setOption({  
            tooltip: {  
                trigger: 'axis'  
            },  
            legend: {  
                data: ['蒸發量', '降水量']  
            },  
            toolbox: {  
                show: true,  
                feature: {  
                    mark: { show: true },  
                    dataView: { show: true, readOnly: false },  
                    magicType: { show: true, type: ['line', 'bar'] },  
                    restore: { show: true },  
                    saveAsImage: { show: true }  
                }  
            },  
            calculable: true,  
            xAxis: [  
                {  
                    type: 'category',  
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']  
                }  
            ],  
            yAxis: [  
                {  
                    type: 'value',  
                    splitArea: { show: true }  
                }  
            ],  
            series: [  
                {  
                    name: '蒸發量',  
                    type: 'bar',  
                    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]  
                },  
                {  
                    name: '降水量',  
                    type: 'bar',  
                    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]  
                }  
            ]  
        });  
    }  
);  
 

這樣外掛的例圖就可以顯示到頁面上了，顯示到頁面上得例圖中的資料是假的，所以我們要進行修改，如何修改series中name,data的資料和legend中的data資料呢？

        首先，我們要把得到的資料，轉換成json物件，然後我們把json物件放到陣列中，這樣我們就可以賦值到data中了。

具體做法如下：

var Arr = new Array();//地址  
  var ArrNum = new Array()//個數  
  
  $.ajax({  
      type: 'post',  
      url: '../GetAreaData.ashx',  
      dataType: 'json',  
      async: false,  
      success: function (result) {  
          if (result != null) {  
              var obj = eval(result);//轉換為JSON物件  
              for (var i = 0; i < obj.length; i++) {  
                  Arr.push( obj[i].DZQ);//存入arr  
                  ArrNum.push({"name":obj[i].DZQ,"data": obj[i].CDZNum});//存入arrnum</span>  
              }  
 

legend: {  
                     orient: 'vertical',  
                     left: 'right',  
                     data: Arr  
                 },  
[javascript] view plain copy 在CODE上檢視程式碼片派生到我的程式碼片
series: [  
                      {  
                          name: '訪問來源',  
                          type: 'pie',  
                          radius: '55%',  
                          center: ['50%', '60%'],  
                          data:ArrNum,  
                          itemStyle: {  
                              emphasis: {  
                                  shadowBlur: 10,  
                                  shadowOffsetX: 0,  
                                  shadowColor: 'rgba(0, 0, 0, 0.5)'  
                              }  
                          }  
                      }  
                  ]