Echarts动态赋值

Echarts是百度开发的插件，非常实用，对数据进行统计和分析有着高效效率，它节省了开发人员的大部分开发时间。

       下面就简单介绍一下如何实用echarts这个插件。

首先下载百度的插件：地址：http://echarts.baidu.com/echarts2/doc/example.html

               下载完成后，我们要将 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)'  
                              }  
                          }  
                      }  
                  ]  

我项目中用的饼图，所以和上面的实例过程不太一样，不过，具体如何赋值，我已经说得很清楚了。