星月前端博客

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

8/19/2023 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, // 设置柱子粗细
        },
    }],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在上面的示例中，我们通过动态计算 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
    }]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 效果截图：

在这里插入图片描述