echarts多组柱状间距
时间: 2023-12-12 09:36:07 浏览: 27
可以通过设置`barGap`和`barCategoryGap`属性来调整ECharts中多组柱状间的距离。其中,`barGap`表示不同系列之间的间距,`barCategoryGap`表示同一系列中不同柱状之间的间距。两个属性的值都是百分比,可以根据需要进行调整。
以下是一个示例代码,展示了如何设置`barGap`和`barCategoryGap`属性来调整多组柱状间的距离:
```javascript
option = {
legend: {},
tooltip: {},
dataset: {
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
xAxis: {type: 'category'},
yAxis: {},
series: [
{type: 'bar', seriesLayoutBy: 'row', barGap: '30%', barCategoryGap: '20%'},
{type: 'bar', seriesLayoutBy: 'row', barGap: '30%', barCategoryGap: '20%'},
{type: 'bar', seriesLayoutBy: 'row', barGap: '30%', barCategoryGap: '20%'}
]
};
```
在上面的代码中,我们设置了三个柱状系列,它们的`barGap`和`barCategoryGap`属性都被设置为了`30%`和`20%`。这样,不同系列之间的间距和同一系列中不同柱状之间的间距都会变得更大。