在vue中使用echarts时使用v-if动态隐藏显示空白的问题

第一个问题：

代码如下

<el-button  @click="tubiao">切换图表</el-button>
    <div id="chart1" v-if="+abc === 1"></div>
    <div id="chart2" v-if="+abc === 2"></div>
    <div id="chart3" v-if="+abc === 3"></div>
    

abc: '1',

 tubiao() {
      if (!this.abc) {
        this.abc = 1
      } else if (+this.abc === 1) {
        this.abc = 2
      } else if (+this.abc === 2) {
        this.abc = 3
      } else {
        this.abc = 1
      }
    }

此时点击按钮，div会进行切换，但是echarts不会去进行渲染这个盒子内的图表，所以页面是空白的。
解决办法：使用v-show就可以了

第二个问题：

代码如下：

<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>

  mounted() {
    this.pie('chart3')
    this.bar('chart2')
    this.line('chart1')
  },

在mounted里这样写的话会出现#chart1被渲染的是柱状图。
解决办法：按顺序先渲染#chart1

  mounted() {
    this.line('chart1')
    this.bar('chart2')
    this.pie('chart3')
  },