需求:根据不同的入参调同一接口,循环展示一组饼形图或折线图;
主要问题:在于给定的数据格式不符合图表的配置项格式,需要拆分组装数据;首先默认展示几个图表,当选中一个类别,需要展示其中一个的时候,页面中的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()无效,可以手动的将上一次定义的值清空。