Vue3中使用ECharts时，如何实现图表在窗口缩放时自适应布局？

Question

在Vue3项目中使用ECharts时，如何让图表随着浏览器窗口的缩放而自适应布局？常见的问题是：当窗口大小改变时，图表未能及时调整尺寸，导致显示异常或比例失调。这是因为ECharts图表初始化后，默认不会自动监听窗口变化并重新调整大小。 解决方法是结合`window.onresize`事件，在窗口尺寸变化时调用`chart.resize()`手动更新图表大小。此外，可以在Vue3的生命周期钩子`onMounted`中初始化图表，并通过`onUnmounted`移除事件监听，避免内存泄漏。 同时，确保父容器使用百分比宽度高度（如`width: 100%; height: 100%;`），以便图表能正确继承容器尺寸。如果使用的是Vue3组合式API，可以借助`ref`绑定DOM节点，并通过`watch`监听窗口尺寸变化实现更灵活的自适应效果。