【echarts 】设置datazoom 允许使用鼠标滚轮滚动图表-Toy模板网

这篇具有很好参考价值的文章主要介绍了【echarts 】设置datazoom 允许使用鼠标滚轮滚动图表。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

PS：以下代码示例的配置中，包含了X轴和Y轴（默认只有2个轴，>2个轴的需要自行修改配置）文章来源地址https://www.toymoban.com/news/detail-734401.html

关键代码：

{
      type: 'inside',
      xAxisIndex: 0,
      zoomOnMouseWheel: false, // 滚轮是否触发缩放
      moveOnMouseMove: true, // 鼠标滚轮触发滚动
      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, // 是否显示数据阴影 默认auto
      backgroundColor: '#fff',
      showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
      realtime: true, // 是否实时更新
      filterMode: 'filter',
      handleIcon: 'circle',
      handleStyle: {
        color: '#E8EAEF',
        borderColor: '#E8EAEF',
      },
      // handleSize: '80%',
      moveHandleSize: 0,
      // maxValueSpan: 2,
      // minValueSpan: 2,
      brushSelect: false, // 刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
    },
    {
      type: 'inside',
      yAxisIndex: 0,
      zoomOnMouseWheel: false, // 滚轮是否触发缩放
      moveOnMouseMove: true, // 鼠标滚轮触发滚动
      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, // 是否显示数据阴影 默认auto
      backgroundColor: '#fff',
      showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
      realtime: true, // 是否实时更新
      filterMode: 'filter',
      handleIcon: 'circle',
      handleStyle: {
        color: '#E8EAEF',
        borderColor: '#E8EAEF',
      },
      // handleSize: '80%',
      moveHandleSize: 0,
      // maxValueSpan: 2,
      // minValueSpan: 2,
      brushSelect: false, // 刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
    },
    {
      type: 'inside',
      xAxisIndex: 0,
      zoomOnMouseWheel: false, // 滚轮是否触发缩放
      moveOnMouseMove: true, // 鼠标滚轮触发滚动
      moveOnMouseWheel: true,
    },
  ]