vue使用Echarts設置數據無效問題如何解決

本文小編為大家詳細介紹“vue使用Echarts設置數據無效問題如何解決”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue使用Echarts設置數據無效問題如何解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

場景：

做一個動態的柱狀圖，模擬socket效果，如圖所示：

遇到的問題：

元數據格式是這樣的：

config: {
        data: [
          {
            name: '義烏市',
            value: 169
          },
          {
            name: '東陽市',
            value: 123
          },
          {
            name: '武義縣',
            value: 98
          },
          {
            name: '蘭溪市',
            value: 75
          },
          {
            name: '金東區',
            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的話，要實現此類功能，可能還要重新運行初始化函數

例如：this.init(this.data)

讀到這里，這篇“vue使用Echarts設置數據無效問題如何解決”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。