vue3 + vite打包后，切换页面echart图不加载显示

原创于 2021-08-25 10:00:40 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue.js

vue3.0 专栏收录该内容

36 篇文章

订阅专栏

本文探讨了在Vue3项目中，使用Vite打包后ECharts图表在页面切换时未更新的问题。通过分析，作者建议在组件卸载时销毁ECharts实例，并提供了相应的代码示例。解决方法包括检查生命周期钩子和可能的Keep-Alive缓存影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3 + vite打包后，切换到另一个页面，再切换回来，echarts不触发更新，是因为离开页面时实例并没有被销毁的，再次进入这个页面的时候，不会触发生命周期函数来更新数据。
可以在echarts那个页面的钩子函数中打个断点，看看能不能走到生命周期里面去。如果没有走进去，那么就证明当你离开这个页面时，没销毁echart实例，或者是你app.vue里面有keep-alive，有缓存导致的.

可以在离开页面时销毁echart

 import { onMounted, onBeforeUnmount} from "vue";
 import * as echarts from "echarts";
 export default {
  	setup() {
		   let myChart1 = null;
		    myChart1 = echarts.init(document.getElementById(id));
		   ...

 			onBeforeUnmount(()=> {
                myChart1.dispose(); //销毁
            })

	}
}