柱状图组件的柱子宽度在移动端显示太细怎么办？

打工人世博提问于 2026-02-17 20:43:28 阅读 57

组件

我在用ECharts做柱状图适配移动端时遇到问题，柱子宽度在手机上显示得太细了。尝试过设置barWidth和调整barCategoryGap，但发现当屏幕缩到360px时柱子几乎变成线了。

代码里这样配置的：

option = {
    xAxis: { type: 'category', data: ['A','B','C','D','E'] },
    series: [{
        type: 'bar',
        barWidth: '40%',
        data: [10, 20, 30, 40, 50]
    }]
}

试过把barWidth改成分数值15，但移动端还是没变化。是不是需要结合屏幕宽度动态计算？或者有其他布局参数没注意到？

我来解答赞 9 收藏

反馈

1 条解答

怡辰（打工版） Lv1

这个问题确实挺常见的，ECharts在移动端的适配需要多花点心思。你可以通过监听窗口大小变化动态调整柱子宽度，结合屏幕宽度按比例计算barWidth是个不错的思路。

具体做法是先获取当前设备的屏幕宽度，然后根据宽度设置一个合适的百分比或者固定值。给你一个简单实现：

function getChartOption() {

    var screenWidth = document.documentElement.clientWidth || window.innerWidth;

    var barWidth = screenWidth < 768 ? screenWidth * 0.12 : '40%';



    return {

        xAxis: { type: 'category', data: ['A','B','C','D','E'] },

        series: [{

            type: 'bar',

            barWidth: barWidth,

            data: [10, 20, 30, 40, 50]

        }]

    };

}



// 初始化图表

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

myChart.setOption(getChartOption());



// 监听窗口变化重新渲染

window.addEventListener('resize', function () {

    myChart.setOption(getChartOption());

    myChart.resize();

});

这里的关键点是用screenWidth * 0.12来动态计算柱子宽度，这个系数你可以根据实际效果微调。另外别忘了在窗口变化时同时调用resize()方法，不然图表可能变形。

说实话，我之前也被这种适配问题坑过好几次，后来就习惯性地把所有尺寸相关的配置都改成动态计算了。如果觉得麻烦，也可以考虑用现成的响应式插件来做这些事，不过自己写也就几行代码的事儿。

对了，记得测试不同分辨率下的显示效果，特别是360px这种极端情况，有时候还需要单独处理下最小宽度。

2026-02-17 21:00