可以把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了。希望能幫到題主。