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以及引入的版本对不对。

（完）