在vue使用echarts時(shí)，可能會(huì)遇到這樣的問題，就是直接刷新瀏覽器，或者數(shù)據(jù)變化時(shí)，echarts不更新?

這是因?yàn)镋charts是數(shù)據(jù)驅(qū)動(dòng)的，這意味著只要我們重新設(shè)置數(shù)據(jù)，那么圖表就會(huì)隨之重新渲染，這是實(shí)現(xiàn)本需求的基礎(chǔ)。我們?cè)僭O(shè)想一下，

如果想要支持?jǐn)?shù)據(jù)的自動(dòng)刷新，必然需要一個(gè)監(jiān)聽器能夠?qū)崟r(shí)監(jiān)聽到數(shù)據(jù)的變化然后告知Echarts重新設(shè)置數(shù)據(jù)。

所幸Vue為我們提供了==watcher==功能，通過它我們可以很方便的實(shí)現(xiàn)上述功能：

watch:{

option:function(newvalue,oldvalue){

//偵聽相對(duì)應(yīng)的屬性

//判斷echarts對(duì)象是否存在存在 if(charts),charts為定義的echarts對(duì)象,

//若存咋， 則繼續(xù)判斷屬性是否發(fā)生變化 if(newvalue)，發(fā)生變化重新設(shè)置echarts的option, charts.setOption(newvalue),沒發(fā)生變化則?charts.setOption(loldvalue)

//若charts對(duì)象不存在，則直接初始化echarts

}

}

總結(jié)

以上是生活随笔為你收集整理的vue 刷新echarts_在vue.js中使用echarts，数据动态刷新的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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