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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

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