曲线图如何左右滚动，以及设置被覆盖的区域有颜色

如何曲线图如何左右滚动，以及设置被覆盖的区域有颜色

 initCharts() {
    const ec = echarts as any;
    const myChart = echarts.init(document.getElementById('lineChart'));
    const option = {
      roam: false, // 禁止滚轮事件
      color: ['#37A2DA', '#67E0E3', '#9FE6B8'],
      tooltip: {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
          type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      legend: {

        data: ['A商品']
      },
      grid: { // 控制图表上下左右距离
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },

      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['02/1', '02/2', '02/3', '02/4', '02/5', '02/6', '02/7', '02/8', '02/1', '02/2', '02/3',
          '02/4', '02/5', '02/6', '02/7', '02/8']
      },
      yAxis: {
        x: 'center',
        type: 'value',
      },
      series: [
        {
        name: 'A商品',
        type: 'line',
        smooth: true,
        data: [1, 4, 6, 8, 10, 17, 12, 1, 16, 26, 35, 45, 54, 35, 1, 16, 26, 7, 5, 18, 24, 1, 16, 13, 8, 6, 16, 23],
         areaStyle: {},
          itemStyle: {
            normal: {
              // 折线点的颜色
              color: '#ff2d52',
              lineStyle: {
                // 折线的颜色
                color: '#ff2d53'
              }
            }
          }
      }],
      // 可左右滑动
          dataZoom: [{
            show: false,
            realtime: true,
            start: 0,
            end: 50
          }, {
            type: 'inside',
            realtime: false,
            start: 0,
            end: 50,
            zoomOnMouseWheel: false, // 禁用滚轮
          }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }