vue使用Echarts設(shè)置數(shù)據(jù)無效問題記錄及解決方法

更新時間：2022年08月09日 09:25:07 作者：接著奏樂接著舞

這篇文章主要介紹了vue使用Echarts設(shè)置數(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()也不好使的時候可以嘗試這個方法。

一句話總結(jié)就是，復制元數(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)
  },