vue 3 图表自适应核心是用resizeobserver监听容器content-box变化并调用chartinstance.resize()，封装为useechartsresize组合式函数，要求容器显式设置宽高，再结合adaptoption动态调整配置项。
Vue 3 中实现图表尺寸自适应的通用封装，核心在于解耦“尺寸监听”与“图表重绘”，避免每个图表组件重复写 resize 逻辑、手动绑 window 事件或处理侧边栏折叠等边界情况。关键不是靠 CSS 拉伸，而是让 ECharts 实例感知容器真实变化并主动响应。
用 ResizeObserver 替代 window.resize
传统监听 window.resize 有明显缺陷：无法捕获侧边栏收起、Flex 容器收缩、Tab 切换后容器重排等非窗口级变化；且频繁触发易造成性能抖动。现代方案应直接监听图表容器 DOM 节点本身：
- 在组件 setup 中通过 ref 获取 chart 容器元素
- 使用 ResizeObserver 实例观察该容器的 content-box 尺寸变化
- 回调中调用 chartInstance.resize()，不需防抖（浏览器已做队列合并）
- 组件卸载时记得 observer.unobserve() 和 disconnect()，防止内存泄漏
把尺寸适配逻辑抽成可复用的组合式函数
不建议把 ResizeObserver 写死在每个图表组件里。推荐封装为 useEChartsResize 组合式函数：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章