可以把option写在computed里面，option里面的变量可以通过写在method或者watch里，变量变化eCharts就会重新渲染
以下是我自己的一段代码：
computed里面的option：
computed: {
option () {
return {
legend: {
show: true,
bottom: 'bottom',
data: this.typeStr
},
grid: { // 调整图表与容器距离
left: '4%',
right: '4%',
containLabel: true
},
tooltip: {
trigger: 'axis'
},
xAxis: {
data: this.localDateStrAxis,
type: 'category',
min: 'datamin',
boundaryGap: true, // x坐标轴两端留白
axisLine: {
lineStyle: {
color: '#f0f0f0'
}
},
axisTick: {
lineStyle: {
color: '#f0f0f0'
}
},
axisLabel: {
color: '#5b5d61'
}
},
yAxis: this.yAxis,
series: this.series
}
}
}
watch里面的内容：
watch: {
// 值更新时即时更新eCharts
localValueAxis: {
handler: function (n, o) {
this.series = []
this.yAxis = []
for (let i = 0; i < n.length; i++) {
this.series.push({
name: this.typeStr[i],
type: 'line',
data: n[i],
yAxisIndex: i,
areaStyle: { opacity: 0.3 }
})
this.yAxis.push({
name: this.typeStr[i],
type: 'value',
axisLine: {
show: false
},
axisLabel: {
color: '#787a7d'
},
axisTick: {
show: false
},
splitNumber: 3,
splitLine: {
show: true
}
})
}
},
deep: true
}
}
不用太过在意watch里的具体代码，逻辑就是：当localValueAxis这个值变化后我让eCharts的yAxis、series等重新赋值，vue自然就会重新渲染eCharts了。希望能帮到题主。