一、项目需求：
在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 错误问题（二）