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 = {
                // title: {
                //     // text: `{a|总共}\n{b|${5.8}}{c|万人}`,
                //     formatter: [
                //         '{a|总共}',
                //         `{b|${5.8}}这段用默认样式{x|万人}`
                //     ].join('\n'),
                //     left: 'center',
                //     top: 'center',
                //     // textStyle.rich()
                //     textStyle: {
                //         a: {
                //             fontSize: 16,
                //             fontWeight: 400,
                //             color: '#BCCEE9',
                //         },
                //         b: {
                //             fontSize: 24,
                //             fontWeight: 700,
                //             color: '#FFFFFF'
                //         },
                //         c: {
                //             fontSize: 14,
                //             fontWeight: 400,
                //             color: '#BCCEE9',
                //         }
                //     }
                // },
                label: {
                    formatter: [
                        '{a|总共}',
                        `{b|${5.8}}{x|万人}`
                    ].join('\n'),
                    rich: {
                        a: {
                            fontFamily: '微软雅黑',
                            fontSize: 16,
                            fontWeight: 400,
                            color: '#BCCEE9',
                        },
                        b: {
                            fontFamily: 'D-DIN',
                            fontSize: 24,
                            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: 'Search Engine', itemStyle: { color: '#FF9155' } },
                            { value: 735, name: 'Direct', itemStyle: { color: '#26D5FF' } }
                        ]
                    },
                    {
                        type: 'pie',
                        radius: ['45%', '70%'],
                        padAngle: 1,
                        silent: true, // 禁用交互
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {
                                value: 1048,
                                name: 'Search Engine',
                                itemStyle: { color: 'rgb(255, 145, 85, .2)' }
                            },
                            {
                                value: 735,
                                name: 'Direct',
                                itemStyle: { color: 'rgb(38, 213, 255, .2)' }
                            }
                        ]
                    }
                ]
            };
            myChart.setOption(option);
        }
    }, []);


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