echars 柱状图分类如何设置滚动
时间: 2023-07-04 22:03:47 浏览: 58
ECharts 柱状图的分类轴(x 轴)可以通过设置 `xAxis.axisLabel.interval` 来实现滚动,具体步骤如下:
1. 在 ECharts 的 `option` 中,设置 `xAxis.type` 为 `'category'`,表示 x 轴数据为离散的类目数据。
2. 设置 `xAxis.axisLabel.interval` 属性为 `0` 表示所有类目都显示;或者设置为一个正整数,表示每隔几个类目显示一个。
3. 如果需要滚动,可以在 `xAxis` 中设置 `axisPointer.handle.show` 为 `true`,表示显示滚动条。此外,还可以设置 `axisPointer.handle.size` 来调整滚动条的大小。
下面是一个示例代码:
```javascript
option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
axisLabel: {
interval: 0, // 设置为 0,表示所有类目都显示
},
axisPointer: {
handle: {
show: true, // 显示滚动条
size: '80%', // 滚动条大小
}
}
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
```
以上代码中,通过设置 `xAxis.axisLabel.interval` 为 `0`,表示所有类目都显示;通过设置 `xAxis.axisPointer.handle.show` 为 `true`,表示显示滚动条。当鼠标滑动滚动条时,图表会自动滚动显示对应的数据。