ECharts.js

/*
 * @Title:
 * @Author: hongmye
 * @Date: 2023-09-27 11:51:16
 */
import { ConfigProvider } from 'antd';
import classNames from 'classnames';
import ReactEcharts from 'echarts-for-react';
import { omit } from 'lodash';
import ResizeObserver from 'rc-resize-observer';
import React, { memo, useMemo, useState } from 'react';
import buildOption from './utils';

const ECharts = memo(
  React.forwardRef((props, ref) => {
    const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext);
    const prefixCls = getPrefixCls('basic-chart');
    const [isShow, setIsShow] = useState('hidden');
    const chartProps = omit(props, ['className', 'option']);

    const option = useMemo(() => {
      return buildOption(props.option);
    }, [props.option]);
    if (ref && ref.current && ref.current.getEchartsInstance) {
      ref.current.getEchartsInstance().clear();
      ref.current.getEchartsInstance().setOption(option);
      ref.current.getEchartsInstance().resize();
    }

    const onResize = ({ width, height }) => {
      if (width && height) {
        setIsShow('visible');
        ref?.current?.getEchartsInstance && ref.current.getEchartsInstance().resize();
      } else {
        setIsShow('hidden');
      }
    };
    return (
      <ResizeObserver onResize={onResize}>
        <div style={{ width: '100%', height: '100%', visibility: isShow }}>
          <ReactEcharts
            ref={ref}
            className={classNames(prefixCls, props.className)}
            style={{ width: '100%', height: '100%' }}
            option={option}
            {...chartProps}
          />
        </div>
      </ResizeObserver>
    );
  }),
);

export default ECharts;