echarts图表不显示或刷新后才显示的解决办法之一
echarts图形界面无法显示或者刷新页面后才显示的可能原因及解决办法
·
一. 场景
1.1 在vue3.0项目中使用的echarts插件
1.2 某个页面中A指标和B指标可点击切换,且A指标和B指标所在的页面中都需要echarts展示图形界面
二. 问题
2.1 本地环境中: A指标和B指标在相互切换时,一直可以显示图形界面。
2.2 打包到测试环境:B指标的图形界面可以显示,切换到A指标时,图形界面始终不显示,刷新可以显示。
2.3 打包到线上环境:B指标的图形界面可以显示,切换到A指标时,图形界面始终不显示,刷新可以显示。
三. 我的项目中解决办法
刚开始我以为是echarts在本地和线上的版本不一样,查了以后是一样的。
在A指标和B指标切换后,我在组件销毁的时候也销毁了echarts容器,如下代码:
<script>
import { ref, onUnmounted } from 'vue';
export default {
setup() {
let isShowEcharts = ref(true);
onUnmounted(() => {
isShowEcharts.value = false;
});
return {
isShowEcharts,
};
},
};
</script>
<template>
<div id="retain_chart_line" v-if="isShowEcharts"></div>
</template>
组件加载时isShowEcharts为true,离开组件时改为false
以上代码为vue3.0中写法,且echarts部分未写出来(echarts的初始化、给值等)
最终解决了上述问题。
四. 造成该问题的其他原因
若你也遇到了这个问题,用了上面的办法还没有解决的话,看下是否可能为以下的原因:
4.1 若是两个及以上的地方使用echarts图形界面,检查下每个容器的ID值是不是都是唯一的,如果有重名的话,后面的会覆盖前面的,导致前面的不显示。
4.2 检查下本地echarts的版本和测试环境(或线上)的是不是不一样,本地的话是加载依赖包,通过package.json查看版本;线上的话是根据引入的版本来加载,看下根index.html是不是通过cdn引入了echarts以及引入的版本对不对。
(完)
更多推荐
所有评论(0)