共计 585 个字符,预计需要花费 2 分钟才能阅读完成。
前言
在我的项目中应用 echarts 开发图表,常常会有几个图表并排展现的需要,而图表又是须要平均分配空间的时候,我会首先想到 flex 布局,flex 布局也是开发自适应网站时的首选布局形式,目前最举荐的页面布局技巧
遇到的问题
在 flex 布局中,外层父 div 包裹了三个子 div,三个子 div 高度须要均匀,设置了子 div 的 flex 均为 1 使其高度均匀主动调配,留神如果是在垂直方向上,父元素须要设置 flex-direction: column;
,在页面全屏和放大的时候,echarts 的 resize 可能会使某一个图表高度自适应失败
预期的成果
剖析起因
我猜想:echarts 在调用 resize 时会重绘,如果你的子 div 没有设置高度,只是设置了 flex:1;那么会有如下场景产生:触发三个图表 resize 后,子元素高度全为 0,父元素高度也为 0,会导致第一个重绘实现的图表所在的子 div 高度不明确,可能会使得第一个绘制实现的图表高度在 resize 后还是默认的高度
解决办法
给每个子 div 设置一个默认最小高度,这个高度不能与你预期的高度差太多,能够应用百分比,如下:
父 div:
.box { // 父 div
height: 100%;
display: flex;
flex-direction: column;
}
子 div:
.item { // 子 div
flex: 1;
min-height: calc(100%/3.33);
}
正文完