simple hooks to use echarts

use-echarts.ts

export interface UseEchartsOptions {
  /**
   * render root
   */
  renderRootRef: React.RefObject<HTMLDivElement | HTMLCanvasElement>;
  /**
   * `setOption` 1st param object
   */
  echartsOption: EChartOption;
  /**
   * `setOption` 2nd param object
   */
  echartsSetOptionOpt?: any;
  on?: {
    [eventName: string]: (...params: any[]) => void;
  };
  /**
   *  调试模式
   */
  debug?: boolean;
}

export const useEcharts = (options: UseEchartsOptions) => {
  const { renderRootRef, echartsOption, echartsSetOptionOpt, debug, on: onEventMap } = options;

  const chartInsRef = useRef<ECharts>();

  /**
   * 初始化 echarts
   * 在组件生命周期内只会执行一次，清理一次
   */
  useEffect(() => {
    if (renderRootRef.current) {
      // 如果已经有一个 echarts instance，先 dispose 掉
      if (getInstanceByDom(renderRootRef.current)) {
        console.warn('Element already has a chart instance! Check if there is memory leak.');
        getInstanceByDom(renderRootRef.current).dispose();
      }
      chartInsRef.current = init(renderRootRef.current);

      if (onEventMap) {
        Object.keys(onEventMap).forEach((name) => {
          chartInsRef.current?.on(name, onEventMap[name]);
        });
      }
    }

    return () => {
      chartInsRef.current?.dispose();
    };
  }, []);

  const oldOption = useRef<any>();

  // resiponsive option
  useEffect(() => {
    // use lodash deep camparison

    if (echartsOption && (!oldOption.current || !isEqual(oldOption.current, echartsOption))) {
      if (debug) {
        console.log('set chart option', echartsOption);
      }
      chartInsRef.current?.setOption(echartsOption, echartsSetOptionOpt);
      oldOption.current = echartsOption;
    }
  }, [echartsOption]);

  return { chartInsRef };
};