【echarts 】设置datazoom 允许使用鼠标滚轮滚动图表

PS：以下代码示例的配置中，包含了X轴和Y轴（默认只有2个轴，>2个轴的需要自行修改配置）

关键代码：

{
      type: 'inside',
      xAxisIndex: 0,
      zoomOnMouseWheel: false, // 滚轮是否触发缩放
      moveOnMouseMove: true, // 鼠标滚轮触发滚动
      moveOnMouseWheel: true,
    },
1
2
3
4
5
6
7

完整代码示例：

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,
    },
  ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80