import React from 'react';
import ReactEcharts from 'echarts-for-react';

interface TypeProps {
    value: Array<Number>;
    indicator: Array<any>;
}

export default function Radar(props: TypeProps) {
    const { value, indicator } = props;
    const option = {
        legend: {
            show: false,
        },
        grid: {
            top: '10%',
            left: 'left',
            right: '10%',
            bottom: 10,
        },
        radar: {
            // shape: 'circle',
            radius: '70%',
            indicator: indicator || [],
            nameGap: 8,
            axisName: {
                color: '#4EFFDA',
            },
            splitLine: {
                lineStyle: {
                    color: '#C7C7C7',
                },
            },
            splitArea: {
                areaStyle: {
                    color: ['#17363D'],
                },
            },
        },
        series: [
            {
                name: '雷达',
                type: 'radar',
                data: [
                    {
                        value: value || [],
                        itemStyle: {
                            color: '#2FE7EE',
                        },
                        areaStyle: {
                            color: '#4EFFDA',
                        },
                    },
                ],
            },
        ],
    };
    return (
        <ReactEcharts
            option={option}
            notMerge
            lazyUpdate
            style={{ height: '100%', width: '100%' }}
        />
    );
}
