<template>
    <div id="tech-score"></div>
</template>
<script>
    export default {
        data() {
            return {
                techScoreGau: undefined,
                option: {
                    title: {
                        text: 78,
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            fontWeight: 'bold',
                            color: '#fff',
                            fontSize: '80'
                        }
                    },
                    color: ['#242328'],
                    legend: {
                        show: false,
                        data: []
                    },

                    series: [{
                        name: 'Line 1',
                        type: 'pie',
                        clockWise: true,
                        radius: ['75%', '90%'],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        },
                        hoverAnimation: false,
                        data: [{
                            value: 78,
                            name: '',
                            itemStyle: {
                                normal: {
                                    borderWidth: 10,
                                    color: { // 完成的圆环的颜色
                                        colorStops: [{
                                            offset: 0,
                                            color: '#1CC0F3' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: '#1E82E0' // 100% 处的颜色
                                        }]
                                    },
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    borderColor: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#1CC0F3',
                                    }, {
                                        offset: 1,
                                        color: '#1E82E0'
                                    }])
                                }
                            }
                        }, {
                            name: '',
                            value: 22
                        }]
                    }]
                }
            }
        },
        mounted() {
            this.techScoreGau = this.$echarts.init(document.getElementById('tech-score'))
            this.techScoreGau.setOption(this.option)
        }
    }
</script>
<style lang="less" scoped>
    #tech-score {
        width:100%;
        height:260px;
    }
</style>
<style>
</style>