Echarts图表宽度变成100px，让图表宽度随着父元素自动适应，Vue实时监听宽度的变化，这可能是史上最好的解决方案！...

最近工作中element后台管理使用Echarts图表，本后台项目分图表模式和列表模式，使用display控制显示隐藏，这样就引出了本文的问题。

问题1：Echarts图表宽度变成100px？

问题2：怎么让Echarts图表宽度随着父元素自动适应？

 　　网上对于这两个的解决方案大同小异，手动的记录父元素的宽度，或者侦听display属性，解决方案要么感觉极其复杂，要么治标不治本， 这两个缠绕多年的问题，我们将通过一个插件彻底完美解决它们！！！

问题探究：

问题1复现：

问题1原因：

　　究极原因其实出现在图表设置了display:none属性上，(属性含义：不为被隐藏的对象保留其物理空间，关闭元素的显示，并且所有后代元素不显示)。

　　我们通过浏览器打断点可以看清楚看到Echart在计算图表宽度这部分的逻辑 $(“#chart”).css( ‘width’, $(“#chart”).width() ); ，(“#chart”)指的是当前绘制图表的div，获取当前元素的宽度后把固定宽度赋值给图表；

但是为什么我们宽度按设置了100%后，变成100px呢