import { useMemo, useRef } from 'react'
import ReactEcharts from 'echarts-for-react';
const PieCharts = ({
  style,
  color,
}: {
  style?: React.CSSProperties;
  color?: string[]
}) => {

  const ref = useRef(null)

  const option = useMemo(() => {
    return {
      tooltip: {
        trigger: 'item',
      },
      color: color ?? ['#E16598','#AF6CF1','#67C1E2', '#EDA368'],
      grid: {
        x: 0,
        y: 5,
        x2: 0,
        y2: 10,
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          padAngle: 5,
          label: {
            show: false,
            position: 'center',
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
          ],
        },
      ],
    }
  }, [])

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

export default PieCharts;

