<template>
    <div>
        <div :id='echartsId' class='myRadar'></div>
    </div>
</template>

<script>
    export default {
        name: 'BaseGradeRadar',
        props: ['echartsId', 'echartsData'],
        data() {
            return {
                radarData: []
            }
        },
        created() {

        },
        methods: {
            // 计算数组平均值
            getAverage(arr) {
                return arr.reduce((acc, val) => acc + val, 0) / arr.length
            },

            drawLine(radarOpt) {
                let that = this
                let myRadar = this.$echarts.init(
                    document.getElementById(this.echartsId),
                    'chalk'
                )

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: parseInt(radarOpt.index),
                        subtext: '成就指数',
                        left: 'center',
                        top: '46.3%',
                        textStyle: {
                            color: '#F4F8FA',
                            fontWeight: 'bold',
                            fontSize: 34
                        },
                        subtextStyle: {
                            color: '#E7EBEC',
                            fontWeight: 'normal',
                            fontSize: 12,
                            lineHeight: 8
                        }
                    },
                    tooltip: {
                        formatter: function(params) {
                            let result = '得分率' + params.name
                            let subjectList = that.echartsData.subjectName
                            for (let i = 0; i < subjectList.length; i++) {
                                result += '<br>' + params.marker + subjectList[i] + '：' + (params.value[i] * 100).toFixed(2) + '%'
                            }
                            return result
                        }
                    },

                    legend: {
                        itemHeight: 14,
                        selectedMode: false,
                        data: [this.$t('totalAnalysis.echarts_text1'), this.$t('totalAnalysis.echarts_text2'), this.$t('totalAnalysis.echarts_text3')],
                        textStyle: {
                            color: '#fff',
                            padding: [5, 0, 0, 0]
                        },
                        top: 0,
                        right: '4%',
                        orient: 'vertical'

                    },
                    radar: {
                        radius: '70%',
                        splitNumber: 8,
                        center: ['50%', '52%'],
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                opacity: 0.2
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#fff',
                                opacity: 0.2
                            }
                        },
                        indicator: radarOpt.indicator
                    },
                    series: [
                        {
                            name: '高一年级',
                            type: 'radar',
                            symbolSize: 5,
                            areaStyle: {
                                normal: {
                                    shadowBlur: 13,
                                    shadowColor: 'rgba(0,0,0,.2)',
                                    shadowOffsetX: 0,
                                    shadowOffsetY: 10,
                                    opacity: 0
                                }
                            },
                            lineStyle: {
                                normal: {
                                    width: 4
                                }
                            },
                            data: [
                                {
                                    value: radarOpt.RH,
                                    name: this.$t('totalAnalysis.echarts_text1')
                                }
                            ]
                        },
                        {
                            name: '高一年级',
                            type: 'radar',
                            symbolSize: 5,
                            areaStyle: {
                                normal: {
                                    shadowBlur: 13,
                                    shadowColor: 'rgba(0,0,0,.2)',
                                    shadowOffsetX: 0,
                                    shadowOffsetY: 10,
                                    opacity: 0.5
                                }
                            },
                            lineStyle: {
                                normal: {
                                    width: 4
                                }
                            },
                            data: [

                                {
                                    value: radarOpt.average,
                                    name: this.$t('totalAnalysis.echarts_text2')
                                }
                            ]
                        },,
                        {
                            name: '高一年级',
                            type: 'radar',
                            symbolSize: 5,
                            areaStyle: {
                                normal: {
                                    shadowBlur: 13,
                                    shadowColor: 'rgba(0,0,0,.2)',
                                    shadowOffsetX: 0,
                                    shadowOffsetY: 10,
                                    opacity: 0
                                }
                            },
                            lineStyle: {
                                normal: {
                                    width: 4
                                }
                            },
                            data: [

                                {
                                    value: radarOpt.RL,
                                    name: this.$t('totalAnalysis.echarts_text3')
                                }
                            ]
                        }
                    ],
                    color: ['rgba(86,199,60, 1)', 'rgba(0,183,238, 1)', '#b6a2de']
                }

                // 绘制图表
                myRadar.setOption(option)
                window.addEventListener('resize', function() {
                    myRadar.resize()
                })
            }

        },
        mounted() {
            let origin = this.echartsData // 拿到传过来的雷达图数据
            let radarOpt = {}
            radarOpt.index = origin.index
            radarOpt.indicator = []
            radarOpt.RH = []
            radarOpt.RL = []
            radarOpt.average = []
            origin.subjectName.forEach((item, index) => {
                radarOpt.indicator.push({ name: item, max: 1 }) // 雷达图顶点
                radarOpt.RH.push(Math.max.apply(null, origin.AveragePoint[index])) // 最高值
                radarOpt.RL.push(Math.min.apply(null, origin.AveragePoint[index])) // 最低值
                radarOpt.average.push(this.getAverage(origin.AveragePoint[index]).toFixed(2)) // 平均值
            })
            this.drawLine(radarOpt)
        }
    }
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped>
    .myRadar {
        width: 100%;
        height: 380px;
        margin: 0 auto;
        display: block;
        cursor:pointer;
    }
</style>
