echars 柱状图分类如何设置category分类 左右滚动 限制同时展示最大值为20, 不要展示全部
时间: 2023-11-22 15:54:31 浏览: 31
要设置分类,可以在xAxis中设置type为'category',并在data中设置分类的名称。例如:
```
xAxis: {
type: 'category',
data: ['分类1', '分类2', '分类3', '分类4', '分类5']
},
```
要实现左右滚动,可以在xAxis中设置axisLabel的rotate和interval属性,例如:
```
xAxis: {
type: 'category',
data: ['分类1', '分类2', '分类3', '分类4', '分类5'],
axisLabel: {
rotate: 90,
interval: 0
}
},
```
其中rotate表示旋转角度,interval表示坐标轴刻度标签的显示间隔,在这里设置为0表示不间隔显示。
要限制同时展示最大值为20,可以在series中设置barMaxWidth属性,例如:
```
series: [{
type: 'bar',
data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200],
barMaxWidth: 20
}]
```
其中barMaxWidth表示每个柱子的最大宽度,设置为20即可限制同时展示最大值为20。
不要展示全部可以通过设置grid中的containLabel属性为true来实现,例如:
```
grid: {
containLabel: true
},
```
其中containLabel表示坐标轴标签是否在grid区域内。设置为true时,就可以将所有标签限制在grid区域内,不会超出展示。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)