import useEcharts from "@/Hook/useEcharts"
import React from "react"

function Leiji(data: number[]) {
    data = Object.values(data).map((v: number) => v)
    const { Echarts } = useEcharts()
    return <>
        <Echarts style={{ width: '100%', height: 300 }}>
            {
                {
                    tooltip: {
                        formatter: function (data: any) {
                            return `${data.name}<br>消耗\n:\n￥${data.value[0]}<br>充值\n:\n￥${data.value[1]}<br>回本率\n:\n${data.value[2]}%`
                        }
                    },
                    radar: {
                        // shape: 'circle',
                        name: {
                            textStyle: {
                                color: '#fff',
                                backgroundColor: '#999',
                                borderRadius: 3,
                                padding: [3, 5]
                            }
                        },
                        indicator: [
                            { name: '消耗', max: Math.max(...data) },
                            { name: '充值', max: Math.max(...data) },
                            { name: '回本率', max: data[2] < 100 ? 100 : data[2] },

                        ]
                    },
                    series: [{
                        type: 'radar',
                        areaStyle: {},
                        color: 'red',
                        data: [
                            {
                                value: data,
                                name: '累计消耗/充值/回本率'
                            },
                        ]
                    }]
                }
            }
        </Echarts>
    </>
}
export default React.memo(Leiji)
