echars 柱状图分类如何设置category分类 左右滚动 限制同时展示最大值为20
时间: 2023-11-22 20:54:03 浏览: 33
对于 ECharts 柱状图,可以通过设置 x 轴的 type 为 "category" 来指定分类数据。同时,可以通过设置 dataZoom 组件来实现左右滚动和限制同时展示最大值为20的功能。
以下是一个示例代码:
```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', '类别21', '类别22', '类别23', '类别24', '类别25']
},
yAxis: {
type: 'value'
},
dataZoom: [{
type: 'slider',
start: 0,
end: 19
}]
series: [{
data: [120, 200, 150, 80, 70, 110, 130, 90, 100, 130, 140, 160, 120, 200, 150, 80, 70, 110, 130, 90, 50, 20, 30, 40, 60],
type: 'bar'
}]
};
```
在上述示例中,x 轴的 data 数组包含了所有的分类数据,其中最多同时展示20个,dataZoom 组件通过设置 type 为 "slider" 来实现左右滚动功能,并且通过设置 start 和 end 属性来限制同时展示最大值为20。在 series 中,我们设置了一个 bar 类型的系列数据,并且通过 data 属性指定了该系列的数据。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)