echart 柱状图自定义每一个柱的间距和粗细都不一样
时间: 2024-02-23 17:00:22 浏览: 67
自定义柱状图
Echarts柱状图自定义每一个柱的间距和粗细都不一样,需要设置series中的barWidth和barCategoryGap属性。
barWidth表示柱子的宽度,如果想要每一个柱子的宽度都不一样,可以将barWidth设置为一个数组,每个元素对应某一个柱子的宽度。例如:
```
barWidth: [20, 30, 15, 40, 25]
```
barCategoryGap表示柱子之间的距离,如果想要每一个柱子的距离都不一样,可以将barCategoryGap设置为一个数组,每个元素对应某一个柱子的距离。例如:
```
barCategoryGap: [5, 10, 20, 15, 25]
```
完整示例代码如下:
```
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: [20, 30, 15, 40, 25],
barWidth: [20, 30, 15, 40, 25],
barCategoryGap: [5, 10, 20, 15, 25]
}
]
};
```
需要注意的是,如果barWidth和barCategoryGap都设置为数组,那么数组的长度需要和数据的长度一致,否则会抛出异常。
阅读全文