echarts柱状图x轴数据过多固定宽度横向拉动
时间: 2023-06-28 10:04:36 浏览: 138
echarts 横着显示的柱状图
如果echarts柱状图的x轴数据过多,可以通过设置x轴的type为"category",并使用axisLabel中的interval属性来控制x轴标签的显示间隔。同时,可以设置x轴的滚动条,可以横向拉动来查看所有的数据。
具体代码如下:
```javascript
option = {
...
xAxis: {
type: 'category',
data: ['data1', 'data2', 'data3', ...],
axisLabel: {
interval: 0, //设置标签全部显示
},
axisPointer: {
type: 'shadow' //滚动条样式
},
scrollbar: {
show: true, //显示滚动条
height: 10, //设置滚动条高度
xAxisIndex: [0], //设置滚动条所在的x轴
bottom: 0 //设置滚动条位置
}
},
...
};
```
这样就可以实现x轴数据过多时横向拉动查看的功能。
阅读全文