vue2 按顺序循环调用接口数据 循环echarts图表展示数据
我们在开发过程中经常会用到图表统计，生成报表之类的功能，之前单个echarts比较好操作，但是很多图表的时候用echarts，就需要写成循环好点，会省略好多冗余代码，具体步骤如下：
1.html部分：
趋势分析图：
2.vue部分：
import echarts from 'echarts';
import API_REPORT from '../../api/report';
export default {
data(){
return {
parameter:{},
target:[],
}
},
created (){
//路由参数部分/report/tardetail?parkId="+this.parkid+"&siteId="+this.siteid+"&Month="+this.month+"&parkName="+this.parkName
this.parameter=this.$route.query;
let worldTime=this.parameter.Month.split("-");
this.dateTime=worldTime[0]+"年"+worldTime[1]+"月";
this.$nextTick(()=> {
let mval=this.parameter.Month.split("-")
this.MonthsiteList(this.parameter.parkId,this.parameter.siteId,mval[0],mval[1]);
})
},
methods: {
MonthsiteList(parkid,siteid,yearval,monthvalue){
this.target=[];
this.totalTime1=[];
let params={
currPageNo:this.currPageNo,
pageSize:this.pageSize,
parkId:parkid,
siteId:siteid,
year:yearval,
month:monthvalue
}
API_REPORT.Monform(params).then(res => {
if (res.code == '200') {
for(let i=1;i<=30;i++){
this.totalTime1.push(i+'日');
}
for(let i=0;i {
let params2={
startTime:stime,
endTime:etime,
siteId:this.parameter.siteId,
monitorIndex:item
};
const oneApi=API_REPORT.AvgContrast(params2).then(result => {
if(res.code == '200'){
DataSeries.push(
{
indexName:item,
oldData:result.other.oldValue,
nowData:result.other.value
}
);
}else{
return;
}
})
allApi.push(oneApi);
})
Promise.all(allApi).then(() => {
//接口查询完毕
this.drawRose(DataSeries);
})
}else{
return;
}
})
},
drawRose(Data){
var roseCharts = document.getElementsByClassName('world-charts'); // 对应地使用ByClassName
for(var i = 0;i < roseCharts.length;i++ ){ // 通过for循环，在相同class的dom内绘制元素
var myChart = echarts.init(roseCharts[i]);
var option={
color: ['#07cdbd', '#28bf7e', '#ed7c2f', '#f2a93b'],
title: {
text: "["+Data[i].indexName+"]",
textStyle: {
color: '#666',
fontWeight: 'bold',
fontSize: 16
}
},
tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: "#57617B"
}
},
},
legend: {
data: ["上月","本月"],
textStyle: {
color: "#333"
},
top: "0",
},
toolbox: {
show: true,
feature: {
magicType: {
type: ['line', 'bar']
},
saveAsImage: {}
}
},
grid: {
left: '1%',
right: '1%',
bottom: '1%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(0,0,0,.1)",
},
},
axisLabel: {
interval: 0,
textStyle: {
color: "rgba(0,0,0,.6)",
fontWeight: "normal",
fontSize: "12",
},
},
data:this.totalTime1
}
],
yAxis: [
{
type: 'value',
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(0,0,0,.1)",
},
},
axisLabel: {
//interval: 0,
textStyle: {
color: "rgba(0,0,0,.6)",
fontWeight: "normal",
fontSize: "12",
},
},
}
],
series:[
{
name:"上月",
type: "line",
symbol: "circle",
symbolSize: 10,
smooth: true,
lineStyle: {
normal: {
width: 3
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "rgba(98, 201, 141, 0.5)"
}, {
offset: 1,
color: "rgba(98, 201, 141, 0.1)"
}], false),
shadowColor: "rgba(0, 0, 0, 0.1)",
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: "#4cb9cf",
borderColor: "rgba(98, 201, 141,0.27)",
borderWidth: 12
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
},
data: Data[i].oldData
},
{
name:"本月",
type: "line",
symbol: "circle",
symbolSize: 10,
smooth: true,
lineStyle: {
normal: {
width: 3
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "rgba(158, 223, 127, 0.5)"
}, {
offset: 1,
color: "rgba(158, 223, 127, 0.1)"
}], false),
shadowColor: "rgba(0, 0, 0, 0.1)",
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: "#9edf7f",
borderColor: "rgba(158, 223, 127,0.27)",
borderWidth: 12
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
},
data: Data[i].nowData
}
]
}
myChart.setOption(option,true)
window.addEventListener("resize", () => {
if(myChart){
myChart.resize();
}
});
},
}
} 即可实现按顺序循环调用接口数据，echarts循环展示效果。