echarts图表因为高度为0显示不出来
问题描述:echarts绘制图表时,有时会遇到如下图出现空白的情况(偶发,切换页面时 或 接口响应慢的时候 容易测出,刷新该页面就会显示出来)。
分析:图表空白,打开控制台查询图表元素的样式,发现图表容器高度为100%,其子元素的高度为0;所以,猜测渲染图表之前图表容器的高度也为0。
在初始化图表之前打印图表容器的高度 oElem.offsetHeight,输出结果有两次,第一次为0,第二次为245;
注意:发现这一现象之后,一开始以为是flex等样式布局造成的,修改稳定的布局方式后发现问题仍然存在!
解决方案:渲染图表之前添加容器高度判断条件,满足条件才渲染即可。如下