echarts 中 flex 布局可能會導致高度不能適應的問題

作者：MongoGoing

來源：SegmentFault 思否社區(qū)

---

前言

在項目中使用echarts開發(fā)圖表，經(jīng)常會有幾個圖表并排展示的需求，而圖表又是需要平均分配空間的時候，我會首先想到flex布局，flex布局也是開發(fā)自適應網(wǎng)站時的首選布局方式，目前最推薦的頁面布局技巧

---

遇到的問題

在flex布局中，外層父div包裹了三個子div，三個子div高度需要平均，設置了子div的flex均為1使其高度平均自動分配，注意如果是在垂直方向上，父元素需要設置flex-direction: column;，在頁面全屏和縮小的時候，echarts的resize可能會使某一個圖表高度自適應失敗

---

預期的效果

---

分析原因

我猜測：echarts在調用resize時會重繪，如果你的子div沒有設置高度，只是設置了flex：1；那么會有如下場景發(fā)生：觸發(fā)三個圖表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);}

---

點擊左下角閱讀原文，到?SegmentFault 思否社區(qū)?和文章作者展開更多互動和交流。

-?END -