G2Plot

G2Plot缩略轴（slider）的滚轮控制功能

G2Plot的缩略轴目前仅支持通过拖拽的方式来改变视图，业务期望能像echarts那样通过滚轮控制可视区域。通过尝试，发现可以通过chart原型上的onChangeFn控制视图

import {Area} from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
  .then((res) => res.json())
  .then((data) => {
    const area = new Area('container', {
      data,
      xField: 'Date',
      yField: 'scales',
      xAxis: {
        tickCount: 5,
      },
      animation: false,
      slider: {
        start: 0.1,
        end: 0.9,
        trendCfg: {
          isArea: true,
        },
      },
    });
    area.render();

    area.on('slider:mousewheel', (...args) => {

      //原生滚轮事件
      let event = args[0].gEvent.originalEvent
      event.preventDefault();

      //滚轮步长，可自定义
      const step = event.deltaY > 0 ? (1/data.length) : -(1/data.length);

      let start = area.chart.getController('slider').start
      let end = area.chart.getController('slider').end
      if (start <= end) {
        start = (start + step) > 0 ? (start + step) : 0
        end = (end - step) < 1 ? (end - step) : 1
      } else {
        if (step < 0) {
          start = (start + step) > 0 ? (start + step) : 0
          end = (end - step) < 1 ? (end - step) : 1
        }
      }
      area.chart.getController('slider').onChangeFn([start, end])
    })

  });