總所周知,echarts中生成的圖表只會在mounted中只執行一次
類似這種寫法

mounted() {const lineCharts = echarts.init(this.$refs.charts)lineCharts.setOption({title: {text: '銷售額趨勢'},}) }

如果有個需求需要你點擊按鈕進行切換,這個title不能寫死的,就要將你這個圖表實例定義在data中方便操作,然后監聽你點擊之后的變化,我這里點擊之后activeName發生了變化,然后watch你這個發生變化了的數據,就能改變echarts圖表中的某個對象

data() {return {activeName: 'first',myCharts: null}}, mounted() {this.myCharts = echarts.init(this.$refs.charts)this.myCharts.setOption({title: {text: '銷售額趨勢'},}) }, watch: {activeName() {this.myCharts.setOption({title: {text: this.activeName+ '趨勢'}})}},

總結

以上是生活随笔為你收集整理的vue中如何实现点击某个地方,让echarts生成的图表发生变化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。