dataZoom疑问echarts 柱状配置项内容和展示

拖动数据时如何设置拖动一下同时变化一定数量的数据 就像微信运动的那种

配置项如下
      option = {
    grid: {
        left: '0%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: true,
        data: ['16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '27', '今天'],
        axisTick: {
            show: false
        },
    },
    yAxis: {
        type: 'value',
        nameLocation: 'start',
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            textStyle: {
                color: '#fff',
                baseline: 'bottom'
            }
        }
    },
    dataZoom: [{
        type: 'inside',
        startValue:  7
    }],
    animation: true,
    series: [{
        name: '邮件营销',
        type: 'bar',
        lineStyle: {
            normal: {
                color: 'transparent'
            }
        },
        itemStyle: {
            normal: {
                areaStyle: {
                    color: (function() {
                        return {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(255,255,255,1)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(255,255,255,.3)' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        };
                    })()
                },
                borderWidth: 20,
                opacity: 1,
                borderColor: 'transparent',
                color: '#fff'
            }
        },
        data: [22, 33, 44, 55, 66, 77, 88, 99, 20, 30, 40, 50],
        barWidth: '60%'
    }],
    backgroundColor: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [{
            offset: 0,
            color: 'rgb(248,93,75)' // 0% 处的颜色
        }, {
            offset: 1,
            color: 'rgb(253,134,52)' // 100% 处的颜色
        }],
        globalCoord: false // 缺省为 false
    }
};
    
截图如下