echarts图表（一），图表超出滚动，鼠标滚轮滚动

 

 如↑图，想要滚动效果，主要使用的是dataZoom属性，上代码：

dataZoom = [
          {
            id: 'dataZoomY',
            yAxisIndex: [0],
            show: true, //是否显示滑动条，不影响使用
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 4, // 一次性展示5个
            width: 6,
            borderColor: 'transparent',
            fillerColor: 'rgba(205,205,205,1)',
            zoomLock: true,
            showDataShadow: false, //是否显示数据阴影 默认auto
            backgroundColor: '#fff',
            showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
            realtime: true, //是否实时更新
            filterMode: 'filter',
            handleIcon: 'circle',
            handleStyle: {
              color: 'rgba(205,205,205,1)',
              borderColor: 'rgba(205,205,205,1)',
            },
            handleSize: '80%',
            moveHandleSize: 0,
            maxValueSpan: 4,
            minValueSpan: 4,
            brushSelect: false, //刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
          }, {
            type: 'inside',
            yAxisIndex: 0,
            zoomOnMouseWheel: false,  //滚轮是否触发缩放
            moveOnMouseMove: true,  //鼠标滚轮触发滚动
            moveOnMouseWheel: true
          }]

注意dataZoom包含两条，如果只写第一条数据，只能用鼠标拖动滚动条。加上第二条数据，鼠标滚轮就能控制了。

dataZoom放到chartOption中。我使用的是echarts5.0版本。