flex布局下，多个Echarts图表resize有问题

场景

项目中，我们需要实现一列多行，多个图表，使用flex布局宽度自适应。给图表绑定了resize事件，当窗口从小到大变化时，每个图表resize正常，但是从大变小时，图表resize异常。多方排查之后，才发现是echarts没有兼容flex布局的方式。

布局方面

项目里我们的布局是固定一列，剩余均分自适应。该组件多个地方使用，内容项不固定，可能4项，也可能3项，所以布局我们使用了flex。

.container {
    display: flex;
}
.flex-item1 {
    width: 200px;
}
.flex-item2-other {
    flex: 1;
}

这样我们就实现了固定一列宽，后面均分自适应

图表resize

这里我们每一个flex-item的内容都是图表，图表我们进行了resize监听重绘

 mounted() {
    this.initChart();
    window.addEventListener('resize', debounce(this.handleWindowResize, 300));
  },
  beforeDestroy() {
    window.removeEventListener('resize', debounce(this.handleWindowResize, 300));
  },
  methods: {
    handleWindowResize() {
        //this.myChart chart实例
      if (!this.myChart) return;
      this.myChart.resize();
    }
  }
   

问题描述

当我们修改窗口大小时，从小放大，chart正常重绘；从大缩小窗口，chart重绘异常，有的图表会缩到一团。

在echarts 的 GitHub上面的issue上也搜到了同样的问题
【https://github.com/apache/echarts/issues/6048】
https://github.com/apache/echarts/issues/11791
https://github.com/apache/echarts/issues/13886
产生问题的原因我猜想和这个一样

解决办法

给每个flex-item都设置一个最小宽度

.flex-item2-other {
    flex: 1;
    min-width: 200px;
}