关于Element的Tab切换由于使用display:none和百分比大小导致Echarts渲染大小100*100的问题

问题: Element-UI的Tab栏的切换是利用标签的display:none切换来实现的,这就导致在display:none的标签里如果有Echarts图表这个图并且echarts是使用百分比大小的时候切换过来的时候只有100*100px大小,这个大小应该是Echarts的最小默认尺寸。
解决方案一:
给Echarts设置固定px宽高
解决方案二:
根本原因其实是Element-ui的Tab是使用display:none来实现的,导致百分比大小的时候取到的数值为0. 我们可以使用其他UI库的Tab来实现,例如iview, iview的Tab是左右移动标签实现的类似轮播图,标签实际是一直存在的,也就不会有宽高为0的情况了。

你可能感兴趣的:(关于Element的Tab切换由于使用display:none和百分比大小导致Echarts渲染大小100*100的问题)