<template>
    <v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
</template>

<script setup>
import { computed, ref } from 'vue';
const prop = defineProps({
    data: {
        type: Number,
        default: 84.3
    }
});


const options = computed(() => {
    return {
        backgroundColor: 'transparent',
        series: [{
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            pointer: { show: false },
            progress: {
                show: true,
                overlap: false,
                roundCap: true,
                clip: false,
                itemStyle: {
                    color: '#58D9F9'
                }
            },
            axisLine: {
                lineStyle: {
                    width: 20
                }
            },
            splitLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            data: [{
                value: prop.data,
                // name: '完成率',
                title: { offsetCenter: ['0%', '0%'] },
                detail: {
                    offsetCenter: ['0%', '0%'], formatter: function (value) {
                        return value.toFixed(1) + '%';
                    }
                },

            }]
        }]
    }
});
</script>

<style lang="scss" scoped></style>