vue 中 echarts 等图表如何实现响应式更新？

前言

最近的项目使用了 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.counts, days: this.days };
    }
  },
watch: {
    all(curVal) {
    // 数据发生改变，便调用图表绘制方法传入最新数据绘制
      this.drawLine(curVal.counts, curVal.days);
    }
},
mounted() {
    this.drawLine(this.counts, this.days);
},
methods: {
    drawLine(counts, days) {}
}

总结

将绘制方法定义在 methods 中便于复用，首先第一次在 mounted 中调用。然后使用 watch 属性监测处理过后的 chartsData ,数据改变时调用绘制方法，传入最新数据绘制。🆗 了。