import { useMemo, useRef } from 'react'
import ReactEcharts from 'echarts-for-react';
const Chart = ({
  data,
  style,
  color,
}: {
  data?: any[];  // 接收数据源
  style?: React.CSSProperties;
  color?: string[]
}) => {

  const ref = useRef(null)

  const option = useMemo(() => {
    const seriesData = data?.map(item => ({
      name: item.ssqy,
      value: item.num
    }))
    return {
      tooltip: {
        trigger: 'item',
        formatter: (params: any) => {
          return `${params?.data?.name}: ${params?.data?.value}`;
        },
      },
      color: color ?? ['#FF9B5D', '#FFE335', '#29B5FF'],
      series: [
        {
          name: '',
          type: 'pie',
          radius: ['65%', '90%'],
          avoidLabelOverlap: false,
          padAngle: 5,
          label: {
            show: false,
            position: 'center',
          },
          labelLine: {
            show: false,
          },
          data: seriesData,
        },
      ],
    }
  }, [data])

  return (
    <ReactEcharts
      ref={ref}
      option={option} // option：图表配置项
      notMerge={true}
      lazyUpdate={true}
      style={style}
    />
  );
};

export default Chart;