echarts 中 flex 布局可能會(huì)導(dǎo)致高度不能適應(yīng)的問題
作者:MongoGoing
來源:SegmentFault 思否社區(qū)
前言
在項(xiàng)目中使用echarts開發(fā)圖表,經(jīng)常會(huì)有幾個(gè)圖表并排展示的需求,而圖表又是需要平均分配空間的時(shí)候,我會(huì)首先想到flex布局,flex布局也是開發(fā)自適應(yīng)網(wǎng)站時(shí)的首選布局方式,目前最推薦的頁(yè)面布局技巧
遇到的問題
在flex布局中,外層父div包裹了三個(gè)子div,三個(gè)子div高度需要平均,設(shè)置了子div的flex均為1使其高度平均自動(dòng)分配,注意如果是在垂直方向上,父元素需要設(shè)置flex-direction: column;,在頁(yè)面全屏和縮小的時(shí)候,echarts的resize可能會(huì)使某一個(gè)圖表高度自適應(yīng)失敗
預(yù)期的效果

分析原因
我猜測(cè):echarts在調(diào)用resize時(shí)會(huì)重繪,如果你的子div沒有設(shè)置高度,只是設(shè)置了flex:1;那么會(huì)有如下場(chǎng)景發(fā)生:觸發(fā)三個(gè)圖表resize后,子元素高度全為0,父元素高度也為0,會(huì)導(dǎo)致第一個(gè)重繪完成的圖表所在的子div高度不明確,可能會(huì)使得第一個(gè)繪制完成的圖表高度在resize后還是默認(rèn)的高度
解決辦法
給每個(gè)子div設(shè)置一個(gè)默認(rèn)最小高度,這個(gè)高度不能與你預(yù)期的高度差太多,可以使用百分比,如下:
父div:
{ // 父divheight: 100%;display: flex;: column;}
子div:
.item { // 子divflex: 1;min-height: calc(100%/3.33);}

評(píng)論
圖片
表情
