Echarts动态加载图表数据

使用echarts动态加载数据，以折线图为例。

1.引入echarts相关的js
2.html

<div id="Chart" style="width:600px; height: 300px;"></div>

3.js

//1.初始化echarts
    var showChart = echarts.init(document.getElementById('Chart'), 'macarons');

//2.图表参数、样式
    var option = {
        title: {
            text: 'XXX个数统计'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: []//动态加载折线名称
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                data: ['今天', '本周', '本月', '本季度', '今年', '所有']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: []//动态加载折线数据
    };

//3.ajax返回后台数据，获取图标数据
    function getData() {            
          var strUrl = 'GetStatistics?uIds=' + uId;
          $.ajax({  
               url:strUrl,    //请求的url地址  
               //dataType:"json",   //返回格式为json  
               async:false,//请求是否异步，默认为异步，这也是ajax重要特性                
               type:"GET",   //请求方式 get 或者post
               success:function(result){ //请求成功时处理  
                      if (result != null) {
                            if (result.length > 0) {
                                   //定义折线名称、类型、数据
                                   var Item = function(){
                                          return {
                                                name:'',
                                                type:'line',
                                                data:[]
                                            }
                                    };
                                    var legends = [];
                                    var series  = [];
                             
                                     for (var i = 0; i < result.length; i++) {
                                           var list = result[i].Today + "," +result[i].Week + "," +
                                                     result[i].Month + "," + result[i].Quarter + "," + 
                                                     result[i].Year + "," + result[i].All;
                                           var showlist = list.split(',');

                                           var it = new Item();
                                           it.name = result[i].userName;
                                           legends.push(result[i].userName);
                                           it.data = showlist;
                                           series.push(it);
                                   }

                                    option.legend.data = legends;
                                    option.series = series; // 设置图表
                                    showChart.setOption(option);// 重新加载图表
                            }
                       } 
                },  
            }); 
    }

//4.返回图标数据结果
      getData();

//5.渲染图表
    showChart.setOption(option);

推荐链接:http://blog.csdn.net/verne_feng/article/details/51731653

转载于:https://my.oschina.net/u/3578334/blog/1575577