Vue解决echart在element的tab切换时显示不正确

最近在项目中遇到了这种情况，需要在tab控件上渲染多个echart图标，然后切换查看时，发现图表的宽度不正确

原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。所以要做的就是在页面加载时，就对图表进行初始化。

网上的解决方案大多都是监听tab的切换事件，然后再根据切换的页面重新渲染echart组件，比较麻烦。如下是个人的解决方法：

原理：利用v-if属性,当切换至对应的tab时，设置其v-if的值为true即可，同时设置默认显示的tab

举例如下：

  
    心率
    
  
  
    呼吸
    
  
  
    体动
    
  

这里默认tab为心率tab，当切换时，同一时刻只有一个v-if为true，当将其设置为true时，Vue会重新在页面渲染组件，即完成了组件渲染的步骤。

更新: 知乎某不知名大佬给了一个更加的简单的方法:

el-tab-pane添加上lazy='true’属性即可

补充说明，亲自验证之后，发现上述添加lazy属性的方法会莫名导致echarts组件尺寸不正常。

我已经写好了示例代码，包含设置v-if和lazy-true两种方式的实现形式，lazy-true这种方法会莫名其妙导致echarts尺寸不正确，建议使用设置v-if的形式， 这是github代码地址： https://github.com/lizheng3401/echarts-in-element-doesn-t-work

如果有大佬知道lazy-true设置后导致echarts尺寸不正确的解决方法或原因，还望告知。
欢迎访问我的博客了解更多