Vue3中Echarts图表Resize报错排查与解决求助

可能的原因 #

• debounce延迟过长：800ms的延迟会导致窗口resize完成后很久才触发resize方法，期间ECharts内部的坐标系状态可能已经和容器尺寸脱节，引发undefined错误。
• 实例有效性未校验：resize时没有确认图表实例是否处于可用状态（比如是否被意外销毁），直接调用resize会导致内部逻辑出错。
• 容器尺寸获取异常：ECharts自动获取容器宽高失败，导致resize时无法重建坐标系。
• 切换数据时的实例状态问题：handleChange中复用实例时，若容器尺寸已变化，直接setOption可能导致坐标系未正确初始化。

修复方案 #

1. 缩短debounce延迟并增加实例有效性校验 #

把debounce的时间调整到200-300ms，同时校验实例是否未被销毁：

const listenResize = debounce(() => {
  // 校验实例存在且未被销毁
  if (myChart.value && !myChart.value.isDisposed()) {
    // 手动指定尺寸参数，强制重新计算容器尺寸
    myChart.value.resize({ width: 'auto', height: 'auto' })
  }
}, 300) // 缩短延迟至合理区间

2. 确保容器DOM的尺寸正确绑定 #

检查模板中的容器元素是否设置了明确的宽高（或通过布局自适应），避免resize时容器尺寸为0：

<template>
  <!-- 给容器设置自适应或固定尺寸，确保ECharts能获取到有效宽高 -->
  <div ref="chartRef" style="width: 100%; height: 400px;"></div>
</template>

3. 优化handleChange中的实例初始化逻辑 #

在创建实例前确保容器DOM已挂载且有有效尺寸，同时在setOption后触发一次resize：

const handleChange = (type: SelectType) => {
  const option = getData(props.lineData[type])
  if (!myChart.value) {
    // 确保DOM元素存在后再初始化实例
    if (!chartRef.value) return
    myChart.value = echarts.init(chartRef.value)
  }
  if (option) {
    myChart.value.setOption(option)
    // 设置完配置后触发resize，确保坐标系正确初始化
    myChart.value.resize()
  }
}

4. 完善实例销毁逻辑 #

组件卸载时彻底销毁图表实例，避免内存泄漏和无效调用：

onUnmounted(() => {
  window.removeEventListener('resize', listenResize)
  // 销毁实例并清空引用
  if (myChart.value) {
    myChart.value.dispose()
    myChart.value = null
  }
})

内容的提问来源于stack exchange，提问作者skyScraperno_1