//公用饼图
import ReactEcharts from 'echarts-for-react';
import { CSSProperties } from 'react';
interface ChartProps {
  data: any;
  style?: CSSProperties;
  color: string[];
}
const Chart: React.FC<ChartProps> = ({ data, color, style }) => {
  const getOption = () => {
    return {
      color,
      tooltip: {
       
        confine: true,
        borderWidth: '0',
        backgroundColor: 'rgba(73,81,92,.95)', //背景颜色
        textStyle: {
          color: '#fff', //字体颜色
        },
      },
      series: [
        {
          name: '',
          type: 'pie',
          padAngle: 5,
          minAngle: 3, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互。
          radius: ['70%', '88%'],
          label: {
            show: false,
          },
          data: data?.filter((item) => item.value !== 0),
        },
      ],
    };
  };
  return (
    <ReactEcharts
      notMerge={true}
      lazyUpdate={true}
      option={getOption()}
      style={{ ...style }}
    />
  );
};
export default Chart;
