<template>
    <div class="body">
        <div class="knowledge-chart">
            <div id="knowledge"></div>
        </div>
        <div class="score-chart">
            <div id="score"></div>
        </div>
    </div>

</template>
<script>
    export default {
        data() {
            return {
                knowledgeList: [],
                scoreList:[]
            }
        },
        methods: {
            getMap() {
                let myChart = this.$echarts.init(document.getElementById('knowledge'));
                let option = {
                    // backgroundColor: "transparent",
                    //backgroundColor: "#080b30",
                    // 默认色板 数据充足会挨着去色，数据超过颜色值 从头依次循环
                    color: [
                        "red",
                        "#87cefa",
                        "#da70d6",
                        "#32cd32",
                        "#6495ed",
                        "#ff69b4",
                        "#ba55d3",
                        "#cd5c5c",
                        "#ffa500",
                        "#40e0d0",
                        "#1e90ff",
                        "#ff6347",
                        "#7b68ee",
                        "#00fa9a",
                        "#ffd700",
                        "#6699FF",
                        "#ff6666",
                        "#3cb371",
                        "#b8860b",
                        "#30e0e0"
                    ],
                    tooltip: {},
                    radar: {
                        // shape: 'circle',
                        name: {
                            textStyle: {
                                color: "#fff"
                            }
                        },
                        indicator: [
                            { name: "知识", max: 20 },
                            { name: "理解", max: 20 },
                            { name: "应用", max: 20 },
                            { name: "分析", max: 20 },
                            { name: "综合", max: 20 },
                            { name: "评鉴", max: 20 }
                        ],
                        // 外边框的线
                        splitLine: {
                            lineStyle: {
                                color: "#308cf8"
                            }
                        },
                        // 内部 间隔分布颜色
                        splitArea: {
                            show: false
                        },
                        // 内部连接线
                        axisLine: {
                            lineStyle: {
                                color: "rgba(57,103,195,1)"
                            }
                        }
                    },
                    series: [
                        {
                            name: "统计",
                            type: "radar",
                            // areaStyle: {normal: {}},
                            data: [
                                {
                                    value: [12, 12, 11, 12, 11, 12],
                                    name: "一班",
                                    areaStyle: {
                                        opacity: 0.2
                                    }
                                },
                                {
                                    value: [17, 16, 13, 12, 12, 5],
                                    name: "二班",
                                    areaStyle: {
                                        opacity: 0.2
                                    }
                                },
                                {
                                    value: [14, 12, 13, 15, 11, 8],
                                    name: "三班",
                                    // 所属区域透明度 和雷达图数据颜色一致
                                    areaStyle: {
                                        opacity: 0.2
                                    }
                                },
                                {
                                    value: [11, 14, 15, 16, 15, 17],
                                    name: "四班",
                                    areaStyle: {
                                        opacity: 0.2
                                    }
                                }
                            ]
                        }
                    ]
                };
                myChart.setOption(option);
            },
            getChart() {
                let myChart = this.$echarts.init(document.getElementById('score'));
                let option = {
                    //backgroundColor: 'rgba(0,0,0,1)',
                    tooltip: {
                        // trigger: 'item',
                        // formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    calculable: true,
                    series: [
                        {
                            //最小的圈
                            type: 'pie',
                            radius: [30, 50],
                            roseType: 'radius',
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            lableLine: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            itemStyle: {
                                color: 'rgba(255,255,255,.08)'
                            },
                            hoverAnimation: false,
                            data: [100],
                            z: 100
                        },
                        {
                            // name:'半径模式',
                            type: 'pie',
                            radius: [20, 110],
                            center: ['25%', '50%'],
                            roseType: 'radius',
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            lableLine: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },

                        },
                        {
                            // name: '面积模式',
                            type: 'pie',
                            color: [
                                "red",
                                "#87cefa",
                                "#da70d6",
                                "#32cd32",
                                "#6495ed",
                                "#ff69b4",
                                "#ba55d3",
                                "#cd5c5c",
                                "#ffa500",
                                "#40e0d0",
                                "#1e90ff",
                                "#ff6347",
                                "#7b68ee",
                                "#00fa9a",
                                "#ffd700",
                                "#6699FF",
                                "#ff6666",
                                "#3cb371",
                                "#b8860b",
                                "#30e0e0"
                            ],
                            radius: [30, 130],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            label: {
                                normal: {
                                    formatter: function (params) {
                                        return '{white|' + params.name+'}\n{hr|}\n{yellow|' + params.value +'人' + '}\n{blue|' + '}';
                                    },
                                    rich: {
                                        yellow: {
                                            color: "#fff",
                                            fontSize: 14 ,
                                            padding: [8, 0],
                                            align: 'center'
                                        },
                                        white: {
                                            color: "#00B9FC",
                                            align: 'center',
                                            fontSize: 16 ,
                                            padding: [10, 5]
                                        },
                                        blue: {
                                            color: '#49dff0',
                                            fontSize: 14 ,
                                            align: 'center',
                                            padding: [-4, 0]
                                        },
                                        hr: {
                                            borderColor: 'rgba(255,255,255,.1)',
                                            width: '100%',
                                            borderWidth: 1,
                                            height: 0,
                                        }
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    length: 20,
                                    length2: 0,
                                    lineStyle: {
                                        color: 'rgba(255,255,255,.1)'
                                    },
                                    smooth: 0.2
                                }
                            },
                            data: [{
                                value: 15,
                                name: '0-60'
                            },
                            {
                                value: 23,
                                name: '60-70'
                            },
                            {
                                value: 21,
                                name: '70-80'
                            },
                            {
                                value: 17,
                                name: '80-90'
                            },
                            {
                                value: 24,
                                name: '90-100'
                            }
                            ]
                        }
                    ]
                }
                myChart.setOption(option)
            }
        },
        mounted() {
            this.getMap()
            this.getChart()
        }
    }
</script>
<style lang="less" scoped>
    .body{
        width:100%;
        height:400px;
        display:inline-flex;
    }
    #knowledge{
        width:420px;
        height:420px;
        margin-left:100px;
    }  
    #score{
        width:450px;
        height:450px;
        margin-left:50px;
    }
</style>