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

<script>
    export default {
        name: 'helloLine',
        props: ['echartsId'],
        data() {
            return {
                radarData: []
            }
        },
        methods: {
            drawLine(indicator, data) {
				console.log(indicator)
                // 基于准备好的dom，初始化echarts实例
                let that = this
                let myRadar = this.$echarts.init(document.getElementById(this.echartsId), 'chalk')

                // 指定图表的配置项和数据
                var option = {
                    tooltip: {
                        formatter: function(params) {
                            var results = params.marker + that.$t('totalAnalysis.ka_title1') + '<br>'
                            for (var i = 0; i < params.value.length; i++) {
                                results += indicator[i].name + '：' + params.value[i] + '%<br>'
                            }
                            return results
                        }
                    },
					gird:{
					},
                    radar: {
                        triggerEvent: true,
                        name: {
                            textStyle: {
                                color: '#fff',
                                borderRadius: 3,
                                fontSize: 14,
                                padding: [13, 15]
                            }
                        },
                        center: ['45%', '50%'],
                        indicator: indicator,
                        splitArea: {
                            areaStyle: {
                                // color: [
                                //  'rgba(222,134,85, 0.1)', 'rgba(222,134,85, 0.2)',
                                //  'rgba(222,134,85, 0.4)', 'rgba(222,134,85, 0.6)',
                                //  'rgba(222,134,85, 0.8)', 'rgba(222,134,85, 1)'
                                // ].reverse()
                            }
                        },
                        axisLine: { // 指向外圈文本的分隔线样式
                            lineStyle: {
                                color: 'rgba(255,255,255,0.2)'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                width: 2,
                                color: [
                                    'rgba(224,134,82, 0.1)', 'rgba(224,134,82, 0.2)',
                                    'rgba(224,134,82, 0.4)', 'rgba(224,134,82, 0.6)',
                                    'rgba(224,134,82, 0.8)', 'rgba(224,134,82, 1)'
                                ].reverse()
                            }
                        }
                    },
                    series: [
                        {
                            name: '',
                            type: 'radar',
                            itemStyle: {
                                color: '#22CEE7'
                            },
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: '#2cc7cb' // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: '#59b2ef' // 100% 处的颜色
                                        }
                                    ],
                                    global: false // 缺省为 false
                                }
                            },
                            lineStyle: {
                                color: '#9FACE6'
                            },
                            data: [
                                {
                                    value: data,
                                    name: that.$t('totalAnalysis.ka_title1')
                                }
                            ]
                        }
                    ]
                }

                // 绘制图表
                myRadar.setOption(option)
            },

            doRender(data) {
                let list = data
                let indicator = []
				// 获取最大值 +5 设置到雷达边界最大值
				let maxNum = Math.max(...data.per.map(i => Number(i) * 100)) + 5
                list.pointList.forEach(item => {
                    indicator.push({
                        name: item,
                        max: maxNum
                    })
                })
                this.drawLine(indicator, list.per.map(item => (Number(item) * 100).toFixed(2)))
            }
        },
        mounted() {
            if (this.getKnowledgeData) {
                this.doRender(this.getKnowledgeData)
            }
        },

        computed: {
            // 获取最新散点图数据
            getKnowledgeData() {
                let curSubjectIndex = this.$store.state.totalAnalysis.analysisJson.subjects.map(i => i.name).indexOf(this.$store.state.totalAnalysis.currentSubject)
                return this.$store.state.totalAnalysis.analysisJson.pointLevelKey[curSubjectIndex].pointKey
            }
        },
        watch: {
            getKnowledgeData: {
                handler(val) {
                    if (val) {
                        this.doRender(val)
                    }
                }

            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    .myRadar {
        width: 100%;
        height: 420px;
        margin: 50px auto 0 auto;
        display: block;
    }
</style>
