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

}]

};

效果截图：

查看原文