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

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

 

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

 

 

 

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

 

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

  

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

 

 

 

 

 

搜索

复制