如何在 Dialog 中安全初始化 ECharts 并自动监听容器大小变化

如何在 Dialog 中安全初始化 ECharts 并自动监听容器大小变化

在使用 ECharts 的 Vue 项目中，我们常常会将图表放入弹窗（如 Element UI 的 <el-dialog>）中进行展示。但你是否遇到过以下问题：

• 图表初次显示尺寸异常，大小不对？
• 拖动 Dialog 改变大小后，图表没有自动适应？
• 多次打开 Dialog 后性能下降？

本文将手把手教你如何优雅地初始化 ECharts 图表 ，并绑定 ResizeObserver 动态监听容器尺寸变化，避免内存泄露与图表错位。

---

常见问题分析

observeResize(chart, containerEl)

这个工具方法可以为图表绑定 ResizeObserver，当容器大小变化时调用 chart.resize()。

但如果你在 Dialog 中每次都调用 initChart()，并写成下面这样：

this.chart = echarts.init(this.$refs.chartEl)
observeResize(this.chart, this.$refs.chartEl)

⚠️ 问题就来了：你每次都会绑定一个新的 ResizeObserver，导致：

• resize() 被多次重复触发
• 内存泄露
• 难以调试与维护

---

正确写法一：自定义 Resize 工具方法（不使用指令，防止重复绑定）

👇 resize 工具封装

/**
 * 给 ECharts 实例绑定 ResizeObserver，当容器尺寸变化时自动执行 resize()
 * 自动避免重复绑定，确保 resizeObserver 只存在一个
 *
 * @param {echarts.ECharts} chart - ECharts 图表实例
 * @param {HTMLElement} containerEl - 图表绑定的容器 DOM
 */
export function observeResize(chart, containerEl) {
  if (!chart || typeof chart.resize !== 'function') {
    console.warn('observeResize: 无效的 ECharts 实例')
    return
  }

  if (!containerEl || !(containerEl instanceof HTMLElement)) {
    console.warn('observeResize: 无效的容器元素')
    return
  }

  // 若已有 Observer，先解绑避免重复监听
  if (chart.__resizeObserver__) {
    chart.__resizeObserver__.disconnect()
    delete chart.__resizeObserver__
  }

  const resizeObserver = new ResizeObserver(() => {
    chart.resize()
  })

  resizeObserver.observe(containerEl)
  chart.__resizeObserver__ = resizeObserver
}

/**
 * 解绑 ResizeObserver（可用于销毁图表时调用）
 * @param {echarts.ECharts} chart
 */
export function unobserveResize(chart) {
  if (chart && chart.__resizeObserver__) {
    chart.__resizeObserver__.disconnect()
    delete chart.__resizeObserver__
  }
}

---

正确写法二：初始化图表前先判断 + 设置监听

initChart() {
  if (!this.$refs.chartEl) return

  if (this.chart) {
    // 已存在时，先释放之前绑定的 observer
    unobserveResize(this.chart)
    this.chart.dispose()
  }

  this.chart = echarts.init(this.$refs.chartEl)
  this.chart.setOption(this.option)
  observeResize(this.chart, this.$refs.chartEl)
}

---

效果验证

✅ 弹窗打开后：图表自动初始化

✅ 拖动 Dialog 大小变化：图表自动 resize

✅ 多次打开关闭弹窗：无重复监听，无内存泄露

---

推荐实践

场景	做法
Dialog 中第一次打开图表	使用 observeResize() 并绑定一次
多次 init 图表	使用 dispose() + unobserveResize() 清理旧图表
使用指令更方便	可扩展为 v-echart-resize 指令封装

---