当前位置：首页 > VUE

vue实现重新刷新echarts

2026-01-22 07:28:56VUE

重新渲染 ECharts 的方法

在 Vue 项目中，当数据更新后需要重新渲染 ECharts 图表时，可以采用以下几种方式：

销毁并重新初始化图表

通过调用 dispose() 方法销毁旧的图表实例，再重新创建新的实例。适用于数据或配置发生重大变化时。

this.$nextTick(() => {
  if (this.chart) {
    this.chart.dispose();
  }
  this.chart = echarts.init(this.$refs.chartDom);
  this.chart.setOption(newOptions);
});

使用 setOption 方法更新

ECharts 的 setOption 方法支持增量更新，适合数据部分变动的情况。通过设置 notMerge: false 可以保留之前的状态。

this.chart.setOption(newOptions, {
  notMerge: false,
  lazyUpdate: true
});

使用 resize 方法

当容器尺寸变化或需要重新计算布局时，调用 resize() 方法可以重新渲染图表。

window.addEventListener('resize', () => {
  this.chart.resize();
});

强制刷新组件

在 Vue 中可以通过修改 key 值强制重新创建组件，这会触发 ECharts 的重新初始化。

vue实现重新刷新echarts

<template>
  <div :key="chartKey">
    <div ref="chartDom" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartKey: 0
    };
  },
  methods: {
    refreshChart() {
      this.chartKey += 1;
    }
  }
};
</script>

最佳实践建议

对于频繁的数据更新，优先使用 setOption 的增量更新方式
当图表容器尺寸发生变化时，务必调用 resize() 方法
在组件销毁前，记得调用 dispose() 释放资源
在 Vue 的 mounted 钩子中初始化图表，在 beforeDestroy 中销毁图表

mounted() {
  this.initChart();
},
beforeDestroy() {
  if (this.chart) {
    this.chart.dispose();
  }
},
methods: {
  initChart() {
    this.chart = echarts.init(this.$refs.chartDom);
    this.chart.setOption(this.options);
  }
}