ReactHooks+TS项目echarts3D立体环形图

echarts3D立体环形图

效果图如下

components 中的echarts/index.tsx

import * as React from 'react';

import classnames from 'classnames';

import * as echarts from 'echarts';

import 'echarts-gl';

import _ from 'lodash';

import { useSize, useUnmount } from 'ahooks';

import Util from '@/common/util';

import style from './style.less';

import { getParametricEquation } from './util';

export type EChartsProps = {
  option: echarts.EChartsOption;
  opts?: {
    devicePixelRatio?: number;
    renderer?: 'canvas' | 'svg';
    useDirtyRect?: boolean;
    width?: number;
    height?: number;
    locale?: any;
  };
  theme?: string | object;
  style?: React.CSSProperties;
  className?: string;
  getContainer?: () => HTMLElement | React.RefObject<HTMLElement>;
  onClick?: (params: any) => void;
  allowListen?: boolean;
  loop?: boolean;
  onmouseover?: () => () => void;
  onmouseout?: () => () => void;
};

type EChartOptionProperty = echarts.EChartsOption[keyof echarts.EChartsOption];

const ECharts = React.forwardRef<echarts.ECharts | undefined, EChartsProps>(
  (props, ref) => {
    const {
      style: $style,
      className,
      option,
      theme,
      opts,
      getContainer,
      onClick,
      allowListen = false,
      loop = false,
      // onmouseover,
      // onmouseout,
    } = props;

    const chartDOMRef = React.useRef<HTMLDivElement>(null);
    const cachedOptionRef = React.useRef<echarts.EChartsOption>();
    const chartInstance = React.useRef<echarts.ECharts>();
    const tooltipRef = React.useRef<NodeJS.Timeout>();

    const { width = 0, height = 0 } = useSize(
      _.isFunction(getContainer)
        ? getContainer()
        : () => chartDOMRef.current?.parentElement || null,
    ) || { width: 0, height: 0 };

    const mergeDefaultProperty = React.useCallback(
      (
        property: EChartOptionProperty,
        defaultProperty: EChartOptionProperty,
      ) => {
        if (_.isArray(property)) {
          return property.map((item) => {
            if (_.isObject(item)) {
              return _.merge({}, defaultProperty, item);
            }
            return item;
          });
        }
        if (!Util.isEmpty(property) && _.isObject(property)) {
          return _.merge({}, defaultProperty, property);
        }
        return property;
      },
      [],
    );

    const mergeDefaultOption = React.useCallback(
      ($option: echarts.EChartsOption) => {
        const defaultOption: echarts.EChartsOption = {
          animation: true,
          animationDuration: 3000,
          grid: {
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            containLabel: true,
          },
        };
        const defaultProperty: echarts.EChartsOption = {
          legend: {
            itemWidth: 16,
            itemHeight: 16,
          },
          series: {
            barWidth: 14,
          },
        };
        const mergeOption: echarts.EChartsOption = _.merge(
          {},
          defaultOption,
          $option,
        );
        Object.keys($option).forEach((key) => {
          if (key in defaultProperty) {
            mergeOption[key] = mergeDefaultProperty(
              $option[key],
              defaultProperty[key],
            );
          } else {
            mergeOption[key] = $option[key];
          }
        });
        return mergeOption;