解决Vue 中 v-show 导致组件 ECharts 样式异常问题

问题概述

在使用 Vue 的 v-show 指令实现 <PageOne/>、<PageTwo/>、<PageThree/> 三个视图的定时切换时，<PageTwo/> 显示时出现了异常，具体表现为 ECharts 图表渲染图表尺寸异常问题，严重影响了页面的正常展示和用户体验。

错误原因

v-show 的隐藏机制通过设置 display: none 隐藏元素，虽然元素仍然保留在 DOM 中，但它不参与页面的布局计算，因此宽高被计算为 0。当 ECharts 初始化时，它依赖容器的实际尺寸来渲染图表。如果此时容器处于隐藏状态，ECharts 会以 0 尺寸进行渲染，之后切换为可见时，图表无法自动修正其尺寸，导致图表渲染异常。

解决方法：

🌟延迟初始化并重绘图表

父组件传递显示状态

在父组件中使用 currentPage 判断，并通过 isVisible 属性告知 <PageTwo/> 当前是否可见：
```

<PageTwov-show="currentPage === 2":is-visible="currentPage === 2"
/>```
```

在 PageTwo 中监听并重绘

PageTwo 接收 isVisible，通过 watch 监听其变化，在可见时延迟执行图表初始化和尺寸更新：

<script setup>
import { ref, watch, nextTick } from 'vue';
import { initChart, handleWindowResize } from '@/utils/chartHelper';const props = defineProps({ isVisible: Boolean });
const gridItems = ref([]);watch(() => props.isVisible,(visible) => {if (visible) {// 等待 DOM 完全渲染nextTick(() => {// 重新初始化每个图表gridItems.value.forEach(item => initChart(item.id));// 触发全局 resize，通知 ECharts 更新尺寸handleWindowResize();});}},{ immediate: true }
);
</script>

说明：确保 initChart 方法内部调用了 echarts.init(dom) 并配置了必要的选项，handleWindowResize 则使用 window.dispatchEvent(new Event('resize'))。

完整代码

父组件

<template><div><button @click="currentPage = 1">Page One</button><button @click="currentPage = 2">Page Two</button><button @click="currentPage = 3">Page Three</button><!-- 使用 v-show 切换页面 --><PageTwo v-show="currentPage === 2" :is-visible="currentPage === 2" /></div>
</template><script setup>
import { ref } from 'vue';
import PageTwo from './PageTwo.vue'; // 假设 PageTwo.vue 为子组件const currentPage = ref(1);
</script>

PageTwo 组件

<template><div class="page-two"><div class="chart-container" v-for="item in gridItems" :key="item.id" :id="item.id"><!-- 图表容器 --></div></div>
</template><script setup>
import { ref, watch, nextTick } from 'vue';
import { initChart, handleWindowResize } from '@/utils/chartHelper'; // 假设这些方法已定义const props = defineProps({isVisible: {type: Boolean,default: false}
});const gridItems = ref([{ id: 'chart1' },{ id: 'chart2' }
]);// 监听 isVisible，确保在页面显示时重新初始化图表
watch(() => props.isVisible, (isVisible) => {if (isVisible) {nextTick(() => {// 重新初始化每个图表gridItems.value.forEach(item => initChart(item.id));// 触发窗口resize，通知 ECharts 更新尺寸handleWindowResize();});}
}, { immediate: true });
</script><style scoped>
/* 你的样式 */
.chart-container {width: 100%;height: 400px;
}
</style>

总结

使用 v-show 切换 <PageTwo/> 时，is-visible 属性用于控制页面是否可见。
在 <PageTwo/> 中监听is-visible，当页面显示时，使用 nextTick 延迟执行，确保 DOM 更新后初始化图表并调整尺寸。
使用 initChart 初始化 ECharts 图表，handleWindowResize 用于触发窗口尺寸变化，确保图表正确渲染。

这段代码确保在使用 v-show 显示<PageTwo/> 时，ECharts 图表能够根据正确的尺寸重新初始化，解决因 v-show 隐藏导致的初始化问题。