import ReactEcharts from 'echarts-for-react';
import { CSSProperties, useMemo } from 'react';
const PieChart = ({ style = {} }: { style?: CSSProperties }) => {
  const option = useMemo(() => {
    const data: any = [
      100, 50, 60, 70, 50, 40, 50, 60, 40, 40, 80, 30, 40, 100,
    ];
    const showXAis = false;
    return {
      tooltip: {
        trigger: 'item',
      },
      legend: {
        show: false,
      },

      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['70%', '90%'],
          avoidLabelOverlap: false,
          padAngle: 5,
          itemStyle: {},
          label: {
            show: false,
            position: 'center',
          },

          labelLine: {
            show: false,
          },
          data: [
            {
              value: 1048,
              name: 'Search Engine',
              itemStyle: {
                color: '#29B5FF',
              },
            },
            {
              value: 735,
              name: 'Direct',
              itemStyle: {
                color: '#FFE335',
              },
            },
            {
              value: 580,
              name: 'Email',
              itemStyle: {
                color: '#FF9B5D',
              },
            },
          ],
        },
      ],
    };
  }, []);

  return (
    <ReactEcharts
      option={option} // option：图表配置项
      style={{ width: '118px', height: '118px', ...style }}
    />
  );
};

export default PieChart;
