Vue 3组合式函数实现图表自适应缩放，核心是用useResizeObserver监听容器而非window.resize，按基准尺寸计算scale并调用chartInstance.resize()，配合transform: scale与devicePixelRatio确保清晰度和交互精度。
Vue 3 组合式函数实现图表自适应缩放，核心在于解耦“尺寸监听”与“图表控制”，避免在每个组件里重复写 window.resize 或 ResizeObserver 逻辑。关键不是强行缩放图表本身，而是让图表容器按比例缩放，同时保持清晰度和交互精度。
用 useResizeObserver 监听容器而非窗口
直接监听 window.resize 在大屏项目中容易失准（比如侧边栏折叠、弹窗展开时，窗口尺寸没变但图表区域变了）。推荐用 ResizeObserver 监听图表 DOM 容器的实际尺寸：
- 传入
ref指向的容器元素（如chartRef），不依赖全局 window - 触发后计算当前宽高与基准尺寸（如 1920×1080）的缩放比：
scale = Math.min(width / baseWidth, height / baseHeight) - 将
scale作为响应式值暴露，供父组件或样式层使用（例如给容器加transform: scale(s)）
图表实例自动适配缩放后的渲染
仅 CSS 缩放会导致 ECharts 内部坐标系错乱（tooltip 位置偏移、点击区域不准）。必须配合 ECharts 自身的 resize() 方法：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 在
ResizeObserver回调中，先更新容器样式（如 scale），再调用chartInstance.resize() - 为防抖动，可加
setTimeout(..., 0)或使用nextTick确保 DOM 渲染完成后再 resize - 若需高清显示（如 2x 屏幕），可在
initOptions中传入devicePixelRatio: window.devicePixelRatio
封装成可复用的 useEChartsAdaptive
把上述逻辑收敛为一个组合式函数，接收容器 ref 和图表实例 ref，返回缩放状态与刷新方法：
立即学习“前端免费学习笔记（深入）”；
- 输入：chartRef（DOM 元素 ref）、chartInstance（echarts 实例 ref）、baseSize = { w: 1920, h: 1080 }
- 内部自动创建 ResizeObserver 并绑定到 chartRef.value
- 暴露
scale（number）、screenSize（{ width, height }）、forceResize（手动触发重适配） - 支持禁用/启用监听，便于在 tab 切换或懒加载场景下控制生命周期
配合组件使用时注意边界情况
实际集成中几个易忽略但影响体验的点：
- 图表容器必须有明确宽高（不能是
height: auto），否则 ResizeObserver 无法触发 - 若使用
transform: scale()，需设置transform-origin: 0 0防止位移偏移 - ECharts 的 tooltip、dataZoom 等组件默认挂载到
body，缩放后位置会偏差，建议用appendTo: chartDom或通过position函数动态修正 - 首次渲染前确保 DOM 已挂载，
onMounted中初始化 observer，onBeforeUnmount中 disconnect
