1、循环遍历数据ID
2、在组件引入 import echarts from 'echarts'
3、在data里定义roseChart: "roseChart",
4、在methods：{}获取ID并获取接口数据及调用
//曲线分析图
drawRose () {
var roseCharts = document.getElementsByClassName("roseChart"); // 对应地使用ByClassName
for (var i = 0; i < roseCharts.length; i++) { // 通过for循环，在相同class的dom内绘制元素
var myChart = echarts.init(roseCharts[i]);
myChart.setOption({
title: {
text: this.list[i].name
},
legend: {
data: this.list[i].legend
},
tooltip: {
show: true,
transitionDuration: 0,//防止tooltip的抖动
trigger: 'axis',
axisPointer: {
type: "cross",
axis: "x"
},
padding: [10, 10],
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
},
xAxis: [{
data: this.list[i].times,
axisLabel: {
interval: 0,
rotate: 40
},
}],
yAxis: {},
series: [{
name: this.list[i].legend[0],
type: 'line',
data: this.list[i].tdatas,
smooth: true,
showAllSymbol: true,
itemStyle: {
normal: {
color: 'yellow',
lineStyle: {
color: "yellow",
width: 1
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: '#fff' // 0% 处的颜色
}, {
offset: 1,
color: 'yellow' // 100% 处的颜色
}]
}
}
}
}
},
{
name: this.list[i].legend[1],
type: 'line',
data: this.list[i].ydatas,
showAllSymbol: true,
smooth: true,
itemStyle: {
normal: {
color: '#3A84FF',
lineStyle: {
color: "#3A84FF",
width: 1
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(0, 0, 0, 0)' // 0% 处的颜色
}, {
offset: 1,
color: '#1fb5fc' // 100% 处的颜色
}]
}
}
}
}
},]
})
}
}
5、获取接口并将之赋值到data里面定义的数组
6、watch监听
watch: {
list (val) {
this.drawRose()
},
}
7、后台数据格式
