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

一、问题描述

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

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

代码是这样的:

// 两个按钮

   
       true
       false
   


// 柱状图和圆环图
  

     

   
  

     

  

 二、出现原因

一开始以为是 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。也能避免上面的问题，但只能说治标不治本。

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