echarts使用鼠标滚轮控制区域滚动

当echarts图表的数据过多时，页面就会放不下 ，这个时候就需要他可以滚动查看数据
在echarts的属性中有dataZoom属性用来控制区域缩放和滚动

dataZoom:[               //Y轴滑动条
          {
              type: 'slider', //滑动条
              show: true,      //开启
              yAxisIndex: [0],
              left: '93%',  //滑动条位置
              start: 100,    //初始化时，滑动条宽度开始标度
              end: 70  ,  
              width:'6',
              fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 0,
                  color: '#3E86FF'
              }, {
                  offset: 1,
                  color: '#47ACE7'
              }]),
              // handleIcon:'image://https://csdnimg.cn/medal/qixiebiaobing4@240.png',
              borderColor: "transparent",
              backgroundColor: 'white',//两边未选中的滑动条区域的颜色
              showDataShadow: false,//是否显示数据阴影 默认auto
              showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
          },
          {
            type:'inside',
            yAxisIndex:0,
            zoomOnMouseWheel:false,  //滚轮是否触发缩放
            moveOnMouseMove:true,  //鼠标滚轮触发滚动
            moveOnMouseWheel:true
          }]

效果如下