import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

const ProcessChart = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const chart = echarts.init(chartRef.current);

    const option = {
      title: [{
        text: '总计',
        left: 'center',
        top: '42%',
        textStyle: {
          color: '#fff',
          fontSize: 20,
          fontWeight: 'normal'
        }
      }, {
        text: '250',
        left: 'center',
        top: '52%',
        textStyle: {
          color: '#fff',
          fontSize: 28,
          fontWeight: 'bold'
        }
      }],
   
      series: [{
        name: '处理进度',
        type: 'pie',
        radius: ['55%', '90%'],
        center: ['50%', '50%'],
        startAngle: 90,
        label: {
          show: true,
          position: 'outside',
          formatter: '{c}',
          color: '#fff',
          fontSize: 14,
          distance: 5
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 10,
          lineStyle: {
            color: '#fff'
          }
        },
        data: [
          { 
            value: 7, 
            name: '待处理',
            itemStyle: {
              color: '#5470c6'
            }
          },
          { 
            value: 243, 
            name: '已处理',
            itemStyle: {
              color: '#3fb950'
            }
          }
        ]
      }]
    };


    chart.setOption(option);
    return () => {
      chart.dispose();
    };
  }, []);

  return (
    <div 
      ref={chartRef} 
      style={{ 
        width: '200px', 
        height: '220px'
      }}
    />
  );
};

export default ProcessChart;