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