【曹操】echarts多指标折线动态加载问题

之前的方式是参照echarts官方提供的js模板写option并setoption，但是该方法以series写死的方式将所有指标穷举出来，每个展示的功能需要单独写一个js，这使得前端js代码冗余且可复用性降低，每个js针对所有的指标展示嵌套了很多if循环，使得js加载的时候会有效率问题，在页面展示方面，每次查询会将所有的指标在图例及提示框显示出来，即使查询时选取的指标参数并不是全部指标，让页面展示缺少简洁感。因此决定对图形展示的js进行优化，让代码的适用性更高。

1、理解echarts的绘图原理，结合数据特性理清思路

简单的说，echarts绘图时需要x轴数据，和对应的y轴数据，然后填点连线，对于曹操的展示功能中，x轴固定为时间，可以从返回的json数据中获取到并赋值到angularjs域里的name变量，针对于多指标项，通过循环每次将每个指标数据存放在term_son数组中，再将每个term_son放在 term数组中，实现数据展示时，循环term设置option的series项，这样就可以避免在js中出现写死的指标项，全部通过变量实现图形绘制。

2、具体代码

1）option配置
var option = {
    title: {//标题
        text: ectitle,
         x: 'center'
    },
        legend: {//图例
        left:'right',
        data: $scope.key
    },
    tooltip: {//提示框组件
        trigger: 'axis',
        axisPointer: {
        animation: false
            },
            textStyle: {
              fontStyle: 'italic',
              fontSize: 12
        }
    },
    xAxis: {//x轴
        type: 'category',
        splitLine: {
            show: false
        },
        data: $scope.name
    },
        yAxis: {//y轴数据
        type: 'value',
        splitLine: {
            show: false
        }
    },
    series: []//series项
};
2）series项设置
for(i =0; i < $scope.key.length; i++){
    var item = {
          name: $scope.key[i],//指标名称
          type: 'line',
          showSymbol: false,
          hoverAnimation: false,
          data: $scope.term[i]//指标数据
    }
    option.series.push(item);
};

chart.clear();
chart.setOption(option);