echarts柱状图区间滚动

const xData = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00'];
const barData = [5, 20, 36, 10, 10, 20];

option = {
    tooltip: {
        show: true,
        trigger: 'axis',
        confine: true,
        formatter(item) {
            const html = `

                                        
${xData[item[0].dataIndex]}~${
                        xData[item[0].dataIndex + 1]
                    }
                                            
 ${item[0].data}
                                  
`;
            return html;
        },
    },
    xAxis: [{
            data: barData,
            show:false
        },
        {
            data: xData,
            axisLabel: {
                interval: 0,
                show: true,
            },
            position: 'bottom',
            boundaryGap: false,
            axisPointer: {
                show: false,
            },
            name: "BP",
            nameLocation: "end", // 将名称放置在 X 轴的末尾
            nameTextStyle: {
              // padding: [10, 0, 0, -30], // 向下偏移 10 像素
              fontWeight: 600,
              color: "black",
              verticalAlign: "top"
            },
        },
    ],
    yAxis: {
        type: 'value',
        axisLine:{
          show:true
        },
        name: "频数", // Y 轴的名称
        nameLocation: "end", // 将名称放置在 Y 轴的顶部
        nameGap: 15, // 轴名称与轴线之间的间距
        nameTextStyle: {
          padding: [0, 0, 0, -50] // 设置 Y 轴名称的偏移位置，右偏移 20 像素
        }
        // show: false,
    },
   dataZoom: [
    {
      type: "slider",
      show: true,
      xAxisIndex: [0,1],
      start: 0,
      end: 100,
      bottom: "2%"
    }
  ],
    series: [{
        data: barData,
        type: 'bar',
        barWidth:'100%',
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)',
        },
    }, ],
}