How does echarts set the minimum width and maximum width of the column
When there are few items, the column will be self-adaptive by default, sometimes this effect is not needed, so:
1. In Echarts, the effect of minimum thickness and maximum thickness can be achieved by dynamically calculating the value of barWidth.
2. To set the maximum width of the column, you can use the property barMaxWidth of the histogram (bar). This property can accept a value indicating the maximum width of the column.
1. The following is a sample code for 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, // 设置柱子粗细
},
}],
};
In the above example, we dynamically calculate the value of barWidth to ensure that it is between the minimum and maximum thickness. You can adjust the value of maxBarWidth and minBarWidth to control the thickness range of the column.
2. The following is a sample code for 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
}]
};
Effect screenshot:
