echarts 动态生成图形 二

上一篇文章详细讲了echarts常用的属性，这一篇就讲根据上述属性如何动态创建图表，data从后台返回的数据集，fields是从data中得到的列集合。

1.创建mychart

在创建mychart后，调用

mychart.clear();//清空操作，二次加载时才不会保留上次的曲线

上面的代码很重要，否则曲线是不自动刷新的。

2.定义legend

legend: {
                        top: 30,
                        data: []
                    },

3.定义yAxis，series

yAxis:[],
series:[]

4.调用关键代码

mychart.showLoading({ effect: 'whirling' });
                createEcharts(data, fields, option);//动态创建曲线图
                mychart.hideLoading();
                mychart.setOption(option);

5.调用创建方法

/* 动态创建曲线图*/

function createEcharts(data, fields, option){     
var yAxis_arr=[];               
    //    series                
    for(var i=1; i<fields.length; i++){
        if(i==1){
            itemStyle = {
                    normal: {
                        areaStyle: {
                            type: 'default'
                        }
                    }
            };
        }else{
            itemStyle = {
                    normal: {
                        color: '#70bf41'
                       
                    }
            };
        }
        option.legend.data.push(fields[i]);  //    legend
        seriesItem              = {};
        seriesItem.name      = fields[i];//这个name必须和legend里面的text对应
        seriesItem.type      = 'line';
        seriesItem.smooth    = false;
        seriesItem.yAxisIndex= i-1;//对应的y轴索引，如果只要一个轴，设置为0
        seriesItem.itemStyle = itemStyle;//设置区域，如果不需要，就去掉

        seriesItem.data      = [];
        
        $.each(data, function (_index, _item) {
                seriesItem.data.push(_item[fields[i]]);//加载数据
            });

//        填充默认显示曲线的数据
        option.series.push(seriesItem);
//        option.series[0].type      = 'line';
//        option.series[1].type      = 'bar';
        // yAxis    
        var yAxis_obj  = {};
        yAxis_obj.type = 'value';
        yAxis_obj.name = fields[i];
        yAxis_obj.show = true;
        yAxis_arr.push(yAxis_obj);
        
    }
        option.yAxis = yAxis_arr;
}

动态加载数据成图就完成了。

想要理解的更详细，可参考一叶瑞秋的博客（里面有demo并提供了下载）：
https://www.cnblogs.com/imelemon/p/6589485.html.