echarts图表因为高度为0显示不出来

问题描述:echarts绘制图表时,有时会遇到如下图出现空白的情况(偶发,切换页面时 或 接口响应慢的时候 容易测出,刷新该页面就会显示出来)。

 

分析:图表空白,打开控制台查询图表元素的样式,发现图表容器高度为100%,其子元素的高度为0;所以,猜测渲染图表之前图表容器的高度也为0。

 

 

 

在初始化图表之前打印图表容器的高度 oElem.offsetHeight,输出结果有两次,第一次为0,第二次为245;

 

注意:发现这一现象之后,一开始以为是flex等样式布局造成的,修改稳定的布局方式后发现问题仍然存在!

  

解决方案:渲染图表之前添加容器高度判断条件,满足条件才渲染即可。如下

 

 

 

 

 

posted @ 2022-06-24 08:29  一只两支三指  阅读(2328)  评论(1编辑  收藏  举报