echarts -- x轴数据显示不全，添加滑动条

 

 添加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]
            }
        ]
    };