【Echarts】当容器div为display:none，图表初始化显示问题

场景：想对如下echarts折线图做切换近一年、近六个月、近三个月图表展示的功能时，遇到了如下问题


如上图，切换到近六个月时，出现了图表的宽度没有自适应的问题。而且我对比了一下展示正常的和不正常的区别

大家注意看我标记的地方，正常展示的图表宽度正常，但是显示不正常的图表宽度为100px，这就是显示不正常的问题所在。至于这个为什么会是100px，大家先往下看，后边会有解释。

遇到问题之后，先看看自己写的代码，有没有问题

除了近一年，其它两个图表展示的div我都加了display:none属性，会不会是这个属性导致的，然后我尝试去掉这个属性，测试下

折线图初始化正常了，结果证明，确实跟display:none这个属性有关系，但是到底这个属性是怎么影响最终的展示的呢，我查找了一些资料，发现了一些端倪。
原来在echarts源码中有这么一个方法：Painter.prototype._getWidth

我们可以看到，由于我们容器设置属性display:none，所以无法获取到clientWidth，而parseInt10(stl.width)将width:100%转为100，所以计算出图标的宽度为100px。
这就是图表显示有问题的原因。

找到原因了，那我们该怎么去解决这个问题呢？

基于以上的原因，我们可以给div设置一个固定的宽度，这个固定的宽度，我们就以近一年来展示的图表的宽度为参考
所以，直接贴上代码：

注意，设置宽高的代码得在调用初始化方法之前，不然不奏效。

在修改完成之后，我们再来看下最终的效果

我们可以看到，在切换之后的图表也已经显示正常了。

在解决完这个问题之后，我又多想了一下，为什么设置了display:none属性，只影响了图表显示的宽度，而没有影响高度呢？

对这个问题，我进一步的去了解，想着既然echarts源码中有获取宽度的方法，那应该也有获取高度的方法，我就顺藤摸瓜找到了这个方法Painter.prototype._getHeight
最后我debug观察数据：

发现容器去获取clientWidth 和 clientHeight 都是0，那就是都没有获取到，那为何高度不受影响呢？

经过调测，发现其实原因在这里：


大家有没有发现，str1获取的宽度是100%，而高度获取的是230px，这样就造成前边我们提到的 parseInt10(stl.width) 将width:100%转为100，最终计算就是100px，而 parseInt10(stl.height) 将高度转为230，最终计算就是230px

所以现在大家明白为什么高度没有受到影响了吧，是因为高度本来就有一个固定值。

现在高度不受影响的原因找到了，那我们是不是可以进一步想一下，我们之前肯定是设置了宽度为100%，那我们是否可以将100%的宽度也设置成一个固定的宽度，从而也就不会影响图表的宽度了呢？

我已经试过了，是可以的，但是这种方式总体感觉没有之前那种解决办法灵活，所以大家可以当做一种解决思路了解一下。