ResizeObserver.observe()必须传入真实DOM元素，不能是null或ref对象；需在onMounted或useEffect中确保元素挂载后调用，并加判空防护。
ResizeObserver.observe() 必须传入真实 DOM 元素，不能是 ref 对象或 null
常见错误是直接把 Vue 的 ref 或 React 的 useRef 当前值传给 observe()，而没等元素挂载完成。比如 Vue 3 中在 setup() 里立即调用 resizeObserver.observe(chartRef.value)，此时 chartRef.value 还是 null，会报错 Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'。
正确做法是：在 onMounted（Vue）或 useEffect（React）中确保元素已渲染，再调用 observe()。同时建议加一层判空：
if (targetElement && targetElement.nodeType === 1) { observer.observe(targetElement); }- 避免在 SSR 渲染阶段执行（服务端没有
document），Vue 可用onBeforeMount后再进；React 可用if (typeof window !== 'undefined')包裹
contentRect.width 是内容区宽度，不是 offsetWidth
很多开发者误以为 entry.contentRect.width 等价于 element.offsetWidth，实际它只包含 content-box 尺寸，不包含 padding、border、margin。如果你的容器设置了 box-sizing: border-box 且有 padding: 20px，contentRect.width 会比 offsetWidth 小 40px（左右 padding 各 20px）。
这意味着：用 contentRect 做自适应计算时，若布局依赖 padding 内边距（比如卡片内文字流式换行），直接拿 width 做断点可能偏小。这时更稳妥的是：
- 统一用
getBoundingClientRect().width替代（它和offsetWidth更接近，含 border 和 padding） - 或者保持所有容器使用
box-sizing: content-box，让contentRect与视觉尺寸对齐 - 不要混用：比如一边用
contentRect.width控制列数，另一边用offsetWidth计算 margin，会导致逻辑错位
监听多个容器时，别在单个回调里重复创建 ECharts 实例
典型反模式：一个 ResizeObserver 实例观察 5 个图表容器，在回调里遍历 entries，对每个 entry.target 都调用 echarts.init() —— 这会导致每次任意一个容器变化，全部图表都重绘，性能雪崩。
真正高效的做法是「一对一绑定」：
- 每个图表容器配一个独立的
ResizeObserver实例（轻量，浏览器原生支持大量实例） - 或复用一个实例，但用
WeakMap缓存每个容器对应的 chart 实例：chartMap.set(entry.target, myChart)，回调中只操作当前entry.target对应的实例 - 销毁时必须调用
observer.unobserve(target)或observer.disconnect()，否则组件卸载后仍持有 DOM 引用，造成内存泄漏
“组件自适应”真正的难点不在监听，而在断点判定逻辑
很多人以为只要监听到宽度变化，就能像媒体查询一样自动切换布局。但实际中，contentRect.width 是连续值，比如从 768.3 → 768.1 → 767.9，你不可能为每个像素写 if 分支。必须自己定义离散断点，并做防抖/取整处理：
- 用
Math.round(contentRect.width / 100) * 100把宽度归到百位级区间（如 700、800、900） - 配合
debounce（推荐 100ms 以上），避免拖拽过程中高频触发重排 - 断点阈值别硬编码，建议从 props 或 CSS 自定义属性读取：
getComputedStyle(el).getPropertyValue('--breakpoint-sm')
这一步漏掉，监听再准也没用——你会得到一堆抖动的 layout 切换，用户拖动侧边栏时卡片忽大忽小。
