使用v-if操作两个echarts图显示的时候的渲染问题（图表实例没有）

一、问题描述

最近使用v-if的时候操作echarts的时候出现了一个奇怪的问题，问题的效果图如下：

本来想弄的效果是，点击true按钮的时候显示圆环图，然后点击false按钮的时候显示一个柱状图，页面初始化的时候，圆环图没有任何问题，但是在点击false显示柱状图之后再点true按钮显示圆环图的时候，就会出现上面的问题。

代码是这样的:

// 两个按钮
<div style="flex: 1">
   <el-button-group>
       <el-button size="small" type="" @click="openUseAmount">true</el-button>
       <el-button size="small" type="" @click="openUseMoney">false</el-button>
   </el-button-group>
</div>

// 柱状图和圆环图
  <div v-if="visible">
     <div id="main_pie" style="width: 100%; height: 298px"></div>
   </div>
  <div v-else>
     <div id="main_bar" style="width: 100%; height: 298px"></div>
  </div>

 二、出现原因

一开始以为是v-if的问题，后面才发现是echarts的问题，也可以说是自己操作的问题。因为echarts的官方文档写了下面这样一句话。唉！学艺不精啊！！！！！一开始都没怎么注意这句话，直到出现问题之后，后面回头才发现这句话。看文档还是要仔细啊！！！！！

因为我操作两个echarts的时候，初始的方法是各有一个，会分别生成两个实例，然后因为echarts在一个标签里面操作，两个实例都是在同一个canvas上面，就会导致出现上面的情况。

三、解决方法

解决的办法也挺多的。

①使用echarts提供的方法dispose()对实例进行销毁，这个是比较推荐的。就像下面这样。

    openUseAmount() {
      this.visible = true;
      this.pieChart?.dispose();
      this.initPie();
    },
    openUseMoney() {
      this.visible = false;
      this.barChart?.dispose();
      this.initBar();
    },

 // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('main_pie'));
        this.pieChart = myChart;

pieChart和barChart都是echarts实例，每次重新调用初始化echarts的方法之前都对实例进行一下销毁。echarts网址：图表容器及大小 - 概念篇 - Handbook - Apache ECharts

②不使用v-if方法操作，使用v-show方法对echarts方法进行操作，v-if和v-show的操作原理是不一样的，v-show会直接将display置为none。也能避免上面的问题，但只能说治标不治本。

当然还有很多其他的方法可以避免上面的问题，也就不一一叙述了。如果有更好的方法，欢迎大家在评论区探讨。