vue.js中使用echarts實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)刷新功能
更新時(shí)間：2019年04月16日 14:50:33 作者：歆&雅
這篇文章主要介紹了vue.js中使用echarts實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)刷新功能,需要的朋友可以參考下
在vue使用echarts時(shí)，可能會(huì)遇到這樣的問題，就是直接刷新瀏覽器，或者數(shù)據(jù)變化時(shí)，echarts不更新?
這是因?yàn)镋charts是數(shù)據(jù)驅(qū)動(dòng)的，這意味著只要我們重新設(shè)置數(shù)據(jù)，那么圖表就會(huì)隨之重新渲染，這是實(shí)現(xiàn)本需求的基礎(chǔ)。我們再設(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){
//偵聽相對應(yīng)的屬性
//判斷echarts對象是否存在存在 if(charts),charts為定義的echarts對象,
//若存咋， 則繼續(xù)判斷屬性是否發(fā)生變化 if(newvalue)，發(fā)生變化重新設(shè)置echarts的option, charts.setOption(newvalue),沒發(fā)生變化則 charts.setOption(loldvalue)
//若charts對象不存在，則直接初始化echarts
}
}
總結(jié)
以上所述是小編給大家介紹的vue.js中使用echarts實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)刷新功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
前端上傳文件很大時(shí),會(huì)出現(xiàn)各種問題,比如連接超時(shí)了,網(wǎng)斷了,都會(huì)導(dǎo)致上傳失敗,這個(gè)時(shí)候就需要將文件切片上傳,下面我們就來學(xué)習(xí)一下如何使用vue實(shí)現(xiàn)大文件切片上傳吧2023-11-11
這篇文章主要介紹了vue3 component is 不顯示的問題及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了VUE el-tree組件左邊勾選，右邊清除交互問題，具有很好的參考價(jià)值，希望對大家有所幫助。2023-04-04
虛擬DOM的概念是通過狀態(tài)生成一個(gè)虛擬節(jié)點(diǎn)樹，然后使用虛擬節(jié)點(diǎn)樹進(jìn)行渲染。在渲染之前，會(huì)使用新生成的虛擬節(jié)點(diǎn)和上一次生成的虛擬節(jié)點(diǎn)進(jìn)行對比，只渲染不同的部分2022-08-08
幾乎每個(gè)項(xiàng)目都會(huì)使用登錄頁面,這篇文章主要給大家介紹了如何通過一文教會(huì)你快速上手vue的登錄界面,文中通過實(shí)例代碼介紹的很詳細(xì),需要的朋友可以參考下2022-11-11
在vue3中動(dòng)態(tài)加載遠(yuǎn)程組件的流程步驟
在一些特殊的場景中（比如低代碼、減少小程序包體積、類似于APP的熱更新）,我們需要從服務(wù)端動(dòng)態(tài)加載.vue文件,然后將動(dòng)態(tài)加載的遠(yuǎn)程vue組件渲染到我們的項(xiàng)目中,今天這篇文章我將帶你學(xué)會(huì),在vue3中如何去動(dòng)態(tài)加載遠(yuǎn)程組件,感興趣的小伙伴跟著小編一起來看看吧2024-08-08
今天小編就為大家分享一篇vue綁定事件后獲取綁定事件中的this方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
教你如何開發(fā)Vite3插件構(gòu)建Electron開發(fā)環(huán)境
這篇文章主要介紹了如何開發(fā)Vite3插件構(gòu)建Electron開發(fā)環(huán)境,文中給大家提到了如何讓 Vite 加載 Electron 的內(nèi)置模塊和 Node.js 的內(nèi)置模塊，需要的朋友可以參考下2022-11-11
Vue3 組件間通信之mitt實(shí)現(xiàn)任意組件間通信的步驟
mitt 主要有4個(gè)API：emit（觸發(fā)某個(gè)事件）、on（綁定事件）、off（解綁某個(gè)事件）、all（獲取所有綁定的事件）,這篇文章主要介紹了Vue3 組件間通信之mitt實(shí)現(xiàn)任意組件間通信,需要的朋友可以參考下2024-05-05
Vue3的setup在el-tab中動(dòng)態(tài)加載組件的方法
公司某項(xiàng)目需求在頁面顯示的組件是根據(jù)角色變化而變化的，怎么實(shí)現(xiàn)這個(gè)效果呢，下面小編給大家介紹下Vue3的setup在el-tab中動(dòng)態(tài)加載組件的方法,需要的朋友可以參考下2022-11-11