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

Question

我正在尝试使用 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

。这很奇怪。

Answer 1

我认为你的div的高度是由

height:600px

固定的，所以图表无法适应

 <div id="barchart" style="width: auto;height:600px;">

 </div>