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

function Shangyue(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[1]}<br>上月新用户充值\n:\n￥${data.value[3]}<br>上月30日回本率\n:\n${data.value[0]}%<br>上月至今回本率\n:\n${data.value[2]}%`
                        }
                    },
                    radar: {
                        // shape: 'circle',
                        name: {
                            textStyle: {
                                color: '#fff',
                                backgroundColor: '#999',
                                borderRadius: 3,
                                padding: [3, 5]
                            }
                        },
                        indicator: [
                            { name: '30日回本率', max: data[0] < 100 ? 100 : data[0] },
                            { name: '消耗', max: Math.max(...data) },
                            { name: '至今回本率', max: data[2] < 100 ? 100 : data[2] },
                            { name: '充值', max: Math.max(...data) },
                        ]
                    },
                    series: [{
                        type: 'radar',
                        areaStyle: {},
                        color: '#4caf50',
                        data: [
                            {
                                value: data,
                                name: '上月消耗/上月充值/上月30日回本率/上月至今回本率'
                            },
                        ]
                    }]
                }
            }
        </Echarts>
    </>
}
export default React.memo(Shangyue)