vue使用Echarts設(shè)置數(shù)據(jù)無(wú)效問(wèn)題記錄及解決方法
場(chǎng)景：
做一個(gè)動(dòng)態(tài)的柱狀圖，模擬socket效果，如圖所示：
遇到的問(wèn)題：
元數(shù)據(jù)格式是這樣的：
config: {
data: [
{
name: '義烏市',
value: 169
},
{
name: '東陽(yáng)市',
value: 123
},
{
name: '武義縣',
value: 98
},
{
name: '蘭溪市',
value: 75
},
{
name: '金東區(qū)',
value: 66
},
],
colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
unit: '單位',
showValue: true
}剛開(kāi)始試著在mounted鉤子里面遍歷直接改，頁(yè)面無(wú)變化，但控制臺(tái)有效。
接著嘗試使用map，同上，失敗。
接著，使用$set()依然無(wú)效。
最終解決方案：
我的思路是：
先定義一個(gè)變量接收初始值，然后對(duì)這個(gè)變量進(jìn)行一些列的邏輯處理，最后再把這個(gè)變量賦值回去給元數(shù)據(jù)，這樣操作下來(lái)，以上的問(wèn)題就解決了，寫這個(gè)文章的目的就是，如果有時(shí)候$set()也不好使的時(shí)候可以嘗試這個(gè)方法。
一句話總結(jié)就是，復(fù)制元數(shù)據(jù)，處理后賦值回去。
mounted () {
this.clearTimer = setInterval(() => {
let obj = JSON.parse(JSON.stringify(this.config))
obj.data.forEach((item, index) => {
item.value += parseInt(Math.random() * 20 + 1)
})
this.config = obj
console.log(this.config.data)
}, 5000)
console.log(this.config.data)
},
beforeDestroy () {
clearInterval(this.clearTimer)
},小結(jié)：
如果再用echarts的話，要實(shí)現(xiàn)此類功能，可能還要重新運(yùn)行初始化函數(shù)
例如：this.init(this.data)
到此這篇關(guān)于vue使用Echarts設(shè)置數(shù)據(jù)無(wú)效問(wèn)題記錄的文章就介紹到這了,更多相關(guān)vue Echarts數(shù)據(jù)無(wú)效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了Vue父子組件元素獲取方法互相調(diào)用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-09-09
解決Vue編譯時(shí)寫在style中的路徑問(wèn)題
下面小編就為大家?guī)?lái)一篇解決Vue編譯時(shí)寫在style中的路徑問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
vue組件從開(kāi)發(fā)到發(fā)布的實(shí)現(xiàn)步驟
這篇文章主要介紹了vue組件從開(kāi)發(fā)到發(fā)布的實(shí)現(xiàn)步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
關(guān)于SpringBoot與Vue交互跨域問(wèn)題解決方案
最近在利用springboot+vue整合開(kāi)發(fā)一個(gè)前后端分離的個(gè)人博客網(wǎng)站，所以這一篇總結(jié)一下在開(kāi)發(fā)中遇到的一個(gè)問(wèn)題，關(guān)于解決在使用vue和springboot在開(kāi)發(fā)前后端分離的項(xiàng)目時(shí)，如何解決跨域問(wèn)題。在這里分別分享兩種方法，分別在前端vue中解決和在后臺(tái)springboot中解決。2021-10-10
使用vue構(gòu)建多頁(yè)面應(yīng)用的示例
這篇文章主要介紹了使用vue構(gòu)建多頁(yè)面應(yīng)用的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10
Vue中的數(shù)據(jù)驅(qū)動(dòng)解釋
這篇文章主要為大家介紹了Vue中的數(shù)據(jù)驅(qū)動(dòng)解釋，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
過(guò)濾器的功能是對(duì)要顯示的數(shù)據(jù)進(jìn)行格式化后再顯示,其并沒(méi)有改變?cè)镜臄?shù)據(jù),只是產(chǎn)生新的對(duì)應(yīng)的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue中過(guò)濾器定義以及使用方法的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue組件之間通信的七種方式,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
Vue使用Pinia輕松實(shí)現(xiàn)狀態(tài)管理
pinia，一個(gè)基于Vue3的狀態(tài)管理庫(kù)，它可以幫助開(kāi)發(fā)人員管理Vue應(yīng)用程序的狀態(tài)，本文主要為大家介紹了Pinia的用法，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-06-06
Vue實(shí)現(xiàn)導(dǎo)出excel表格功能
這篇文章主要介紹了Vue實(shí)現(xiàn)導(dǎo)出excel表格的功能，在文章末尾給大家提到了vue中excel表格的導(dǎo)入和導(dǎo)出代碼,需要的朋友可以參考下2018-03-03