vue项目：echarts数据更新，但是没有重新绘制的问题

最新推荐文章于 2025-10-06 07:15:14 发布

原创最新推荐文章于 2025-10-06 07:15:14 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

文章讲述了在Vue组件中使用ECharts时遇到的问题，即由于数据请求是异步的，导致图表在初始化时使用了默认数据。解决方案是通过watch监听父组件传来的数据，确保在数据更新后再渲染图表。

问题复现：我封装了一个a组件，组件内包含了echarts图标，我把组件放到了home页面中，home页面在打开的时候会请求数据，处理完后通过组件通讯（父传子），把数据传给a组件，这样就产生了一个问题，请求是异步的，echarts会先用props中的默认数据直接渲染

最后解决方法

通过watch监听父组件传来的数据

export default {  
  props: {
    chartData: {
      type: Array,
      default: () => [],
    },
  },
watch: {
    chartData: {
      handler(newVal) {
        if (this.chart) {
          this.chart.setOption({
            // 更新图表的配置，使用新的数据
            series: [
              {
                data: newVal,
              },
            ],
          });
        } else {
          // 初始化图表
          this.chart = this.$echarts.init(this.$refs.echartsContainer);
          this.chart.setOption({
            // 初始图表的配置，使用初始数据
            series: [
              {
                data: this.AlertAllSections,
              },
            ],
          });
        }
      },
      deep: true,
    },
  },
}