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

  const ref = useRef(null)

  const option = useMemo(() => {
    // 排个序 为了颜色显示
    const seriesData = dataSource?.map(item => {
      return {
        name: item.name,
        value: item.count,
      }
    })
    return {
      tooltip: {
        trigger: 'item',
        // formatter: (params:any) => {
        //   return `${params?.data?.name}: ${params?.data?.percent}%`;
        // },
      },
      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,
        },
      ],
    }
  }, [dataSource])

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

export default PieCharts;

