vue 3 中需将 window.innerwidth 包装为 ref 响应式数据，通过 resize 事件或 useresizeobserver 更新，并用 watch 监听宽高变化调用 echarts.resize()，注意实例初始化时机和容器样式。
Vue 3 中不能直接用 watch 监听 window.innerWidth 这类全局属性，因为 watch 只响应响应式数据的变化。必须先把窗口尺寸包装成响应式引用（ref），再配合 resize 事件或 ResizeObserver 更新它，之后才能用 watch 捕获变化并调用 ECharts 的 resize()。
把窗口尺寸转为响应式数据
在 setup 中定义 ref 存储宽高，并在挂载时初始化：
- 使用
const width = ref(window.innerWidth)和const height = ref(window.innerHeight) - 在
onMounted中添加window.addEventListener('resize', updateSize) - 定义
updateSize函数：更新width.value和height.value - 在
onUnmounted中移除监听，避免内存泄漏
用 watch 响应尺寸变化并调用 echarts.resize()
监听 width 或 height 的变化，触发图表实例的 resize() 方法：
-
watch([width, height], () => { chartRef.value?.resize(); })—— 推荐同时监听宽高，避免漏触发 - 确保
chartRef是通过ref正确绑定到 ECharts 容器 DOM 元素上的 - 调用
resize()前建议加空值判断，如chartRef.value && chartRef.value.resize()
更推荐：用 useResizeObserver（来自 VueUse）
比手动绑 resize 事件更精准、性能更好，尤其适合图表容器尺寸受 flex/grid 影响的场景：
- 安装：
npm install @vueuse/core - 引入：
import { useResizeObserver } from '@vueuse/core' - 传入图表容器的
ref（如chartContainerRef），回调中直接调用myChart.resize() - 无需手动管理事件，自动清理，且能响应父容器尺寸变化，不只是窗口缩放
注意 echarts 实例的可用时机
ECharts 实例必须在 DOM 渲染完成、容器元素存在后才能初始化，且 resize() 才有效：
- 不要在
onMounted立即调用echarts.init，建议用nextTick确保 DOM 就绪 - 图表容器需有明确宽高（如 CSS 设置
width: 100%; height: 400px），否则resize()可能无效 - 若使用
v-if控制图表显示，记得在显示后再初始化，否则ref为空
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
