关于echarts:echarts中flex布局可能会导致高度不能适应的问题

前言

在我的项目中应用 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);
}