echarts横向柱状图的间距不生效
时间: 2023-12-06 09:38:40 浏览: 46
为了解决echarts横向柱状图的间距不生效的问题,可以通过设置grid的left和right属性来实现。left属性设置为负值,right属性设置为负值,可以将图表向左和向右拉伸,从而实现间距的调整。具体实现方法如下所示:
```javascript
option = {
grid: {
left: '-20%', //向左拉伸20%
right: '-20%', //向右拉伸20%
top: 15,
bottom: 0,
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
series: [
{
name: '数据1',
type: 'bar',
data: [10, 20, 30, 40, 50]
},
{
name: '数据2',
type: 'bar',
data: [20, 30, 40, 50, 60]
}
]
};
```
在上述代码中,通过设置grid的left和right属性为负值,实现了横向柱状图的间距调整。同时,xAxis设置为value类型,yAxis设置为category类型,series中的type设置为bar类型,实现了横向柱状图的绘制。