解决 Vue3 中路由切换到其他页面再切换回来时 Echarts 图表不显示的问题

问题复现：

正常状态下：

切换到其他页面再切换回来：

问题解决：

其实这个问题的解决方式官网写得清清楚楚，我们看看官网怎么解决的：

接下来我用代码解释下这句话（正确的做法是，在图表容器被销毁之后，调用 echartsInstance.dispose 销毁实例，在图表容器重新被添加后再次调用 echarts.init 初始化）：

const myEchart = ref(null)

// 组件挂载完成时调用
onMounted(() => {
  testEcharts() // （在图表容器重新被添加后再次调用 echarts.init 初始化）
})

const testEcharts = () => {
  myEchart.value = echarts.init(document.querySelector('.echarts-dom'))
  ...你的代码...
}

// 组件被卸载后调用
onUnmounted(() => {
  myEchart.value.dispose() // （在图表容器被销毁之后，调用 echartsInstance.dispose 销毁实例）
})

总结：

在有 Echarts 图表的页面在卸载时我们都要对图表进行销毁