vue中tab切换时Echarts在第二个页面无法正常显示

接手的数据可视化的项目，在某个模块中使用了tab切换来展示不同的数据呈现，结果就出现了问题，第一个页面展示的好好地，但是在第二个页面有的只显示一点点宽度，有的甚至直接就没有了。

经排查是E charts图表在第二个页面渲染的时候无法拿到父元素的高度和宽度造成的，造成这种情况的我所遇到的两种情况，分享给大家。

无法获取高度和宽度原因：

我们为了做好自适应，都是用了百分比单位。所以在加载时无法真实的获取到父元素的高度和宽度，也就自然无法正常展示。
解决方法1: 如果说对自适应要求不高，可给父元素设置固定的width 和height。
此法弊端： 弊端很明显就是页面的体验效果较差。

在做这个tab切换时我使用的是v-show，熟悉vue的小伙伴都知道v-show是只加载一次，只不过是控制css从而控制显示和隐藏，所以说在初次加载的时候就没有准确的获取父元素的width和height，所以造成Echarts无法正常显示。
解决方法2： 把 v-show 改成 v-if，v-if的实现是把相应的元素删掉在重新渲染，所以在进入第二个页面的时候就会重新渲染数据表，从而获取到准确的width 和height。
此法弊端： 熟悉这两个方法的小伙伴必然知道v-if与v-show的区别也就不在多赘述了。如果数据加载过多的话，可能会造成卡顿性能不是很好。

其他方法：

在找解决方法的过程中也看到有前辈提出的一些解决方法：

1. 延迟加载，在页面加载完以后再去加载echarts。
2. 在初始化图表时获取父元素的宽高，在赋值给图表。代码的具体实现可点击这里进行查看。

解决的方法有很多，但是要找的符合自己代码需求的还是需要多多尝试，以上是我遇见的问题，如有错误欢迎指正批评。

自己也在尝试的分享一些d3.js的初学者使用方法，欢迎查看折线图的实现，柱状图的实现