如何让ECharts图表容器随窗口按指定规则自适应调整尺寸？

我曾查阅过使用%或vh单位设置尺寸的相关方案，但我的场景有所不同。当前我通过以下CSS设置了一组默认尺寸为900x600的图表：

.chartbox {
    display: flex;
    flex-wrap: wrap;
    background-color: DodgerBlue;
    justify-content: space-around;
}
.chart {
    background-color: #f1f1f1;
    width: 900px;
    height: 600px;
    margin: 10px;
    position: center;
}

当前图表以固定900x600尺寸展示在flex容器中，我希望这些图表能在窗口缩放或小屏幕上自动调整尺寸。使用的ECharts JavaScript代码示例如下：

var myChart = echarts.init(document.getElementById('main'));

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }
    ]
};

myChart.setOption(option)

对应的HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8" />
        <h1>ECharts</h1>
        <link rel="stylesheet" type="text/css" href="mycss.css">
        <!-- Include The ECharts file you just downloaded -->
        <script src = "echarts.js"></script>
    </head>
    <body>
        <br>
        <!-- Prepare a DOM with a defined width and height for ECharts -->
        <div class="chartbox">
            <div class="chart" id= "main"></div>
            <div class="chart" id= "main1"></div>
            <div class="chart" id= "main2"></div>
            <div class="chart" id= "main3"></div>
            <div class="chart" id= "main4"></div>
            <div class="chart" id= "main5"></div>
            
        </div>
        
        <script src = "myjs.js"></script>
        <script src = "myjs1.js"></script>
        <script src = "myjs2.js"></script>
        <script src = "myjs3.js"></script>
        <script src = "myjs4.js"></script>
        <script src = "myjs5.js"></script>
    </body>
</html>

我尝试过为.chart设置%或vh单位的宽高，但会与默认尺寸冲突；仅使用max-width和max-height而不设置宽高时，图表无法显示（推测是ECharts的特性）。我期望实现以下自适应规则：

1. 若屏幕可容纳3个900x600的图表，则按此布局展示
2. 否则，若可容纳3个600x400的图表，则按此布局展示
3. 否则，若可容纳2个900x600的图表，则按此布局展示
4. 否则，若可容纳2个600x400的图表，则按此布局展示
5. 否则，若可容纳1个900x600的图表，则按此布局展示
6. 否则，若可容纳1个600x400的图表，则按此布局展示
7. 否则，尽可能缩放图表以适配屏幕内容

内容的提问来源于stack exchange，提问作者Krooxe