Vue3 TS中el-tab-pane切换导致rchart渲染异常

Question

在使用 Vue3 + TypeScript 开发过程中，结合 Element Plus 的 `el-tabs` 与 `el-tab-pane` 实现标签页切换时，若在某个 `tab-pane` 中嵌入 rChart（如 ECharts）图表，常出现切换标签后图表容器尺寸计算异常、图形渲染不完整或白屏的问题。主要原因是图表初始化时容器不可见，导致宽高获取为 0，且切换后未触发重绘。尤其在 `v-if` 或懒加载机制下，组件销毁与重建不及时，进一步加剧该问题。如何在 tab 切换后正确触发 rChart 的 resize 与重新渲染，是此类场景下的典型技术难题。

Answer 1

一、问题现象与典型表现

在使用 Vue3 + TypeScript 开发过程中，结合 Element Plus 的 el-tabs 与 el-tab-pane 实现标签页切换时，若在某个 tab-pane 中嵌入 rChart（如 ECharts）图表，常出现以下现象：

• 首次进入非默认 tab 时，图表容器宽高为 0，导致图形未渲染或白屏。
• 切换 tab 后，图表未自动重绘，显示不完整或错位。
• 使用 v-if 控制 tab 内容加载时，组件销毁与重建时机不可控，ECharts 实例无法正确初始化。
• 懒加载（lazy）模式下，el-tab-pane 内容延迟渲染，但图表未监听 DOM 可见状态变化。

二、根本原因分析

该问题的核心在于：

1. DOM 不可见导致尺寸获取失败：当 tab 非激活状态时，其内容通常被设置为 display: none 或通过 v-if 延迟渲染，此时调用 echarts.init(dom) 获取的 clientWidth/clientHeight 为 0。
2. 未触发 resize 事件：ECharts 图表初始化后，若容器尺寸发生变化，必须显式调用 chart.resize() 才能重新布局。但 tab 切换本身不会自动触发此行为。
3. 实例生命周期管理缺失：在 v-if 或懒加载场景下，组件可能被频繁销毁与重建，若未妥善管理 ECharts 实例（如未销毁旧实例），会导致内存泄漏或渲染异常。

三、解决方案演进路径

方案	适用场景	优点	缺点
监听 tab 切换事件并手动 resize	简单静态 tab 结构	实现简单，兼容性好	需手动维护 chart 实例引用
使用 ResizeObserver 监听容器变化	动态尺寸容器	自动响应尺寸变化	需处理初次不可见问题
封装可复用的 Chart 组件	多图表项目	解耦逻辑，便于维护	初期开发成本较高
结合 Vue 的 onActivated 钩子（keep-alive）	需要缓存 tab 状态	避免重复初始化	增加内存占用

四、代码实现示例

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="图表页" name="chart">
      <div 
        ref="chartContainer" 
        style="width: 100%; height: 400px;" 
        v-show="activeTab === 'chart'">
      </div>
    </el-tab-pane>
    <el-tab-pane label="其他页" name="other">内容</el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import * as echarts from 'echarts';

const activeTab = ref('other');
const chartContainer = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;

const initChart = () => {
  if (!chartContainer.value) return;
  chartInstance = echarts.init(chartContainer.value);
  const option = {
    title: { text: '示例图表' },
    tooltip: {},
    xAxis: { data: ['A', 'B', 'C'] },
    yAxis: {},
    series: [{ type: 'bar', data: [5, 20, 36] }]
  };
  chartInstance.setOption(option);
};

const handleResize = () => {
  chartInstance?.resize();
};

onMounted(() => {
  // 延迟初始化，确保 DOM 可见
  setTimeout(initChart, 100);
  window.addEventListener('resize', handleResize);
});

watch(activeTab, (newVal) => {
  if (newVal === 'chart') {
    // tab 激活时触发 resize
    setTimeout(handleResize, 100);
  }
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
  chartInstance?.dispose();
});
</script>
    

五、高级优化策略

针对复杂场景，可采用以下增强方案：

• 使用 ResizeObserver 替代 window resize 事件，更精准监听容器变化：

const resizeObserver = new ResizeObserver(() => {
  handleResize();
});

onMounted(() => {
  if (chartContainer.value) {
    resizeObserver.observe(chartContainer.value);
  }
});

onBeforeUnmount(() => {
  resizeObserver.disconnect();
});
    

• 结合 <keep-alive> 缓存 tab 内容，避免重复初始化：

<keep-alive>
  <component :is="currentComponent" />
</keep-alive>
    

六、流程图：图表渲染生命周期控制

graph TD
    A[Tab 切换] --> B{目标 Tab 是否可见?}
    B -- 是 --> C[触发 chart.resize()]
    B -- 否 --> D[等待下次激活]
    C --> E[图表正常渲染]
    F[组件挂载] --> G[延迟初始化 ECharts]
    G --> H[绑定 ResizeObserver]
    H --> I[监听窗口与容器变化]
    I --> C
    J[组件卸载] --> K[销毁 ECharts 实例]
    K --> L[移除事件监听]
    L --> M[内存释放]