vue使用Echarts設置數據無效問題記錄及解決方法
更新時間：2022年08月09日 09:25:07 作者：接著奏樂接著舞
這篇文章主要介紹了vue使用Echarts設置數據無效問題記錄,本文通過場景分析給大家分享解決方法，需要的朋友可以參考下
場景：
做一個動態(tài)的柱狀圖，模擬socket效果，如圖所示：
遇到的問題：
元數據格式是這樣的：
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()依然無效。
最終解決方案：
我的思路是：
先定義一個變量接收初始值，然后對這個變量進行一些列的邏輯處理，最后再把這個變量賦值回去給元數據，這樣操作下來，以上的問題就解決了，寫這個文章的目的就是，如果有時候$set()也不好使的時候可以嘗試這個方法。
一句話總結就是，復制元數據，處理后賦值回去。
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)此類功能，可能還要重新運行初始化函數
例如：this.init(this.data)
到此這篇關于vue使用Echarts設置數據無效問題記錄的文章就介紹到這了,更多相關vue Echarts數據無效內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了如何手寫簡易的 Vue Router，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10
vue進入頁面加載數據緩慢實現(xiàn)loading提示過程
這篇文章主要介紹了vue進入頁面加載數據緩慢實現(xiàn)loading提示過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了解決Echarts 顯示隱藏后寬度高度變小的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章是一篇Vue.js的教程，目標在于用一種常見的業(yè)務場景——分頁/無限加載，以及編寫過程中自己的錯誤寫法，分享給大家，幫助讀者更好的理解Vue.js中的一些設計思想。2016-10-10
這篇文章主要給大家介紹了vue懶加載和子組件懶加載有什么區(qū)別,Vue懶加載指的是對圖片等資源的延遲加載,而子組件懶加載則是指延遲加載組件實例,文中通過代碼示例給大家講解的非常詳細,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細介紹了如何在你的Vue項目中實現(xiàn)累加動畫，文中的示例代碼簡潔易懂，具有一定的參考價值，感興趣的小伙伴可以了解一下2023-06-06
今天小編就為大家分享一篇關于Vue核心概念Action的總結，小編覺得內容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
解決vue無法加載文件C:\Users\Administrator\AppData\Roaming\npm\vue.ps
這篇文章主要介紹了解決vue無法加載文件C:\Users\Administrator\AppData\Roaming\npm\vue.ps1因為在此系統(tǒng)上禁止運行腳本問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本文給大家介紹了vue項目中跨域問題的完美解決方案，通過更改header，使用http-proxy-middleware 代理解決（項目使用vue-cli腳手架搭建），具體內容詳情大家跟隨腳本之家小編一起學習吧2018-06-06
這篇文章主要介紹了Vue 計數器的實現(xiàn)，主要利用HTML實現(xiàn)步驟現(xiàn)在頁面上簡單實現(xiàn)一個計數器，內容簡單且詳細,需要的朋友可以參考一下2021-10-10