最推荐使用 resizeobserver 实现图表响应式重绘，它能精准监听容器尺寸变化、无需防抖、性能更优；window.resize 仅适用于简单场景且需手动防抖。
用 resize 监听浏览器窗口变化并重绘图表，最直接的方式是监听 window 的 resize 事件，但要注意它只响应视口尺寸变化，且高频触发容易卡顿。真正可靠、现代的做法是优先使用 ResizeObserver——它专为监听任意 DOM 元素尺寸变化而生，能精准捕获图表容器自身的宽高变动（比如侧边栏折叠、Flex 布局收缩），无需防抖，性能更优。
用 window.resize 实现基础响应（适合简单场景）
适用于图表容器始终占满窗口、或仅需应对浏览器缩放/横竖屏切换的轻量项目：
- 绑定事件时务必加防抖，避免拖拽窗口时频繁重绘导致卡顿（推荐延迟 150–250ms）
- 回调中获取
window.innerWidth和window.innerHeight，再调用图表实例的resize()方法 - 注意：该方式无法感知容器内部变化（如父元素
display: none切换、CSS 动画拉伸等）
用 ResizeObserver 实现精准响应（推荐主流方案）
这是当前最佳实践，尤其适配后台系统、可折叠侧边栏、动态插入图表等复杂布局：
- 创建实例时传入回调函数，参数
entries包含每个被观察元素的最新尺寸信息 - 优先读取
entry.contentRect.width/height（内容区尺寸），适用于图表重绘计算 - 调用
observer.observe(targetElement)开始监听指定容器（如#chart-container） - 浏览器自动合并多次变化、异步执行回调，不打断渲染，也无需手动清理防抖定时器
与 ECharts 等图表库集成的关键细节
避免常见坑点，确保重绘稳定生效：
- 图表初始化后，再调用
resizeObserver.observe()，防止容器尚未挂载导致监听失败 - 不要在 resize 回调里重复初始化图表（如再次调用
echarts.init()），只执行chart.resize() - 若容器初始
width/height为0或auto，需确保 CSS 已设明确尺寸（如height: 400px或flex: 1） - 移动端横竖屏切换时，ResizeObserver 同样有效；无需额外监听
orientationchange
兼容性兜底与调试建议
面向老版本浏览器或特殊环境时的补充策略：
- Chrome 64+、Firefox 69+、Safari 13.1+ 原生支持 ResizeObserver；IE 完全不支持，需降级为
window.resize + 防抖 - 调试时可在回调中打印
entry.contentRect，确认尺寸是否随预期更新 - 若发现尺寸未更新，检查容器是否被隐藏（
display: none）、或父级设置了overflow: hidden干扰测量 - 第三方库如
element-resize-detector可作为 Polyfill 替代方案，但体积较大，非必要不引入
