Не срабатывает прокрутка если добавить дополнительный блок таблицу в диаграмме Гантта Apache Echarts?

Question

[Григорий]

Всем привет!
Нужна помощь по диаграмме Гантта в Apache Echarts/
В целом в примере у echarts есть аналогичная проблема
Если блок находится вне сетки вывода графика, то скролл над ним не срабатывает
https://echarts.apache.org/examples/en/editor.html...

Answer 1

[Григорий]

import { ECharts } from 'echarts';
import { useEffect } from 'react';

import { getDataZoom } from '@opm/shared/echarts';

export const useScrollEChart = (
  echarts: ECharts | undefined,
  dataZoomId: string,
) => {
  useEffect(() => {
    // код ниже для реализации вне React
    if (!echarts) return;
    let startPercent: number;
    let endPercent: number;

    const mouseWheelHandler = (e: WheelEvent) => {
      // тут нужно получить id той оси которую нужно скроллить - тут это реализовано через кастомный хук - но вы можете это сделать как вас будет удобно
      const dataZoom = getDataZoom(echarts, [dataZoomId]);

      startPercent = dataZoom[0].start;
      endPercent = dataZoom[0].end;

      if (e.deltaY > 0 && endPercent < 100) {
        const increment = Math.min(4, 100 - endPercent);
        startPercent += increment;
        endPercent += increment;
      }
      if (e.deltaY < 0 && startPercent > 0) {
        const decrement = Math.min(4, startPercent);
        startPercent -= decrement;
        endPercent -= decrement;
      }

      // передаём параметры для echart dataZoom потому что это единственный способ проскроллить

      echarts.dispatchAction({
        type: 'dataZoom',
        batch: [
          {
            dataZoomId,
            start: startPercent,
            end: endPercent,
          },
        ],
      });
    };

    echarts.getDom()?.addEventListener('wheel', mouseWheelHandler);

    return () => {
      echarts.getDom()?.removeEventListener('wheel', mouseWheelHandler);
    };
  }, [echarts, dataZoomId]);
};