元素
元素
工具
博客
问答

Vue Bar柱状图数据更新后图表不刷新怎么办？

IT人志欣 阅读 11
组件

用Vue写了一个Bar柱状图组件，数据从接口拿回来后初始化正常，但切换筛选条件后数据更新了图表却不刷新，尝试过this.$forceUpdate()也没用，求解！

代码结构大概是这样的：



  




export default {
  props: ['chartData'],
  watch: {
    chartData: {
      handler() {
        this.initChart()
      },
      deep: true
    }
  },
  methods: {
    initChart() {
      const chart = this.$echarts.init(this.$refs.chart)
      chart.setOption({
        xAxis: { data: this.chartData.categories },
        series: [{ data: this.chartData.values }]
      })
    }
  }
}

控制台没报错，但新数据传进来后柱子完全没变化，得手动刷新页面才能显示最新数据，搞不懂为啥...

我来解答 赞 3 收藏
二维码
手机扫码查看
反馈
2 条解答
小艳花
小艳花 Lv1
问题出在每次数据更新都重新init图表实例，但没销毁之前的实例，导致冲突。修改initChart方法，在初始化前先dispose旧实例：

initChart() {

  if (this.chart) this.chart.dispose()

  this.chart = this.$echarts.init(this.$refs.chart)

  this.chart.setOption({

    xAxis: { data: this.chartData.categories },

    series: [{ data: this.chartData.values }]

  })

}


另外在组件销毁时记得释放资源：

beforeDestroy() {

  if (this.chart) this.chart.dispose()

}


这样改完应该就没问题了，检查一下。
点赞
2026-02-20 08:09
程序员子斌
程序员子斌 Lv1
这个问题我之前也踩过坑，说白了就是 ECharts 的实例没有正确更新数据。你现在的代码逻辑里每次 initChart 都重新调用 this.$echarts.init 创建了一个新的图表实例，但其实这样会导致性能问题，而且有时候新实例的渲染会有点问题。

正确的做法是，在组件挂载的时候初始化一次 ECharts 实例，然后在数据变化时调用 chart.setOption 来更新图表，而不是每次都重新初始化。把你的代码调整一下：

export default {

  props: ['chartData'],

  data() {

    return {

      chart: null // 用来保存 ECharts 实例

    }

  },

  watch: {

    chartData: {

      handler() {

        this.updateChart()

      },

      deep: true

    }

  },

  mounted() {

    this.chart = this.$echarts.init(this.$refs.chart)

    this.updateChart()

  },

  beforeDestroy() {

    if (this.chart) {

      this.chart.dispose() // 组件销毁时记得销毁实例，释放资源

    }

  },

  methods: {

    updateChart() {

      if (this.chart) {

        this.chart.setOption({

          xAxis: { data: this.chartData.categories },

          series: [{ data: this.chartData.values }]

        })

      }

    }

  }

}


关键点有几个：
1. 把 ECharts 实例保存到 data 里，只在 mounted 的时候初始化一次。
2. 数据变化时调用 updateChart 方法，直接通过 setOption 更新数据。
3. 在组件销毁前记得调用 dispose 释放资源，不然可能会有内存泄漏的风险。

另外提一句，deep: true 的确能监听到对象内部的变化，但如果你传入的 chartData 是一个全新的对象而不是内部属性变化，其实也可以不用 deep 监听，普通的 handler 就够了。

别走弯路，按这个方式改，应该就能解决问题了。
点赞 2
2026-02-15 23:02
相关推荐
元素
元素
工具
博客
问答
登录/注册