echarts -- x轴数据显示不全,添加滑动条
![](https://img2023.cnblogs.com/blog/1810464/202302/1810464-20230211093927524-910152056.png)
添加dataZoom属性即可显示滚动条
option = { tooltip: { trigger: 'axis' }, grid: { top:"20%", left: '8%', right: '8%', bottom: '0', containLabel: true }, xAxis: { type: 'category', boundaryGap: false, data:["13:39:30", "13:49:30", "13:59:30", "14:09:31", "14:19:32", "14:29:32", "14:39:33", "14:49:33", "14:59:34", "15:09:35", "15:19:35", "15:29:36", "15:39:36", "15:49:37"], axisLabel:{ rotate : 50, }, textStyle: { color: "#a9a9a9", //更改坐标轴文字颜色 fontSize: 12 //更改坐标轴文字大小 }, }, yAxis: { type: 'value', axisLabel: { formatter:'{value} w', }, }, dataZoom: [{ //添加dataZoom属性即可显示滑动条 type: 'slider', show: true, //flase直接隐藏图形 xAxisIndex: [0], left: '9%', //滚动条靠左侧的百分比 bottom: -5, start: 0,//滚动条的起始位置 end: 50 //滚动条的截止位置(按比例分割你的柱状图x轴长度) }], series: [ { name: '功率', type: 'line', stack: 'Total', data:[378, 377, 376, 371, 377, 376, 375, 377, 375, 377, 378, 377, 378, 378, 376] } ] };