<template>
    <div id="mark-prog-pie"></div>
</template>
<script>
import elementResizeDetectorMaker from "element-resize-detector"
export default {
    props: {
        count: {
            type: Array,
            default: () => {
                return [0, 0, 0]
            }
        }
    },
    data() {
        return {
            myData: [],
            techScoreGau: undefined,
            option: {
                title: {
                    text: '能力维度选修占比',
                    left: 'center',
                    textStyle: {
                        color: '#516b91',
                        fontSize: 15
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)'
                },
                grid: {
                    bottom: 18,
                    top: 35,
                    right: 10
                },
                legend: {
                    top: 0,
                    left: 10,
                    itemWidth: 10,
                    itemHeight: 10,
                    orient: 'vertical',
                    data: [],
                    textStyle: {
                        color: '#606060',
                        fontSize: 12,
                    },
                },
                series: [
                    {
                        type: 'pie',
                        radius: '70%',
                        center: ['50%', '60%'],
                        selectedMode: 'single',
                        data: [
                            {
                                name: '学情分析',
                                value: 0,
                                itemStyle: {
                                    color: '#319aff'
                                }
                            },
                            {
                                name: '教学设计',
                                value: 0,
                                itemStyle: {
                                    color: '#1bd175'
                                }
                            },
                            {
                                name: '学法指导',
                                value: 0,
                                itemStyle: {
                                    color: '#ffa800'
                                }
                            },
                            {
                                name: '学业评价',
                                value: 0,
                                itemStyle: {
                                    color: '#fa76cd'
                                }
                            }

                        ],
                        label: {
                            show: false
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
        }
    },
    mounted() {
        this.techScoreGau = this.$echarts.init(document.getElementById('mark-prog-pie'))
        this.techScoreGau.setOption(this.option)
        this.erd = elementResizeDetectorMaker()
        this.erd.listenTo(document.getElementById("mark-prog-pie"), () => {
            this.$nextTick(() => {
                //监听到事件后执行的业务逻辑
                this.techScoreGau.resize()
            })
        })
    },
    methods: {
        randomColor() {
            let r = Math.floor(Math.random() * 255);
            let g = Math.floor(Math.random() * 255);
            let b = Math.floor(Math.random() * 255);
            return 'rgba(' + r + ',' + g + ',' + b + ',0.8)'
        }
    },
    watch: {
        count: {
            handler(n, o) {
                if (this.count.length) {
                    console.log('统计数据', this.count)
                    this.option.legend.data = this.count.map(item => {
                        return item.name
                    })
                    this.option.series[0].data.forEach((item, index) => {
                        item.name = this.count[index].name
                        item.value = this.count[index].count
                    })
                    if (this.techScoreGau) {
                        this.techScoreGau.setOption(this.option)
                    } else {
                        this.techScoreGau = this.$echarts.init(document.getElementById('mark-prog-pie'))
                        this.techScoreGau.setOption(this.option)
                    }
                }
            },
            immediate: true,
            deep: true
        }
    }
}
</script>
<style lang="less" scoped>
#mark-prog-pie {
    width: 400px;
    height: 240px;
}
</style>
<style>
</style>