<template>
    <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
    import {defineComponent, PropType, ref, Ref,reactive,watchEffect} from 'vue';
    import {useECharts} from '/@/hooks/web/useECharts';
    
    export default defineComponent({
        name: "Radar",
        props: {
            chartData:{
                type: Array,
                default: () => ([]),
            },
            option:{
                type: Object,
                default: () => ({}),
            },
            width: {
                type: String as PropType<string>,
                default: '100%',
            },
            height: {
                type: String as PropType<string>,
                default: 'calc(100vh - 78px)',
            },
        },
        setup(props) {
            const chartRef = ref<HTMLDivElement | null>(null);
            const {setOptions, echarts} = useECharts(chartRef as Ref<HTMLDivElement>);
            const option = reactive({
                title: {
                    text: '基础雷达图'
                },
                legend: {
                    data: ['文综', '理综']
                },
                radar: {
                    indicator: [
                        { name: '历史', max: 100 },
                        { name: '地理', max: 110 },
                        { name: '生物', max: 120 },
                        { name: '化学', max: 130 },
                        { name: '物理', max: 140 },
                        { name: '政治', max: 150 }
                    ]
                },
                series: [
                    {
                        type: 'radar',
                        data: [
                            {
                                value: [82, 70, 60, 55, 90, 66],
                                name: '文综'
                            }
                        ]
                    }
                ]
            });
            
            watchEffect(() => {
                props.chartData && initCharts();
            });
            
            function initCharts(){
                if(props.option){
                    Object.assign(option,props.option);
                }
                //图例类型
                let typeArr = Array.from(new Set(props.chartData.map(item => (item.type))));
                //雷达数据
                let indicator = Array.from(new Set(props.chartData.map(item => {
                    let {name,max} = item
                    return {name,max}
                })));
              
                let data = [];
                typeArr.forEach(type => {
                    let obj={name:type};
                    let chartArr = props.chartData.filter(item => type === item.type);
                    obj['value'] = chartArr.map(item => (item.value));
                    //data数据
                    data.push(obj);
                })
                option.radar.indicator = indicator;
                option.series[0]['data'] = data;
                setOptions(option);
            }
            return {chartRef};
        }
    });
</script>
