v-if 切换 el-tabs 加载 ECharts 错误问题（一）

一、项目需求：

        在vue项目中使用了 echarts 和 elementUI 的 el-tabs 组件；在同一个页面点击按钮，通过v-if切换加载两个不同的 tabs（tabsA和tabsB）；tabsA 中用于画图的 div 宽度为100%；tabsB 中用于画图的 div 宽度为50%

二、现象描述：

        当从tabsA切换到tabsB时，div的大小变化了，但是div里面的Echarts图，数据变化了，图表的大小却还是切换之前的大小。

三、分析：

        两个tabs组件切换，Echart图，数据图更新，但是包裹Echart图的div样式没有更新，审查元素发现css更新了，但是页面看起来没有更新，再次刷新后更新了；

        刷新前，dom元素貌似没有销毁，这就是通过v-if切换两个相同的组件时，会出现组件复用，局部卸载的问题；复用了tab-pane中用于画图的div（EChart错误）；

四、解决办法：

  在同一个dom 中创建多个实例时，需要销毁前一个，再创建后一个。

//1、销毁前一个实例   
this.$echarts.init(document.getElementById('echarts')).dispose();    
或 
this.$echarts.dispose(document.getElementById('echarts'));

//2、构建下一个实例
const myEcharts = this.$echarts.init(document.getElementById('echarts'));    

//3、然后对myEcharts进行setOption之类的操作就可以

相关问题，请查看：

下一篇 v-if 切换 el-tabs 加载 ECharts 错误问题（二）