ECharts响应式配置中media的maxWidth设置不生效问题求助

大家好，我最近在尝试用echarts.js做图表的响应式适配，查到可以通过media配合query属性来针对不同尺寸做调整，但遇到了一个奇怪的问题——当我缩小窗口宽度（容器尺寸也跟着变小）时，配置的maxWidth规则完全没有生效，看不到任何样式变化；但换成minWidth的话就正常工作，这实在太困惑了！

我是照着官方示例的写法来写的代码，以下是我的具体实现：

JavaScript代码 #

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>

我本来觉得代码是没问题的，毕竟完全参照示例的结构来写，但就是看不到容器宽高的变化。有没有大佬能帮我看看哪里漏了什么配置吗？

备注：内容来源于stack exchange，提问作者Christopher