ApexCharts动态更新数据后图表不更新怎么办？

Tr° 庆庆提问于 2026-02-09 23:54:26 阅读 31

组件

在Vue项目里用ApexCharts做柱状图，点击按钮更新数据源数组后图表没变化，chart.updateSeries()试过但报错说chart未定义。

我按文档写了个初始化方法：


const chartOptions = {
  series: [{ data: [30, 40, 45] }],
  xaxis: { categories: ['Jan', 'Feb', 'Mar'] }
}
let chart = await new ApexCharts(...).render()

后来在methods里尝试：


updateData() {
  this.series.data = [50, 60, 70]
  chart.updateSeries([{ data: this.series.data }])
}

但点击按钮时控制台提示”Cannot read properties of undefined (reading ‘updateSeries’)”

我来解答赞 5 收藏

反馈

2 条解答

皇甫素玲 Lv1

chart 没有正确赋值，因为你用了 let chart = await new ApexCharts().render()，但 render() 返回的是 Promise，你得等它 resolve。改成 this.chart = new ApexCharts(el, options)，然后在 mounted 里赋值并保存实例。

updateData() 里用 this.chart.updateSeries([{ data: [50, 60, 70] }]) 就行。

就这样。

2026-02-10 14:06

金利酱~ Lv1

你这个问题是典型的变量作用域和实例化时机问题。chart 是在初始化时定义的局部变量，到了 methods 里当然访问不到。

在 Vue 里用 ApexCharts，最好把 chart 实例挂到 this 上。比如你在 mounted 阶段创建图表：

mounted() {

  this.chart = new ApexCharts(this.$refs.chartContainer, this.chartOptions)

  this.chart.render()

}

然后 data 里准备好 series 数据：

data() {

  return {

    series: [{ data: [30, 40, 45] }],

    chartOptions: {

      xaxis: { categories: ['Jan', 'Feb', 'Mar'] }

    }

  }

}

更新的时候直接调实例上的方法：

methods: {

  updateData() {

    this.series = [{ data: [50, 60, 70] }]

    this.chart.updateSeries(this.series)

  }

}

注意别用 await new ApexCharts，这玩意儿不是 Promise，render() 才会返回 Promise。而且你原来的写法 let chart 是局部变量，外面根本拿不到。

这样改完逻辑更顺，也不容易出 undefined 的错。这样更清晰。

2026-02-10 00:02