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 布局、侧边栏折叠等真实业务场景更准确

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！