vue3 echarts resize

### Vue3 中 ECharts 图表自适应窗口大小实现

在 Vue3 项目中，为了使 ECharts 图表能够响应式地调整其尺寸以匹配容器的变化，可以采用多种策略来确保图表始终适配当前视窗或父级容器的宽度和高度。

#### 方法一：监听 `window` 的 resize 事件并调用图表实例的 `resize()` 函数

通过绑定全局 `window` 对象上的 `resize` 事件到 ECharts 实例对象的方法上，可以在浏览器窗口发生变化时触发重绘操作。具体做法如下：

import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

export default {
    setup() {
        const chartContainer = ref(null);
        let myChart;

        onMounted(() => {
            // 初始化图表
            myChart = echarts.init(chartContainer.value);

            // 设置初始选项
            myChart.setOption({
                title: {
                    text: 'ECharts 示例'
                },
                tooltip: {},
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            });

            // 绑定 window.resize 到图表 resize 上
            window.addEventListener('resize', () => {
                setTimeout(() => {
                    if (myChart) {
                        myChart.resize();
                    }
                }, 100); // 延迟执行防止频繁触发
            });
        });

        return {
            chartContainer,
        };
    }
}

这种方法简单直接，在大多数情况下都能很好地工作[^1]。

#### 方法二：利用 Vue 生命周期钩子自动处理组件销毁前移除事件监听器

为了避免内存泄漏问题，当组件卸载时应该解除之前注册过的事件处理器。这可以通过组合使用 `onBeforeUnmount` 钩子函数来完成清理工作。

import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

export default {
    setup() {
        const chartContainer = ref(null);
        let myChart;
        
        function handleResize() {
            if (!myChart || !chartContainer.value.contains(myChart.getDom())) return;
            
            setTimeout(() => {
                try {
                    myChart.resize();
                } catch (_) {}
            }, 100);
        }

        onMounted(() => {
            myChart = echarts.init(chartContainer.value);
            myChart.setOption({...});
            window.addEventListener('resize', handleResize);
        });

        onBeforeUnmount(() => {
            window.removeEventListener('resize', handleResize);
            if (myChart && typeof myChart.dispose === 'function') {
                myChart.dispose();
            }
        });

        return {
            chartContainer,
        };
    }
};

此方式不仅解决了图表跟随页面布局动态调整的问题，还考虑到了性能优化以及资源释放等方面的需求[^2]。

#### 方法三：基于 CSS Flexbox 或 Grid 进行布局控制

除了 JavaScript 层面的操作外，还可以借助现代CSS技术如Flexbox或Grid来进行更灵活的设计方案。这种方式可以让图表所在的DOM元素根据外部环境自然伸缩，从而间接影响到内部嵌入的Echarts图形展示效果。不过需要注意的是，这种纯样式解决方案可能并不适用于所有场景下的精确度需求。

对于上述提到的技术细节，建议开发者依据实际应用场景选择最合适的方式实施开发，并不断测试验证最终呈现的效果是否满足预期目标[^3]。