echarts设置完barWidth后横向柱图间距太大
时间: 2023-08-10 08:03:23 浏览: 235
echarts横向柱状图
如果您在 ECharts 中设置了 `barWidth` 属性后,发现横向柱图的间距太大,可以尝试调整以下两个参数:
1. `barCategoryGap`:设置不同系列的柱状图之间的距离,默认为 `"20%"`,该值越大,不同系列之间的间距就越大。您可以将其设置为一个较小的值,例如 `"5%"`。
2. `barGap`:设置同一系列中不同柱状图之间的距离,默认为 `"30%"`,该值越大,同一系列中不同柱状图之间的间距就越大。您可以将其设置为一个较小的值,例如 `"10%"`。
以下是一个示例代码片段:
```javascript
option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
series: [
{
name: '柱状图',
type: 'bar',
barWidth: 20, // 设置柱状图宽度
barCategoryGap: '5%', // 设置不同系列之间的间距
barGap: '10%', // 设置同一系列中不同柱状图之间的间距
data: [120, 200, 150, 80, 70]
}
]
};
```
您可以根据自己的实际需求调整 `barCategoryGap` 和 `barGap` 的值,以达到最佳效果。
阅读全文