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设置数据无效问题如何解决”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。