PS：以下代碼示例的配置中，包含了X軸和Y軸（默認(rèn)只有2個軸，>2個軸的需要自行修改配置）文章來源地址http://www.zghlxwxcb.cn/news/detail-734401.html

關(guān)鍵代碼：

{
      type: 'inside',
      xAxisIndex: 0,
      zoomOnMouseWheel: false, // 滾輪是否觸發(fā)縮放
      moveOnMouseMove: true, // 鼠標(biāo)滾輪觸發(fā)滾動
      moveOnMouseWheel: true,
    },

完整代碼示例：

dataZoom: [
    {
      // zoomOnMouse
      bottom: 3,
      id: 'dataZoomY',
      // yAxisIndex: [0],
      show: true, // 是否顯示滑動條，不影響使用
      type: 'slider', // 這個 dataZoom 組件是 slider 型 dataZoom 組件
      startValue: 0, // 從頭開始。
      endValue: 7, // 一次性展示5個   7 - 5  9 - 6
      // start: 0,
      // end: 10,
      // width: 6,
      height: 4,
      borderColor: 'transparent',
      fillerColor: '#E8EAEF',
      zoomLock: true,
      showDataShadow: false, // 是否顯示數(shù)據(jù)陰影 默認(rèn)auto
      backgroundColor: '#fff',
      showDetail: false, // 即拖拽時候是否顯示詳細(xì)數(shù)值信息 默認(rèn)true
      realtime: true, // 是否實(shí)時更新
      filterMode: 'filter',
      handleIcon: 'circle',
      handleStyle: {
        color: '#E8EAEF',
        borderColor: '#E8EAEF',
      },
      // handleSize: '80%',
      moveHandleSize: 0,
      // maxValueSpan: 2,
      // minValueSpan: 2,
      brushSelect: false, // 刷選功能，設(shè)為false可以防止拖動條長度改變 ************（這是一個坑）
    },
    {
      type: 'inside',
      yAxisIndex: 0,
      zoomOnMouseWheel: false, // 滾輪是否觸發(fā)縮放
      moveOnMouseMove: true, // 鼠標(biāo)滾輪觸發(fā)滾動
      moveOnMouseWheel: true,
    },
    {
      // zoomOnMouse
      bottom: 3,
      id: 'dataZoomX',
      // yAxisIndex: [0],
      show: true, // 是否顯示滑動條，不影響使用
      type: 'slider', // 這個 dataZoom 組件是 slider 型 dataZoom 組件
      startValue: 0, // 從頭開始。
      endValue: 7, // 一次性展示5個   7 - 5  9 - 6
      // start: 0,
      // end: 10,
      // width: 6,
      height: 4,
      borderColor: 'transparent',
      fillerColor: '#E8EAEF',
      zoomLock: true,
      showDataShadow: false, // 是否顯示數(shù)據(jù)陰影 默認(rèn)auto
      backgroundColor: '#fff',
      showDetail: false, // 即拖拽時候是否顯示詳細(xì)數(shù)值信息 默認(rèn)true
      realtime: true, // 是否實(shí)時更新
      filterMode: 'filter',
      handleIcon: 'circle',
      handleStyle: {
        color: '#E8EAEF',
        borderColor: '#E8EAEF',
      },
      // handleSize: '80%',
      moveHandleSize: 0,
      // maxValueSpan: 2,
      // minValueSpan: 2,
      brushSelect: false, // 刷選功能，設(shè)為false可以防止拖動條長度改變 ************（這是一個坑）
    },
    {
      type: 'inside',
      xAxisIndex: 0,
      zoomOnMouseWheel: false, // 滾輪是否觸發(fā)縮放
      moveOnMouseMove: true, // 鼠標(biāo)滾輪觸發(fā)滾動
      moveOnMouseWheel: true,
    },
  ]

到了這里，關(guān)于【echarts 】設(shè)置datazoom 允許使用鼠標(biāo)滾輪滾動圖表的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！