ResizeObserver能从根源避开尺寸抖动，因其回调在浏览器layout后、paint前异步触发，自动合并同一帧变化，精准捕获容器真实contentRect；而window.resize无法感知局部静默变化，易传入错误尺寸导致图表拉伸或错位。
直接用 ResizeObserver 监听容器本身，而不是依赖窗口 resize 或轮询，就能从根源上避开“尺寸抖动”——它不抢渲染时机、不触发重排、只在浏览器确认尺寸真实变化后才异步通知。
为什么“抖动”会发生？关键在时机错位
所谓“响应式尺寸抖动”，常出现在异步渲染场景中：比如 Vue/React 组件挂载后，图表库（如 ECharts）需等 DOM 就绪再初始化；而此时容器可能尚未完成 CSS 计算（如 flex 布局收缩、侧边栏折叠动画中），或父级 height: auto 导致初始 clientHeight 为 0。若此时强行调用 chart.resize()，传入的是错误尺寸，后续容器真正撑开时又没再次通知，图表就会拉伸、留白甚至错位。
传统方案（如 window.resize + 防抖）无法感知这类“局部、静默”的尺寸落地过程，而定时器轮询又会在布局未稳时反复读取不稳定值，加剧抖动。
ResizeObserver 如何稳住尺寸落地
它被设计为与浏览器渲染管线深度协同：回调总在 layout 阶段之后、paint 阶段之前触发，且自动合并同一帧内的多次变化。这意味着——
- 容器 CSS 宽高一旦稳定（哪怕由 flex、grid 或 transition 触发），ResizeObserver 就能捕获到最终 contentRect
- 即使组件是异步挂载（如 Suspense 加载中、v-if 切换后），只要容器元素已插入 DOM，observe() 就立即生效，无需等待“完全渲染完成”
- 它天然忽略中间态（如 transform 缩放、opacity 动画），只响应真实的盒模型尺寸变更
实战要点：三步锁死稳定尺寸
1. 监听目标必须是图表的直接容器，且该容器要有明确的渲染尺寸
避免监听 document.body 或模糊的 wrapper。CSS 中确保容器有可计算的宽高（例如 height: 400px、flex: 1、min-height: 200px），禁用 width/height: auto 且无父级约束失效的情况。
2. 初始化逻辑要“延迟到容器就绪”
不要在组件 mounted 或 useEffect 第一时间 init 图表，而是：
- 先创建 ResizeObserver
- 再 observer.observe(container)
- 首次回调中执行图表初始化（或 resize）——此时 contentRect.width/height 已是真实可用值
3. 处理边界情况，防空值误判
某些场景下（如 display: none 切换、visibility: hidden），contentRect 可能为 { width: 0, height: 0 }。可在回调里加判断：
对比 window.resize 的典型失效场景
当后台系统折叠菜单栏，左侧导航收起、主内容区宽度突然增加——window.resize 根本不会触发，因为视口没变；但容器 div 的 width 明显变了。ResizeObserver 会立刻捕获这个变化，并在下一帧给出准确数值，图表随之平滑重绘，毫无撕裂感。
