<template>
    <div id="ev-score-matrix"></div>
</template>
<script>
import elementResizeDetectorMaker from "element-resize-detector"
export default {
    props: {
        pieData: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            progressPie: undefined,
            option: {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c}' + this.$t('unit.text7')
                },
                title: {
                    "text": this.$t('learnActivity.simple.scoreMat'),
                    "left": "center",
                    "top": 0,
                    "textStyle": {
                        "color": "#FFF",
                        fontSize: 14
                    }
                },
                color: [
                    "#F72459",
                    "#4ECDC4",
                    "#F99406",
                    "#075CD0",
                    "#03C9A8",
                    "#F7CA17",
                    "#F2774B",
                    "#67809F",
                    "#BF55ED",
                    "#1cc0f3",
                    "#19be6b",
                    "#9A1294",
                ],
                series: [
                    {
                        hoverOffset: 5,
                        type: 'pie',
                        radius: '50%',
                        center: ['50%', '50%'],
                        selectedMode: 'single',
                        label: {
                            show: true,
                            position: 'outside',
                            formatter: '{b}\n',
                            rich: {
                                hr: {
                                    backgroundColor: 't',
                                    borderRadius: 100,
                                    width: 0,
                                    height: 4,
                                    padding: [3, 3, 0, -10],
                                    shadowColor: '#1c1b3a',
                                    shadowBlur: 1,
                                    shadowOffsetX: '0',
                                    shadowOffsetY: '2',
                                },
                                a: {
                                    padding: [-35, 15, -20, 5],
                                }
                            }
                        },
                        data: []
                    }
                ]
            }
        }
    },
    mounted() {
        this.progressPie = this.$echarts.init(document.getElementById('ev-score-matrix'))
        this.progressPie.setOption(this.option)
        let _this = this
        let erd11 = elementResizeDetectorMaker()
        erd11.listenTo(document.getElementById("ev-score-matrix"), () => {
            this.$nextTick(() => {
                //监听到事件后执行的业务逻辑
                this.progressPie.resize()
            })
        })
    },
    watch: {
        pieData: {
            handler(n, o) {
                this.$nextTick(() => {
                    if (!this.progressPie) {
                        this.progressPie = this.$echarts.init(document.getElementById('ev-score-matrix'))
                    }
                    this.option.series[0].data = this.pieData.filter(item=>{
                        return item.value > 0
                    })
                    this.progressPie.setOption(this.option)
                })
            },
            deep: true,
            immediate: true
        }
    }
}
</script>
<style scoped lang="less">
#ev-score-matrix {
    width: 400px;
    height: 300px;
}
</style>
<style>
</style>