记一次 bug: vue 中 echarts 等图表如何实现响应式更新？

本文链接：https://blog.csdn.net/weixin_42348747/article/details/105590856

本文记录了一次在Vue项目中遇到的Echarts图表无法响应数据更新的问题。通过排查确认问题在于mounted生命周期仅执行一次。解决方法是利用watch监听数据变化，数据更新时重新绘制图表。示例代码展示了解决方案的具体实现。

摘要由CSDN通过智能技术生成

前言

最近的项目使用了 vue-chartjs 图表和 echarts 图表。昨天联调接口发现接口返回数据后，图表没有根据数据更新。还是默认数据渲染的图表。

排查

确认了接口没问题和代码也没报错后。审查代码发现是图表的渲染是在 mounted 中执行的，而这个生命周期函数只执行一次，所以数据更新了，图表没有响应式更新也是正常的。本来还以为是要调用专门的 API 去刷新图表。

解决

经过网上查找资料发现，其实只要使用 watch 检测数据，然后当数据更新后调用图表的绘制方法就可以了。就这么简单。

示例

 props: {
    chartsData: {
      type: Array,
      required: true,
      validator: function(value) {
        return value.length > 0;
      }
    }
},
computed: {
    counts() {
      let count = [];
      this.chartsData.forEach(item => {
        count.push(item.allAmountTotalDay);
      });
      return count;
    },
    days() {
      let day = [];
      this.chartsData.forEach(item => {
        day.push(item.day);
      });
      return day;
    },
    // all 计算属性的用途是将需要 watch 的两个属性合并到一起再进行监测
    all() {
      return { counts: this.