<template>
    <div id="tech-score"></div>
</template>
<script>
import elementResizeDetectorMaker from "element-resize-detector"
export default {
    data() {
        return {
            techScoreGau: undefined,
            option: {
                title: [{
                    text: '82',
                    x: '50%',
                    y: '30%',
                    textAlign: 'center',
                    textStyle: {
                        fontSize: '76',
                        fontWeight: '600',
                        color: '#303030',
                        textAlign: 'center',
                    },
                }, {
                    text: this.$t('home.avgScore'),
                    left: '50%',
                    top: '65%',
                    textAlign: 'center',
                    textStyle: {
                        fontSize: '14',
                        fontWeight: '400',
                        color: '#757575',
                        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: '#dfdfdf',
                    },
                    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('tech-score'))
        this.techScoreGau.setOption(this.option)
        this.erd = elementResizeDetectorMaker()
        this.erd.listenTo(document.getElementById("tech-score"), () => {
            this.$nextTick(() => {
                //监听到事件后执行的业务逻辑
                this.techScoreGau.resize()
            })
        })
    }
}
</script>
<style lang="less" scoped>
#tech-score {
    width: 100%;
    height: 240px;
}
</style>
<style>
</style>