Echart餅形圖和折線圖的循環展示及選擇展示

需求：根據不同的入參調同一接口，循環展示一組餅形圖或折線圖；

主要問題：在於給定的數據格式不符合圖表的配置項格式，需要拆分組裝數據；首先默認展示幾個圖表，當選中一個類別，需要展示其中一個的時候，頁面中的Dom沒有清除，用了clear()無效，於是乎，就在頁面中做兩個div，一個用於展示選中的某一項，一個用於展示所有圖表。

<div v-if="showPie1">
              <div id="chart-row" v-for="(item,index) in dataList" :key="index" style="display: flex;justify-content: center;margin-bottom: 40px;width: 80%;margin:0 auto;">
                <div class="left-chart" :id="'left-chart-'+item.id" style="width:500px;height: 400px;margin-bottom:20px;padding-top:10px;border: 1px solid #f0f0f0;">
                  <img src="../../assets/timg.jpg" alt="暫無圖片" style="width:100px;height:100px;"></div>
              
              <div class="right-chart" :id="'right-chart-'+item.id" style="width:500px;height: 400px;margin-bottom:20px;padding-top:10px;border: 1px solid #f0f0f0;">
                <img src="../../assets/timg.jpg" alt="暫無圖片" style="width:100px;height:100px;"></div>
            </div>
          </div>
          <div id="pie" v-if="showPie2">
            <div id="chart-row" v-for="(item,index) in itemList" :key="index" style="display: flex;justify-content: center;margin-bottom: 40px;width: 80%;margin:0 auto;">
                <div class="left-chart" :id="'left-chart-'+item.id" style="width:500px;height: 400px;margin-bottom:20px;padding-top:10px;border: 1px solid #f0f0f0;"><img src="../../assets/timg.jpg" alt="暫無圖片" style="width:100px;height:100px;"></div>
              
              <div class="right-chart" :id="'right-chart-'+item.id" style="width:500px;height: 400px;margin-bottom:20px;padding-top:10px;border: 1px solid #f0f0f0;"><img src="../../assets/timg.jpg" alt="暫無圖片" style="width:100px;height:100px;"></div>
            </div>
          </div>

id為chart-row的是選中某一項的dom，id為pie的是默認展示所有圖表的dom.

dom的id取名跟綁定圖表初始化的dom名一致，且命名是有規律的。

我這里是同時展示兩種類型的圖表，成功率和明細，使用axios.all（）方法將數據同時請求回來，在請求接口時，使用ES7中的async異步執行，保證數據在.all方法中能夠全部獲取完。

//獲取折線圖成功失敗率接口定義
  async getLeftLineData(list){
    var data = {}
    if(this.filters.invoice){
      data = { ticketType: this.filters.invoice}
    }else{
      data = { ticketType: list.id }
    }
    return this.$api.report.ocrMonthCount(data)
  },

獲取到的數據在axios.all方法里做處理，其中optionList是存放循環入參信息的；

optionList: [
        //選擇
        { value: '', label: "請選擇"},
        { value: "001", label: "選擇一" },
        { value: "002", label: "選擇二" },
        { value: "003", label: "選擇三" },
      ],

for(let i = 0; i < optionList.length; i++){
      axios.all([this.getLeftLineData(optionList[i]), this.getRightLineData(optionList[i])])
      .then(res=>{
        let leftData = res[0].data
        let rightData = res[1].data
        var xAxis = [];
        var failTotal = []
        var successTotal = []
        var successFailurArry = [1, 2]
        for(var y = 0; y<successFailurArry.length; y++){
      // 基於准備好的dom，初始化echarts實例,左側占比
          var myChart = echarts.init(document.getElementById('left-line-'+optionList[i].id));
        for (var j = 0; j < leftData.fail.length; j++) {
          xAxis.push(leftData.fail[j].monthName);
          failTotal.push(leftData.fail[j].monthTotal);
        }
        for (var k = 0; k < leftData.success.length; k++) {
          successTotal.push(leftData.success[k].monthTotal);
        }
        // 繪制圖表
        var seriesOption = {
            //配置信息
        }    
         myChart.setOption(seriesOption, true);
        }

有時，myChart.clear()無效，可以手動的將上一次定義的值清空。