Echart饼形图和折线图的循环展示及选择展示

需求：根据不同的入参调同一接口，循环展示一组饼形图或折线图；

主要问题：在于给定的数据格式不符合图表的配置项格式，需要拆分组装数据；首先默认展示几个图表，当选中一个类别，需要展示其中一个的时候，页面中的Dom没有清除，用了clear()无效，于是乎，就在页面中做两个div，一个用于展示选中的某一项，一个用于展示所有图表。

 1 <div v-if="showPie1">
 2               <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;">
 3                 <div class="left-chart" :id="'left-chart-'+item.id" style="width:500px;height: 400px;margin-bottom:20px;padding-top:10px;border: 1px solid #f0f0f0;">
 4                   <img src="../../assets/timg.jpg" alt="暂无图片" style="width:100px;height:100px;"></div>
 5               
 6               <div class="right-chart" :id="'right-chart-'+item.id" style="width:500px;height: 400px;margin-bottom:20px;padding-top:10px;border: 1px solid #f0f0f0;">
 7                 <img src="../../assets/timg.jpg" alt="暂无图片" style="width:100px;height:100px;"></div>
 8             </div>
 9           </div>
10           <div id="pie" v-if="showPie2">
11             <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;">
12                 <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>
13               
14               <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>
15             </div>
16           </div>

id为chart-row的是选中某一项的dom，id为pie的是默认展示所有图表的dom.

dom的id取名跟绑定图表初始化的dom名一致，且命名是有规律的。

我这里是同时展示两种类型的图表，成功率和明细，使用axios.all（）方法将数据同时请求回来，在请求接口时，使用ES7中的async异步执行，保证数据在.all方法中能够全部获取完。

 1 //获取折线图成功失败率接口定义
 2   async getLeftLineData(list){
 3     var data = {}
 4     if(this.filters.invoice){
 5       data = { ticketType: this.filters.invoice}
 6     }else{
 7       data = { ticketType: list.id }
 8     }
 9     return this.$api.report.ocrMonthCount(data)
10   },

获取到的数据在axios.all方法里做处理，其中optionList是存放循环入参信息的；

optionList: [
        //选择
        { value: '', label: "请选择"},
        { value: "001", label: "选择一" },
        { value: "002", label: "选择二" },
        { value: "003", label: "选择三" },
      ],

 1 for(let i = 0; i < optionList.length; i++){
 2       axios.all([this.getLeftLineData(optionList[i]), this.getRightLineData(optionList[i])])
 3       .then(res=>{
 4         let leftData = res[0].data
 5         let rightData = res[1].data
 6         var xAxis = [];
 7         var failTotal = []
 8         var successTotal = []
 9         var successFailurArry = [1, 2]
10         for(var y = 0; y<successFailurArry.length; y++){
11       // 基于准备好的dom，初始化echarts实例,左侧占比
12           var myChart = echarts.init(document.getElementById('left-line-'+optionList[i].id));
13         for (var j = 0; j < leftData.fail.length; j++) {
14           xAxis.push(leftData.fail[j].monthName);
15           failTotal.push(leftData.fail[j].monthTotal);
16         }
17         for (var k = 0; k < leftData.success.length; k++) {
18           successTotal.push(leftData.success[k].monthTotal);
19         }
20         // 绘制图表
21         var seriesOption = {
22             //配置信息
23         }    
24          myChart.setOption(seriesOption, true);
25         }

有时，myChart.clear()无效，可以手动的将上一次定义的值清空。

转载于:https://www.cnblogs.com/lesliejavascript/p/10969141.html