總所周知,echarts中生成的圖表只會(huì)在mounted中只執(zhí)行一次
類(lèi)似這種寫(xiě)法

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

如果有個(gè)需求需要你點(diǎn)擊按鈕進(jìn)行切換,這個(gè)title不能寫(xiě)死的,就要將你這個(gè)圖表實(shí)例定義在data中方便操作,然后監(jiān)聽(tīng)你點(diǎn)擊之后的變化,我這里點(diǎn)擊之后activeName發(fā)生了變化,然后watch你這個(gè)發(fā)生變化了的數(shù)據(jù),就能改變echarts圖表中的某個(gè)對(duì)象

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。