echart 多图表调用resize时宽高不正确

场景与问题

在页面中，我使用了 flex 布局，使得图表模块宽高都自适应。给两个图表绑定了 resize 事件，该事件可以使得图表会根据浏览器的变化而自适应 。
问题：窗口从小到大变化时，图表大小正常，但是从大变小时，第一个图表的高度异常（如图）。多方排查之后，才发现是 echarts 没有兼容 flex 布局的原因。

解决方法

给 flex 的 item 设置最小宽度 min-width 和最小高度 min-height。

.flex-item {
    flex: 1;
    min-width: 20%;
    min-height: 50%;
}

如果不生效，试一下将 flex 改为百分比布局，如上例子，将图表的高度设置为 height: 50%。

resize 监听代码：

<script>
// 写法一
window.addEventListener("resize",function (){
      
      
    myChart.resize();
    myChartA.resize();
});
 
// 写法二
window.onresize = function(){
      
      
    myChart.resize();
    myChartA.resize();
}

// 写法三
window.onresize = myChart.resize;
</script>