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()无效，可以手动的将上一次定义的值清空。