import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts';
import './index.less'

export default function GenderPieChart() {

    const chartRef = useRef(null);

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

            const option = {
                label: {
                    formatter: [
                        '{a|处置总量}',
                        `{b|${155.38}}{x|万吨}`
                    ].join('\n'),
                    rich: {
                        a: {
                            fontFamily: '微软雅黑',
                            fontSize: 16,
                            fontWeight: 400,
                            color: '#BCCEE9',
                        },
                        b: {
                            fontFamily: 'D-DIN',
                            fontSize: 30,
                            fontWeight: 700,
                            color: '#FFFFFF',
                            padding: [8, 8, 0, 0]
                        },
                        x: {
                            fontFamily: '微软雅黑',
                            fontSize: 14,
                            fontWeight: 400,
                            color: '#BCCEE9',
                            padding: [10, 0, 0, 0]
                        },
                    }
                },
                series: [

                    {
                        type: 'pie',
                        radius: ['65%', '70%'],
                        padAngle: 1,
                        silent: true, // 禁用交互
                        itemStyle: {
                            borderRadius: 0
                        },
                        label: {
                            show: true,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 1048, name: '焚烧量', itemStyle: { color: '#FFD055' } },
                            { value: 735, name: '填埋量', itemStyle: { color: '#3BFFA0' } }
                        ]
                    },
                    {
                        type: 'pie',
                        radius: ['45%', '70%'],
                        padAngle: 1,
                        silent: true, // 禁用交互
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {
                                value: 1048,
                                name: '焚烧量',
                                itemStyle: { color: 'rgba(255, 208, 85, .2)' }
                            },
                            {
                                value: 735,
                                name: '填埋量',
                                itemStyle: { color: 'rgba(59, 255, 160, .2)' }
                            }
                        ]
                    }
                ]
            };
            myChart.setOption(option);
        }
    }, []);


    return (
        <div ref={chartRef} style={{ width: 230, height: 230 }} />
    )
}
