解决 Vue 3 中 ECharts 图表切换页面不渲染的问题

本文将为你介绍在 Vue 3 项目中使用 ECharts 图表库时常见的问题：切换页面后图表不再渲染。我们将探讨问题的原因，并提供两种优化方案，一种是使用 keep-alive 缓存组件状态，另一种是手动销毁和重新初始化图表实例。通过本文，你将学会如何确保你的 ECharts 图表在 Vue 3 中始终保持稳定的渲染，提升用户体验。

问题概述

当使用 ECharts 图表库在 Vue 3 中进行开发时，有时会遇到一个常见的问题：第一次进入页面时图表正常显示，但当切换到其他页面后再返回时，图表不再渲染，只有刷新浏览器才能恢复正常。这个问题可能令人困扰，但我们可以通过一些简单的优化来解决它。

问题原因

这个问题的根本原因是 Vue 的组件卸载和重新渲染导致 ECharts 实例丢失。当你离开包含 ECharts 图表的页面时，Vue 会销毁该页面的组件实例，这也包括了 ECharts 图表实例。当你返回到该页面时，Vue 会重新创建组件实例，但此时图表实例已经不存在了。

优化方案

要解决这个问题，我们需要确保 ECharts 图表实例在组件重新渲染时不会丢失。我们可以通过以下方法来实现：

1. 使用 keep-alive

Vue 提供了一个名为 keep-alive 的内置组件，它可以缓存组件的状态，以便在组件切换时保留状态。我们可以使用 keep-alive 来缓存包含 ECharts 图表的组件，从而避免重新渲染时丢失图表实例。

以下是如何使用 keep-alive 的示例：

<template>
  <div>
    <!-- 使用 keep-alive 缓存包含图表的组件 -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

在这个示例中，我们将 router-view 包裹在 keep-alive 组件内，这样在切换页面时，包含图表的组件将被缓存，而不会被销毁。这意味着图表实例将保持不变，即使你返回到包含图表的页面，图表也会继续正常渲染。

2. 销毁和重新初始化图表

如果你不想使用 keep-alive 或者在某些情况下不能使用它，你可以手动销毁和重新初始化图表实例。在 Vue 3 中，你可以使用 onBeforeRouteUpdate 钩子来监听路由切换，并在路由切换前销毁图表实例，然后在路由切换后重新初始化。

以下是如何使用 onBeforeRouteUpdate 钩子的示例：

<template>
  <div ref="chart" style="width: 100%; height: 400px;"></div>
</template>

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

const chartRef = ref<HTMLDivElement | null>();
let myChart: echarts.ECharts | null = null; // 图表实例

onMounted(() => {
  // 初始化图表
  if (chartRef.value) {
    myChart = echarts.init(chartRef.value);
    // 进行图表配置和数据加载
    myChart.setOption({
      // ...
    });
  }
});

onBeforeRouteUpdate(() => {
  // 路由切换前重新销毁和初始化图表
  if (myChart) {
    myChart.dispose(); // 销毁图表实例
    myChart = null;
  }
});
</script>