echars 柱状图分类如何设置category分类 左右滚动 限制滚动条可选展示最大值为20
时间: 2023-07-16 21:16:30 浏览: 44
可以通过设置 `dataZoom` 组件来实现柱状图分类的左右滚动和限制滚动条可选展示最大值为20。
首先,需要在 `option` 中配置 `dataZoom` 组件,如下所示:
```javascript
option = {
// ... 其他配置
dataZoom: [{
type: 'slider', // 滑动条型数据区域缩放
start: 0, // 默认起始位置为0%
end: 20, // 默认结束位置为20%
maxSpan: 20, // 限制缩放条最大可选范围为20%
showDataShadow: false, // 是否显示数据阴影
showDetail: false, // 是否显示详细信息
xAxisIndex: [0], // 指定控制哪个x轴
filterMode: 'empty' // 缩放时只显示空白区域的数据
}],
// ... 其他配置
};
```
其中,`type` 指定为 `slider`,表示使用滑动条型数据区域缩放。`start` 和 `end` 分别指定了缩放条的起始位置和结束位置,这里设置为默认值,即起始位置为0%,结束位置为20%。`maxSpan` 指定了缩放条最大可选范围为20%。`showDataShadow` 表示是否显示数据阴影,这里设置为不显示。`showDetail` 表示是否显示详细信息,这里也设置为不显示。`xAxisIndex` 指定了控制哪个x轴,这里设置为第一个x轴。`filterMode` 表示缩放时只显示空白区域的数据。
接下来,需要在柱状图的 `xAxis` 中设置 `type` 为 `'category'`,表示使用分类数据。同时,将 `boundaryGap` 设置为 `true`,表示在类目轴中, boundaryGap 决定是否留空格以及左右两边是否留空白。如下所示:
```javascript
option = {
// ... 其他配置
xAxis: [{
type: 'category', // 使用分类数据
data: ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6', '类目7', '类目8', '类目9', '类目10', '类目11', '类目12', '类目13', '类目14', '类目15', '类目16', '类目17', '类目18', '类目19', '类目20'], // 分类数据
boundaryGap: true // 留空白
}],
// ... 其他配置
};
```
其中,`data` 指定了分类数据,这里设置了20个类目。`boundaryGap` 设置为 `true`,表示左右两边留有空白。
完整代码如下所示:
```javascript
option = {
title: {
text: 'Echars柱状图示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: [{
type: 'category', // 使用分类数据
data: ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6', '类目7', '类目8', '类目9', '类目10', '类目11', '类目12', '类目13', '类目14', '类目15', '类目16', '类目17', '类目18', '类目19', '类目20'], // 分类数据
boundaryGap: true // 留空白
}],
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20, 5, 20] // 柱状图数据
}],
dataZoom: [{
type: 'slider', // 滑动条型数据区域缩放
start: 0, // 默认起始位置为0%
end: 20, // 默认结束位置为20%
maxSpan: 20, // 限制缩放条最大可选范围为20%
showDataShadow: false, // 是否显示数据阴影
showDetail: false, // 是否显示详细信息
xAxisIndex: [0], // 指定控制哪个x轴
filterMode: 'empty' // 缩放时只显示空白区域的数据
}]
};
```
要注意,如果数据量比较大,需要考虑数据的分页加载,以优化性能。