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