在项目中曾遇到过这样的问题：多个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) } }