echarts 如何设置柱子的最小宽度和最大宽度

echarts 如何设置柱子的最小宽度和最大宽度

当项目很少的时候，柱子默认是会自适应变大的，有时候不要这种效果，所以：
1.在 Echarts 中，可以通过动态计算 barWidth 的数值来实现最小粗细和最大粗细的效果。
2.要设置柱子的最大宽度，可以使用柱状图（bar）的属性barMaxWidth。该属性可以接受一个数值，表示柱子的最大宽度。

1.下面是barWidth一个示例代码：

var maxBarWidth = 50; // 最大粗细
var minBarWidth = 10; // 最小粗细
 
var data = [10, 20, 30, 40, 50];
 
// 计算 barWidth 的值
var barWidth = Math.min(Math.max(maxBarWidth / data.length, minBarWidth), maxBarWidth);
 
option = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E'],
    },
    yAxis: {
        type: 'value',
    },
    series: [{
        type: 'bar',
        data: data,
        itemStyle: {
            barWidth: barWidth, // 设置柱子粗细
        },
    }],
};
 复制

在上面的示例中，我们通过动态计算 barWidth 的值，确保它在最小粗细和最大粗细之间。你可以根据需要调整 maxBarWidth 和 minBarWidth 的值来控制柱子的粗细范围。

2.下面是barMaxWidth一个示例代码：

option = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        type: 'bar',
        data: [10, 20, 30, 40, 50],
        barMaxWidth: 30  // 设置柱子的最大宽度为30
    }]
};
 复制

效果截图：