Javascript 为什么我的响应图表选项设置不起作用

我正在try 使用echarts.js使我的图表具有响应性.我找到了here个我可以使用的物业媒体和查询.

问题是，当我改变宽度时，我看不到任何变化.

let myChart = echarts.init(document.getElementById('barchart'));
 
        let option = {
            baseOption: { // baseOption
                tooltip: {
                    formatter: 'Hashtag {b} <br /> Tweets: {c}'
                },
                toolbox: {
                    feature: {
                        dataView: {},
                        restore: {},
                        saveAsImage: {},                           
                    },
                    left: '1%',
                    top:'top',
                    right:'auto',
                    bottom:'auto'
                },
                grid: {
                    left: '2%',
                    top: '17%',
                    right: 'auto',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true,
                        interval: 0
                      },
                      axisLabel: {
                        interval: 0,
                        rotate: 45,
                        width: 78,
                        overflow: 'truncate'
                      },
                      axisPointer: {
                        show: true,
                        type: 'shadow'
                      },
                    data: hashtags
                
                    
                },
                yAxis: { 
                    type: 'value'
                },
                series: [
                    {
                        name: 'Tweet count',
                        type: 'bar',
                        data: countOfEachHashTag,
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        },
                        label: {
                            show: true,
                            position: 'top'
                        },
                        itemStyle: {
                            color: 'rgb(8,72,103)'
                        }
                    }
                ]
            },
            media: [
                {
                    query: {
                        maxWidth: 576
                    },
                    option: {
                        grid: {
                            left: 'auto',
                            top: 'auto',
                            right: 'auto',
                            bottom: 'auto',
                            width: '406',
                            height: '600',
                            containLabel: true
                        }
                    }
                }
            ]
        };
    myChart.setOption(option);

根据示例，我的代码似乎是正确的，但当我调整窗口大小时，我没有看到容器的宽度和高度有任何变化，容器的大小也减小了.

我对此图表的html代码如下:

<div id="barChartCollapse" class="collapse show">
     <div id="barchart" style="width: auto;height:600px;">

     </div>
</div>

是不是少了什么东西？

根据示例，minWidth可以工作，但MaxWidth不行.我提供的示例链接特别指出了width, height, aspectRatio (height / width), each of which can add min or max as prefix.这太奇怪了.