echarts 图不显示(警告:Dom has no width or height)

场景还原:

一个态势页面,有五个部分组成,这五个部分分别是单独的HTML文件,通过母页中的JS动态加载这五个部分的HTML文件到母页中。通用的CSS和JS都在母页中,echars 的展示都在子页中,设置延迟100ms加载echart图形。问题:打开母页页面,echarts 不显示,但偶尔又能显示出来,不显示的时候会有警告 Dom has no width or height。

echarts 图不显示(警告:Dom has no width or height)_第1张图片

解决方案:

加载echart的延迟时间设置为1分钟就可以正常显示了。 

原理:

 debug 发现,当报错 Dom has no width or height 时,页面样式还没有完全被渲染,这就导致显示echarts的位置高度为0,从而发生警告,不能正常显示echarts。

寄语:

设置延迟时间的解决办法不够好,此处是为了更好的诠释问题,希望大神给更好的解决建议。 

 

 

你可能感兴趣的:(前端)