Vue(6)：echarts图形隐藏之后不能加载的问题

Vue(6)：echarts图形隐藏之后不能加载的问题

因为是用vue+echarts开发的，所以把这篇博客也归纳到vue系列中，但所讲的知识和vue没有关系。

我们在开发过程中难免会遇到在同一个位置通过按钮显示两个不同的图形，最简单的做法就是把另外一个图形隐藏，默认显示当前的图形。可以通过css代码来完成。

style="display:none;"
style="display:null;"
/* none为隐藏当前图形，null则显示当前图形，好像用block和null的效果一样 */

然后我们再配合按钮，获取到当前的div，给display重新赋值，就实现了在同一个位置通过按钮显示不同的图形。

但是在echarts中，如果隐藏一个图形，当点击按钮显示这个被隐藏的图形时，就会发现毫无内容，如果你的这个图形上面刚好设置了一个不是 echarts的元素，你可以发现这个不是echarts的元素会显示出来，而echarts图形却没办法显示，其实我们去查找元素的时候会发现div下面有canvas，也就是说明有数据显示，但是没有展示出来，其中的原因是当echarts被隐藏后再次别显示的话，不会自动加载宽高，所以我们看不见，需要提前设置在div标签中设置，我这边不能用css设置，测试了一下失败了。

我按照这样做，尝试了几遍发现还是没有效果，后来发现我失败的原因在于我给当前echarts的上一层父级设置宽高，而不是echarts id所在的div设置，这样还是不会出现，所以只有把echarts图形所在的那个div设置即可，不能设置父级。

<div id="MapChartID" class="MapChart" style="height: 480px;width: 615px;"></div>

这样我们就可以成功，

以上是我的理解，如有不明白的地方或者我讲的有问题，都可以在下方留言，一起探讨交流。