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

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

问题概述

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

错误原因

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

解决方法：

🌟延迟初始化并重绘图表

1. 父组件传递显示状态

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

   <!-- 父组件模板 -->
   <PageTwo
     v-show="currentPage === 2"
     :is-visible="currentPage === 2"
   />
      ```
   

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>

总结

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

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