超级会员免费看
本文介绍了在前端项目中遇到的一个问题，即使用Echarts时，当图表位于隐藏的Tab页中，由于初始宽度未设置或设置不当，导致图表无法正常显示。分析了问题的原因在于隐藏图表的div没有正确宽度。解决方案是在所有图表加载前，根据已显示图表的宽度设置隐藏图表的宽度，确保其能够正常渲染。文章提供了相关的HTML和JS代码片段作为示例。
项目里图表高度设置了固定的360px。
从网上查的好多结果，都说是因为 第二个tab的宽度 没有设置 或者设置为0或者 设置的值很小，导致的第二个tab里的图表无法显示出来。
项目中使用到了Echarts来在展示图表，两个tab切换页面中都存在图表，页面加载完成后
对所有图表进行了初始化和绘制，然后切换查看时，发现图表的宽度不正确.，第一个tab显示是很正常的，但是第二个tab中内容显示不出来。
第一个tab ：图表1 （当前负荷）
第二个tab ：图表2 （当前电量）
原因：因为页面加载时， 第二个tab ：图表2 （当前电量）因为是隐藏图表所以没有给 设置具体的宽度，所以不能显示，而第一个tab ：图表1 （当前负荷）有具体的宽度，所以可以正常显示，，，，，，，，，，，，，，，，，，，，，，在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。而这个默认宽度很小，所以导致echarts图表显示不完全。
。
。
。
订阅专栏 解锁全文
扫一扫
2318
到【灌水乐园】发言
