本文链接：https://blog.csdn.net/shalDream/article/details/107085832

在项目中曾遇到过这样的问题：多个tab切换echarts图表引发的问题，显示不全或在另一个tab内显示，网上很多说用v-if，试验了多次均无效果，后来使用echarts实例销毁方法dispose和延时就可以了。

以下项目是vue代码

//引入echarts基本模板
var echarts = require('echarts/lib/echarts')

//项目是vue代码
mainTab(id) {
  this.clearEcharts(id)//关键步骤：在这之前销毁其他tab的echarts实例
  if (id === "1") {//第1个tab栏
    setTimeout(() => {
      this.echartsPie()//饼图
    },500)
  }else if (id === "2") {//第2个tab栏
    setTimeout(() => {
      this.initEcharts()//雷达图
    },500)
  }else if (id === "3") {//第3个tab栏
    setTimeout(() => {
      this.configPie()//配置饼图
    },500)
  }
},
//销毁其他tab栏的echarts实例，避免重复显示
  clearEcharts(id = '0') {
    /*第1个tab栏：echarts-pie(饼图)  第2个tab栏：echarts（雷达图）  
      第3个tab栏：config-one 
      主要使用dispose，在切换tab栏之前，销毁其他tab栏的echarts的实例，这样就不有错误显示或重复显示了*/
    var domPie = document.getElementById("echarts-pie")
	var domEcharts = document.getElementById("echarts")
	var domConfigOne = document.getElementById("config-one")
  if (id === '0') {//点击切换至第1个tab栏，销毁其他两个tab的echarts实例
    domConfigOne&&echarts.dispose(domConfigOne)
    domEcharts&&echarts.dispose(domEcharts)
  } else if (id === '1') {
    domPie&&echarts.dispose(domPie)
    domConfigOne&&echarts.dispose(domConfigOne)
  } else if (id === '2') {
    domPie&&echarts.dispose(domPie)
    domEcharts&&echarts.dispose(domEcharts)
  }
}