echarts横向柱状图,高度不固定
时间: 2023-10-10 16:08:56 浏览: 103
echarts横向柱状图
如果您想实现高度不固定的横向柱状图,可以使用 echarts 中的 series-bar 组件,并将 barWidth 属性设置为一个函数。barWidth 函数可以根据数据动态计算每个柱子的宽度。
以下是一个示例代码片段,其中 barWidth 函数计算每个柱子的宽度:
```javascript
option = {
xAxis: {
type: 'value',
show: false
},
yAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E'],
axisLabel: {
interval: 0,
margin: 15,
formatter: function (value) {
return '{a|' + value + '}';
},
textStyle: {
rich: {
a: {
fontWeight: 'bold',
fontSize: 16,
lineHeight: 30
}
}
}
}
},
series: [{
type: 'bar',
barWidth: function (params) {
// 计算每个柱子的宽度,最小宽度为 10
return Math.max(params.data.value / 2, 10);
},
itemStyle: {
normal: {
color: '#009688'
}
},
label: {
normal: {
show: true,
position: 'right',
formatter: function (params) {
return params.data.value + '万元';
}
}
},
data: [{
value: 200
}, {
value: 400
}, {
value: 600
}, {
value: 800
}, {
value: 1000
}]
}]
};
```
在这个示例中,yAxis 中的 axisLabel 样式设置了字体样式,并使用富文本来设置字体加粗和字体大小。barWidth 函数根据每个柱子的数据值来计算柱子的宽度,并将最小宽度设置为 10。因此,当柱子的数据值较小时,柱子的宽度会自动调整为最小值,避免出现太细的柱子。
您可以根据自己的需求,调整 barWidth 函数的计算方式,来实现高度不固定的横向柱状图。
阅读全文