如何在echarts的垂直滑块上使用鼠标滚轮和键盘滚动？

Question

我需要用鼠标滚轮和键盘垂直滚动一个 echart 组件。我已经尝试过数据缩放配置moveOnMouseWheel 和moveOnMouseWheel，但只能缩放图表。我不希望它放大。垂直滚动条应该用鼠标和键盘上下移动。

演示 - https://codesandbox.io/s/echarts-twb1u?file=/src/datepicker.js:970-995

Answer 1

您必须为内部缩放设置滑块 zoomLock: true 和以下选项：

zoomOnMouseWheel: false,
moveOnMouseMove: true,
moveOnMouseWheel: true

如果您查看Gantt example，您会看到这些设置：

{
    type: 'slider',
    yAxisIndex: 0,
    zoomLock: true,
    width: 10,
    right: 10,
    top: 70,
    bottom: 20,
    start: 95,
    end: 100,
    handleSize: 0,
    showDetail: false,
}, {
    type: 'inside',
    id: 'insideY',
    yAxisIndex: 0,
    start: 95,
    end: 100,
    zoomOnMouseWheel: false,
    moveOnMouseMove: true,
    moveOnMouseWheel: true
}