【曹操】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',

    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);