echarts柱状图柱体宽度
时间: 2023-12-08 10:39:37 浏览: 156
echarts柱状图
在 echarts 中,可以通过 barWidth 属性来设置柱体的宽度。barWidth 的默认值为自适应,即根据图表的大小和数据量自动计算柱体的宽度。如果需要手动设置柱体的宽度,可以将 barWidth 设置为一个固定值或者百分比。例如:
```javascript
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: 20 // 设置柱体宽度为 20
}]
};
```
除了 barWidth 属性外,还可以通过 barGap 和 barCategoryGap 属性来控制柱体之间的间距。其中,barGap 表示不同系列的柱间距离,默认为当前柱条宽度的 30%;barCategoryGap 表示同一系列的柱间距离,默认为类目间距的 20%。例如:
```javascript
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: 20, // 设置柱体宽度为 20
barGap: '-50%' // 设置柱间距为柱体宽度的一半
}]
};
```
阅读全文