echarts 如何设置柱状图之间的间距 并且有滚动条
时间: 2023-11-07 12:43:14 浏览: 80
可以通过设置柱状图的barGap和barCategoryGap属性来调整柱状图之间的间距。同时,可以在图表容器上设置overflow为auto,然后在x轴上设置type为category,使得x轴上的标签可以滚动。
示例代码如下:
```
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K']
},
yAxis: {
type: 'value'
},
series: [{
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130, 90, 100, 140, 160],
barGap: '50%', // 设置柱状图之间的间距
barCategoryGap: '30%' // 设置柱状图组之间的间距
}]
};
// 设置图表容器的overflow为auto
var chartContainer = document.getElementById('chart-container');
chartContainer.style.overflow = 'auto';
// 渲染图表
var myChart = echarts.init(chartContainer);
myChart.setOption(option);
```
在示例代码中,设置了barGap为50%,表示柱状图之间的间距为每个柱状图宽度的50%。同时,设置了barCategoryGap为30%,表示柱状图组之间的间距为每个柱状图组宽度的30%。在图表容器上设置了overflow为auto以启用滚动条。最终效果为:
![柱状图滚动条效果图](https://cdn.jsdelivr.net/gh/ryouaki/image-hosting//echarts-scroll-bar.png)