监听 resize 事件需配合防抖以避免频繁重绘导致卡顿，推荐用 addEventListener 绑定并手写 debounce 函数延迟执行 chart.resize()，首次加载也需手动调用；也可升级为 ResizeObserver 精准监听容器尺寸变化。
用 resize 事件监听窗口大小变化本身很简单，但直接绑定重绘图表会导致频繁触发、性能卡顿；配合防抖（debounce）能有效减少无效重绘，是实际项目中的标准做法。
监听 resize 事件的基本写法
浏览器窗口尺寸变化时会触发 window 上的 resize 事件。注意它会在拖拽窗口过程中高频触发（每几十毫秒一次），不能在回调里直接调用图表重绘。
- 使用
addEventListener绑定更推荐，避免覆盖已有监听器 - 不要用
window.onresize = handler，容易被覆盖且不易管理 - 首次加载时通常也要手动调用一次重绘，确保初始尺寸正确
为什么必须加防抖
不加防抖时，用户拖拽调整窗口大小可能在 1 秒内触发数十次 resize，而每次触发都去调用 ECharts 或 Chart.js 的 resize() 方法，会造成：
- CPU 占用飙升，页面卡顿甚至假死
- 图表反复销毁/重建，DOM 重排压力大
- 动画闪烁、坐标错位等视觉异常
防抖的核心逻辑是：只在用户“停止调整”后延迟执行一次，比如停顿 200ms 后再重绘。
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
手写一个轻量防抖函数并绑定
不需要引入 Lodash，几行代码就能实现可靠防抖：
let resizeTimer;
function debounceResize() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
chart.resize(); // 假设 chart 是你的图表实例
}, 200);
}
window.addEventListener('resize', debounceResize);
// 初始渲染后立即调用一次，保证尺寸准确
chart.resize();
-
clearTimeout确保前一次未执行的定时器被清除 - 延迟时间 150–300ms 较合理：短了仍可能抖动，长了响应迟钝
- 记得在组件卸载或图表销毁时移除监听器，避免内存泄漏：
window.removeEventListener('resize', debounceResize)
现代方案：用 ResizeObserver 替代 resize 事件（可选升级）
resize 事件只能监听整个窗口，若图表容器是某个 div（比如侧边栏收缩导致图表父容器变宽），resize 就无法感知。这时可用 ResizeObserver：
- 监听任意 DOM 元素尺寸变化，精度更高
- 不依赖窗口事件，避免全局污染
- 兼容性已较好（Chrome 64+、Firefox 69+、Safari 13.1+，IE 不支持）
示例：
const ro = new ResizeObserver(() => chart.resize());
ro.observe(document.getElementById('chart-container'));
// 销毁时调用 ro.unobserve(...) 或 ro.disconnect()
防抖不是银弹，但它是 resize 场景下最简单有效的性能守门员。写对一次，图表就稳一次。
