import ReactEcharts from 'echarts-for-react';
import { CSSProperties, useEffect, useRef } from 'react';
import * as echarts from 'echarts' 
const CircleCharts = ({
  data,
  style,
}: {
  data: number;
  style?: CSSProperties;
}) => {
  const ref = useRef(null);
  let max = 100;

  let rate = Math.round((data * 100) / max);

  const option = {
    backgroundColor: 'transparent',
    title: [
      {
        text: '{b|' + rate + '%}\n{a|处置率}',
        show: true,
        x: 'center',
        y: 'center',
        textStyle: {
          rich: {
            a: {
              fontSize: 22,
              color: '#cce1ff',
              padding: [10, 0, 35, 0],
              fontFamily: 'DingTalk JinBuTi',
            },
            b: {
              fontSize: 24,
              padding: [30, 0, 0, 0],
              color: '#3fe8ff',
              fontFamily: 'DingTalk JinBuTi',
            },
          },
        },
      },
    ],
    polar: {
      center: ['50%', '50%'],
      radius: ['60%', '75%'],
    },
    angleAxis: {
      max: max,
      show: false,
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: '',
        type: 'bar',
        // roundCap: true,
        showBackground: true,
        backgroundStyle: {
          color: '#738ca8',
        },
        data: [data],
        coordinateSystem: 'polar',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 1,
                color: 'rgb(103, 245, 58)',
              },
              {
                offset: 0,
                color: 'rgb(30, 185, 255)',
              },
            ]),
          },
        },
      },
    ],
  };

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

export default CircleCharts;
