<template>
    <div id="complete-count-box"></div>
</template>
<script>
import elementResizeDetectorMaker from "element-resize-detector"
export default {
    data() {
        return {
            techScoreGau: undefined,
            option: {
                title: [
                    {
                        text: '96',
                        x: '40%',
                        y: '28%',
                        textAlign: 'center',
                        textStyle: {
                            fontSize: '30',
                            fontWeight: '600',
                            color: '#ffffff',
                            textAlign: 'center',
                        },
                    },
                    {
                        text: '/100',
                        x: '58%',
                        y: '38%',
                        textAlign: 'center',
                        textStyle: {
                            fontSize: '12',
                            fontWeight: '600',
                            color: '#ffffff',
                            textAlign: 'center',
                        },
                    },
                    {
                        text: '扫描进度',
                        left: '48%',
                        top: '58%',
                        textAlign: 'center',
                        textStyle: {
                            fontSize: '12',
                            fontWeight: '400',
                            color: '#0FF',
                            textAlign: 'center',
                        },
                    }
                ],
                polar: {
                    radius: ['90%', '75%'],
                    center: ['50%', '50%'],
                },
                angleAxis: {
                    max: 100,
                    show: false,
                },
                radiusAxis: {
                    type: 'category',
                    show: true,
                    axisLabel: {
                        show: false,
                    },
                    axisLine: {
                        show: false,

                    },
                    axisTick: {
                        show: false
                    },
                },
                series: [{
                    name: '',
                    type: 'bar',
                    roundCap: true,
                    barWidth: 60,
                    showBackground: true,
                    backgroundStyle: {
                        color: '#2e2856',
                    },
                    data: [80],
                    coordinateSystem: 'polar',
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: '#585fe1'
                            }, {
                                offset: 1,
                                color: '#0ff'
                            }]),
                        }
                    }
                }
                ]
            }
        }
    },
    mounted() {
        this.techScoreGau = this.$echarts.init(document.getElementById('complete-count-box'))
        this.techScoreGau.setOption(this.option)
        this.erd = elementResizeDetectorMaker()
        this.erd.listenTo(document.getElementById("complete-count-box"), () => {
            this.$nextTick(() => {
                //监听到事件后执行的业务逻辑
                this.techScoreGau.resize()
            })
        })
    }
}
</script>
<style lang="less" scoped>
#complete-count-box {
    width: 200px;
    height: 120px;
}
</style>
<style>
</style>