ECharts容器变化后图表不自适应？ResizeObserver完整修复指南

ECharts 不会因为侧栏折叠或父容器变宽就自动重算画布；容器尺寸变化后必须调用实例的 resize()。window.resize 只能覆盖浏览器窗口变化，Tab、弹窗、栅格重排和侧栏动画应监听图表容器本身。若容器初始化时为零宽高，还要等它可见后再创建或主动刷新。

本文适用于现代浏览器与 Apache ECharts，给出可直接使用的 ResizeObserver 封装、隐藏容器处理、框架卸载清理和排错顺序。读完后，你不仅能让图表跟随布局变化，还能避免重复初始化、观察器泄漏和动画期间频繁重排。

一、先看结论：容器变了图表没变，怎么修

一句话：观察容器，而不是只观察窗口；初始化保证非零尺寸，变化时 resize()，卸载时清理。

二、先复现窗口没变、容器变了

初始化前容器必须已有宽高，这是 ECharts 教程 中最容易被忽略的前提。先不要引入框架生命周期，使用最小 HTML 确认问题确实来自尺寸变化。

<!-- 容器必须有明确高度，宽度可以自适应 -->
<div id="chart" style="width:100%;height:320px"></div>

<script>
  // 初始化 ECharts 实例
  const chart = echarts.init(document.querySelector('#chart'));

  // 设置一个最小柱状图配置
  chart.setOption({
    xAxis: { type: 'category', data: ['A', 'B'] },
    yAxis: {},
    series: [{ type: 'bar', data: [3, 7] }]
  });
</script>

侧栏收起时窗口宽度没变，window.resize 不触发，画布仍保留旧宽度。先分别打印容器与画布的 getBoundingClientRect()：

// 查看容器实际尺寸
console.log(document.querySelector('#chart').getBoundingClientRect());

// 查看 canvas 实际尺寸
console.log(document.querySelector('#chart canvas').getBoundingClientRect());

若容器本身宽度也没变化，则应先修 CSS，而不是反复调用 ECharts API。

三、用 ResizeObserver 观察真实容器

// 获取图表容器
const element = document.querySelector('#chart');

// 初始化 ECharts 实例
const chart = echarts.init(element);

// 用于合并同一帧的多次回调
let frame = 0;

// 创建 ResizeObserver，观察容器尺寸变化
const observer = new ResizeObserver(() => {
  // 取消上一次未执行的动画帧
  cancelAnimationFrame(frame);

  // 在下一帧统一调用 resize，避免动画期间频繁重排
  frame = requestAnimationFrame(() => {
    // 实例未销毁时才调用 resize
    if (!chart.isDisposed()) {
      chart.resize();
    }
  });
});

// 开始观察容器
observer.observe(element);

requestAnimationFrame 合并同一帧的多次通知，避免布局动画中频繁 resize。还应在回调中先判断实例是否已经销毁，并只观察真正控制图表宽高的节点。

组件卸载时要执行三步清理：

// 组件卸载时的清理函数
function cleanup() {
  // 取消待执行的动画帧
  cancelAnimationFrame(frame);

  // 停止观察容器
  observer.disconnect();

  // 销毁图表实例
  if (!chart.isDisposed()) {
    chart.dispose();
  }
}

JavaScript 基础可参考 JavaScript 教程。

如果页面有十几个图表，不必为每个图表监听整个窗口。可以让一个 ResizeObserver 观察多个容器，再用 entry.target 找到对应实例；但要保存 DOM 与实例的映射，并在删除节点时同步清理。

高频尺寸动画中，是否还需要额外节流应以 Performance 面板的布局耗时为准。

四、隐藏 Tab 要等到非零尺寸

display:none 下容器宽高为 0，此时初始化会得到错误尺寸。隐藏容器第一次显示后再 init，或者在显示且布局完成后调用 resize()。

// 错误：隐藏容器中初始化，宽高为 0
// const chart = echarts.init(hiddenElement);

// 正确：容器可见后再初始化
function initWhenVisible(element, option) {
  // 如果容器还没有宽高，等待下一次布局
  if (element.clientWidth === 0 || element.clientHeight === 0) {
    requestAnimationFrame(() => initWhenVisible(element, option));
    return;
  }

  // 复用已有实例，避免重复创建
  const chart = echarts.getInstanceByDom(element) ?? echarts.init(element);
  chart.setOption(option);
}

不要每次切换都创建新实例；先用 echarts.getInstanceByDom 检查已有实例，否则同一个 DOM 会积累事件处理器和内存。

CSS 也要给高度，只有 width:100% 不够：

/* 容器必须有高度 */
#chart {
  width: 100%;
  height: 320px;
}

可以在本地最小 HTML 页面复现布局，但需自行引入 ECharts 库，并确保页面离线打开时资源路径仍然正确。

动画组件常见的时序是：修改侧栏类名 → 浏览器逐帧计算宽度 → 过渡结束。ResizeObserver 会在过程中多次触发；如果只想在最终尺寸重绘，可监听 transitionend 作为补充，但不能只依赖它，因为无动画的尺寸变化不会触发。最稳妥的基线仍是观察容器，然后按实际性能决定合并策略。

五、框架中把创建与清理成对放置

Vue 在 mounted 后创建，unmounted 时清理；React 在 effect 中创建并返回清理函数。依赖主题或 renderer 变化时，先销毁旧实例再创建新实例；普通数据变化只需 setOption，不要借机重复 init。

// 挂载图表并返回清理函数
function mountChart(element, option) {
  if (!element) throw new Error('chart element is required');

  // 复用已有实例，避免重复初始化
  const chart = echarts.getInstanceByDom(element) ?? echarts.init(element);

  // 设置图表配置
  chart.setOption(option);

  // 观察容器尺寸变化
  const observer = new ResizeObserver(() => {
    if (!chart.isDisposed()) {
      chart.resize();
    }
  });
  observer.observe(element);

  // 返回清理函数，调用方必须执行
  return () => {
    observer.disconnect();
    if (!chart.isDisposed()) {
      chart.dispose();
    }
  };
}

调用方必须保存并执行返回的清理函数。失败时依次检查：

ECharts 销毁不是可选的“优化动作”，而是单页应用反复进入页面时避免旧实例继续占用事件和内存的必要步骤。

适用边界也要写清：

六、用一张检查表验证修复是否完整

依次测试窗口缩放、侧栏开合、Tab 首次显示、弹窗重复打开、路由离开后返回和数据更新。

正确结果不是“看起来差不多”，而是容器与画布尺寸同步、坐标轴文字没有被裁切、重复进入页面时实例数量不增长。

若图表仍空白，按顺序排查：

// 1. 确认容器有尺寸
console.log(element.getBoundingClientRect());

// 2. 确认实例存在
console.log(echarts.getInstanceByDom(element));

// 3. 最后检查 option 数据
console.log(chart.getOption());

尺寸、实例和数据一次只验证一层，能避免把空数据误判成响应式失败。

七、高分屏、缩放与调试面板

在高分屏设备上还应比较 CSS 尺寸与 canvas 实际像素尺寸：

// CSS 尺寸
const rect = element.getBoundingClientRect();

// canvas 实际像素尺寸
const canvas = element.querySelector('canvas');
console.log(rect.width, rect.height);
console.log(canvas.width, canvas.height);

两者因设备像素比不同不一定数值相等，不能仅凭 canvas 的 width 属性判断错误。真正要验证的是图表在视觉上清晰、坐标轴不裁切，并且 ECharts 实例在 resize 后使用了最新容器尺寸。

对于仪表盘，可在开发环境增加一个调试面板，显示：

侧栏动画期间如果回调数非常高，再通过 requestAnimationFrame 合并；若回调正常却图表不变，优先检查保存的 chart 是否是当前 DOM 对应实例。这样 ECharts 自适应问题可以从“肉眼感觉”变成有数据的定位过程。

最后测试浏览器缩放与页面缩放。它们可能改变设备像素比或布局，但不一定走同一事件路径。只要容器观察、实例生命周期和清理逻辑保持一致，修复就不需要为每一种布局组件编写一套特例。

总结

ECharts 自适应的关键是观察容器而非只观察窗口。初始化保证非零尺寸，变化时调用 resize()，卸载时断开观察并执行 ECharts 销毁，就能覆盖侧栏、隐藏容器、Tab 和弹窗场景。最后用重复开关和路由往返验证，才能确认修复没有引入内存泄漏。

延伸学习

1. ECharts 案例教程 可继续练配置；
2. Pyecharts 交互图表 展示另一种图表接入方式；
3. Txyecharts 课程 可继续练习图表配置与布局。

常见问题

Q：监听 window.resize 为什么没用？

A：因为容器变化不一定伴随窗口变化。折叠侧栏和 Tab 切换应监听容器。

Q：resize 后仍然是空白怎么办？

A：检查初始化时是否零宽高，并在容器可见后调用 resize 或重新初始化。

Q：ResizeObserver 会不会死循环？

A：同步修改被观察元素尺寸可能循环。把 resize 放进 requestAnimationFrame，并避免回调里反复改容器样式。

Q：什么时候需要手动调用 chart.resize()？

A：容器尺寸变化后，并且 ECharts 没有自动感知时。用 ResizeObserver 监听容器，在回调中调用 resize() 是最稳的做法。