vue3使用echarts数据变化不渲染

在 Vue3 中使用 ECharts 渲染数据变化时，可能会遇到数据变化但不渲染的问题。这通常是由于 ECharts 实例没有及时更新导致的。

解决方法如下：

1. 监听数据变化

使用 `watch` 监听数据变化，当数据变化时，重新调用 ECharts 的渲染方法。

watch: {
  data: {
    deep: true,
    handler() {
      this.renderChart()
    }
  }
},

2. 在渲染方法中重新创建 ECharts 实例

在渲染方法中，先销毁旧的 ECharts 实例，再重新创建 ECharts 实例并渲染数据。

methods: {
  renderChart() {
    if (this.chart) {
      this.chart.dispose()
    }
    this.chart = echarts.init(this.$refs.chart)
    this.chart.setOption(this.option)
  }
},

通过以上两个步骤，可以解决 Vue3 使用 ECharts 渲染数据变化不渲染的问题。