echarts柱状图两个柱状图之间的距离设置
时间: 2023-10-17 16:31:55 浏览: 389
在 ECharts 中,可以通过设置柱状图的 barGap 和 barCategoryGap 属性来调整两个柱状图之间的距离。
1. barGap: 它是柱状图之间的间距,默认值为 '30%',表示柱状图宽度的百分比。可以设置为一个具体的数值(如 10)来指定固定的像素距离,或者设置为百分比(如 '20%')来相对于柱状图宽度进行调整。
```javascript
option = {
// 其他配置项...
series: [
{
type: 'bar',
barGap: '10%', // 设置柱状图之间的距离为 10%
// 数据...
},
{
type: 'bar',
barGap: '10%', // 设置柱状图之间的距离为 10%
// 数据...
}
]
};
```
2. barCategoryGap: 它是同一系列内的柱状图之间的间距,默认值为 '20%',表示柱状图宽度的百分比。可以设置为一个具体的数值或百分比来调整间距大小。
```javascript
option = {
// 其他配置项...
series: [
{
type: 'bar',
barCategoryGap: '30%', // 设置同一系列内的柱状图之间的间距为 30%
// 数据...
},
{
type: 'bar',
barCategoryGap: '30%', // 设置同一系列内的柱状图之间的间距为 30%
// 数据...
}
]
};
```
通过调整这两个属性的值,您可以实现不同的柱状图之间的距离效果。
阅读全文