Vue 3 中需将窗口尺寸转为响应式变量并监听 resize 事件：用 ref 存储宽高，在 onMounted 添加监听、onUnmounted 移除；推荐 watchEffect 自动追踪，配合防抖和容器 offset 尺寸获取以适配真实布局。
Vue 3 中不能直接用 watch 监听 window.innerWidth 或 window.innerHeight，因为它们不是响应式数据。要实现窗口变化时自动调整图表尺寸，核心是：把窗口尺寸变成响应式变量，并在 resize 事件中更新它，再用 watch（或更推荐的 watchEffect）监听这个变量。
用 ref + resize 事件手动同步尺寸
这是最稳妥、兼容性好、逻辑清晰的做法：
- 在
setup中定义width = ref(window.innerWidth)和height = ref(window.innerHeight) - 在
onMounted中添加resize监听器，每次触发时更新这两个 ref - 在
onUnmounted中移除监听，防止内存泄漏 - 用
watch监听width或height，在回调里调用图表的resize()方法（如 ECharts 的chart.resize()）
推荐用 watchEffect 自动响应（更简洁）
watchEffect 更适合这类“读取即依赖”的场景，写法更少、不易漏掉初始化逻辑：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 不需要提前定义 ref 的初始值（但建议设，避免 undefined）
- 只要在 effect 函数里读取
width.value，它就会自动追踪并重运行 - 首次执行时也会触发，可顺带做一次图表初始化或首次 resize
- 注意：必须确保图表实例已创建完成，再开始监听，否则
chart.resize()会报错
防抖处理避免频繁重绘（提升性能）
浏览器缩放时 resize 可能高频触发，尤其拖拽窗口边缘时。图表重绘成本高，建议加简单防抖：
立即学习“前端免费学习笔记（深入）”；
- 用
setTimeout+clearTimeout包裹尺寸更新逻辑，延迟 100–200ms 执行 - 只保留最后一次 resize 的尺寸更新，丢弃中间抖动
- ECharts 等库自身有
resize({ silent: true })选项，也可配合使用减少视觉闪烁
绑定到具体图表容器（而非全屏）
如果图表尺寸需跟随某个容器（比如 div#chart-container），而不是整个窗口，那就别用 window.innerWidth：
- 用
ref获取容器 DOM 元素 - 在
resize回调里调用el.offsetWidth / offsetHeight获取实际渲染尺寸 - 这样适配 flex 布局、侧边栏折叠等真实业务场景更准确
