如何解决ApexCharts设置响应式后条形高度不足的问题

我明白你遇到的困扰了——当图表切换到横向条形模式时，条形变得过于窄小，视觉效果很差。这主要是因为响应式配置里没适配横向布局的高度需求，加上条形尺寸的参数没调整到位。咱们一步步来修正：

问题根源 #

1. 固定的height: 350在横向布局下空间不足，纵向的高度被分给12个条形后，每个条形只能被压缩得很矮；
2. 横向条形模式下，控制条形高度的参数是barHeight（对应纵向模式的columnWidth），你之前没有配置这个值，导致条形默认高度过小；
3. 响应式配置里的轴分类配置有点混乱，需要同步调整x轴和y轴的角色。

修改后的完整代码 #

var options = {
    "chart": {
        "height": 350, // 桌面端高度保持原有设置
        "type": 'bar'
    },
    "plotOptions": {
        "bar": {
            "horizontal": false,
            "columnWidth": '80%'
        },
    },
    "series": [{
        "name": 'Umsatz',
        "data": umsatzSumMonat
    }, {
        "name": 'Ausgaben',
        "data": ausgabenSumMonat
    }],
    "xaxis": {
        "categories": ['Jan','Feb', 'März', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
    },
    "responsive": [{
        "breakpoint": 1000,
        "options": {
            "chart": {
                "height": 500 // 横向模式下提升图表高度，给条形足够垂直空间
            },
            "plotOptions": {
                "bar": {
                    "horizontal": true,
                    "barHeight": '65%' // 控制横向条形的高度比例，可根据视觉需求调整
                }
            },
            "xaxis": {
                "categories": undefined // 横向模式下x轴转为数值轴，不需要分类
            },
            "yaxis": {
                "categories": ['Jan','Feb', 'März', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
            }
        }
    }]
}
var chart = new ApexCharts(
    document.querySelector("#myChart"), options
);
chart.render();

关键修改说明 #

• 提升横向模式的图表高度：在响应式配置里给chart.height设置更大的值（比如500），确保12个条形有足够的垂直空间展开；
• 配置barHeight参数：当horizontal: true时，用这个参数控制条形的高度占比，数值越高条形越粗，这里设为65%是比较均衡的选择；
• 修正轴的角色：横向模式下，月份分类要从x轴移到y轴，同时清空x轴的分类配置，让它自动适配数值型数据。

这样调整后，当屏幕宽度小于1000px时，图表会切换成高度充足、条形大小合适的横向模式，完美适配移动端或小屏幕设备。

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