react + echarts实现环形进度

子组件 - ProgressCircle.tsx

import * as echarts from 'echarts'
import styled from 'styled-components/macro'
import { px2vh, px2vw } from '@/utils/styleUtils'
import { useEffect, useMemo, useRef, useState } from 'react'

interface Props {
  height?: number
  percent: number
  text?: string
  color: string
}

export function ProgressCircle({ height = 180, percent, text, color }: Props) {
  const chartsNode = useRef(null)
  const [chart, setChart] = useState<echarts.ECharts>()
  useEffect(() => {
    init()
    window.addEventListener('resize', resize)
  }, [percent, text])

  // 指定图表的配置项和数据
  const option = useMemo(() => {
    return {
      series: [
        {
          type: 'pie',
          radius: ['78%', '90%'],
          center: ['50%', '50%'],
          avoidLabelOverlap: false,
          hoverAnimation: false,