<template>
    <div id="ac-type-count"></div>
</template>
<script>
import elementResizeDetectorMaker from "element-resize-detector"
export default {
    data() {
        return {
            index: 0,
            typeCountPie: undefined,
            option: {
                backgroundColor: "#27262b",
                legend: {
                    data: [
                        this.$t('home.ac1'),
                        this.$t('home.ac2'),
                        this.$t('home.ac3'),
                        this.$t('home.ac4'),
                        this.$t('home.ac5')
                    ],
                    textStyle: {
                        color: '#DDDDDD',
                        padding: [5, 0, 5, 0]
                    },
                    icon: 'circle',
                    bottom: 10
                },
                grid: {
                    left: '20px',
                    right: '20px',
                    top: '20px',
                    bottom: '20px',
                    containLabel: true
                },
                series: [
                    {

                        name: this.$t('home.countNum'),
                        type: 'pie',
                        top: -60,
                        radius: [95, 120],
                        avoidLabelOverlap: false,
                        legendHoverLink: false,
                        label: {
                            show: false,
                            position: 'center',
                            formatter: function (data) { // 设置圆饼图中间文字排版
                                return data.value + "\n" + data.name
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '24',
                                fontWeight: 'bold'
                            },
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 335, name: this.$t('home.ac1'), itemStyle: { color: "#00f492" } },
                            { value: 310, name: this.$t('home.ac2'), itemStyle: { color: "#fa8d38" } },
                            { value: 234, name: this.$t('home.ac3'), itemStyle: { color: "#f862bb" } },
                            { value: 135, name: this.$t('home.ac4'), itemStyle: { color: "#65dcda" } },
                            { value: 1548, name: this.$t('home.ac5'), itemStyle: { color: "#d6b8ff" } }
                        ],
                        itemStyle: {
                            borderWidth: 5,
                            borderColor: '#2b2a2f'
                        }
                    }
                ]
            }
        }
    },
    created() {

    },
    mounted() {
        this.typeCountPie = this.$echarts.init(document.getElementById('ac-type-count'))
        this.typeCountPie.setOption(this.option)
        this.typeCountPie.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 0 })
        this.typeCountPie.on('mouseover', (e) => {
            this.typeCountPie.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: 0 })
            if (e.dataIndex != this.index) {
                this.typeCountPie.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: this.index })
            }
            if (e.dataIndex == 0) {
                this.typeCountPie.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: e.dataIndex })
            }
        })

        //当鼠标离开时，把当前项置为选中 
        this.typeCountPie.on('mouseout', (e) => {
            this.index = e.dataIndex
            this.typeCountPie.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: e.dataIndex })
        })
        this.erd = elementResizeDetectorMaker()
        this.erd.listenTo(document.getElementById("ac-type-count"), () => {
            this.$nextTick(() => {
                //监听到事件后执行的业务逻辑
                this.typeCountPie.resize()
            })
        })
    }
}
</script>
<style scoped lang="less">
#ac-type-count {
    width: 100%;
    height: 360px;
    display: flex;
    justify-content: center;
}
</style>
<style>
</style>