<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: 0,
    }
});


const options = computed(() => {
    return {
        tooltip: {
            formatter: "{a} <br/>{c} {b}",
        },
        backgroundColor: 'transparent',
        series: [{
            name: "耗电量",
            type: "gauge",
            z: 3,
            min: 0,
            max: 380,
            radius: "85%",
            axisLine: {
                lineStyle: {
                    width: 12,
                    color: [[0.9, "#00b2b9"], [1, "#e60007"], ],
                },
            },
            pointer: {
                itemStyle: {
                    color: "auto",
                },
            },
            axisTick: {
                distance: 1,
                length: 5,
                splitNumber: 5,
                lineStyle: {
                    color: "#464646"
                },
            },
            splitLine: {
                distance: -3,
                length: 12,
                lineStyle: {
                    color: "auto",
                },
            },
            axisLabel: {
                color: "#fbffff",
                distance: 10,
                fontSize: 14,
                fontWeight: "bolder",
            },
            title: {
                offsetCenter: ["0", "30%"],
                textStyle: {
                    fontWeight: "bolder",
                    fontSize: 14,
                    color: "#fbffff",
                },
            },
            detail: {
                formatter: "{value}\n kW·h",
                color: "inherit",
                fontSize: 14,
                textStyle: {
                    fontWeight: "bolder",
                },
            },
            data: [{
                value: prop.data,
            }],
        }, ],
    }
});
</script>

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