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

<script setup>
import { computed } from 'vue';
const prop = defineProps({
    data: {
        type: Object,
        default: () => {
            return {
                pm25: 0,
                pm10: 0,
            };
        }
    }
});

const options = computed(() => {
    return {
        grid: {
            // 让图表占满容器
            top: "0px",
            left: "0px",
            right: "0px",
            bottom: "0px",
        },
        backgroundColor: "transparent",
        series: [
            {
                type: "gauge",
                center: ["50%", "90%"],
                startAngle: 190,
                endAngle: -10,
                radius: "50%",
                min: 0,
                max: 100,
                splitNumber: 10,
                pointer: {
                    icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
                    length: "12%",
                    width: 10,
                    offsetCenter: [0, "-40%"],
                    itemStyle: {
                        color: "inherit",
                    },
                },
                axisLine: {
                    lineStyle: {
                        width: 8,
                        color: [
                            [0.35, "#7CFFB2"],
                            [0.75, "#FDDD60"],
                            [1, "#FF6E76"],
                        ],
                    },
                },
                axisTick: {
                    distance: 0,
                    splitNumber: 5,
                    lineStyle: {
                        width: 2,
                        color: "#999",
                    },
                },
                splitLine: {
                    distance: 5,
                    length: 8,
                    lineStyle: {
                        width: 3,
                        color: "#999",
                    },
                },
                axisLabel: {
                    distance: 12,
                    color: "#999",
                    fontSize: 10,
                },
                anchor: {
                    show: false,
                },
                detail: {
                    valueAnimation: true,
                    width: "60%",
                    lineHeight: 20,
                    borderRadius: 8,
                    offsetCenter: [0, "20%"],
                    fontSize: 15,
                    fontWeight: "bolder",
                    formatter: "{value} μg/m3",
                    color: "inherit",
                },
                title: {
                    // show: false,
                    offsetCenter: [0, "-20%"],
                },
                data: [
                    {
                        value: prop.data.pm25,
                        name: "PM2.5",
                    },
                ],
            },
            {
                type: "gauge",
                center: ["50%", "55%"],
                startAngle: 200,
                endAngle: -20,
                min: 0,
                max: 200,
                axisLine: {
                    lineStyle: {
                        width: 10,
                        color: [
                            [0.35, "#7CFFB2"],
                            [0.75, "#FDDD60"],
                            [1, "#FF6E76"],
                        ],
                    },
                },
                pointer: {
                    itemStyle: {
                        color: "inherit",
                    },
                },
                axisTick: {
                    distance: -10,
                    length: 6,
                    lineStyle: {
                        color: "#fff",
                        width: 2,
                    },
                },
                splitLine: {
                    distance: -10,
                    length: 10,
                    lineStyle: {
                        color: "#fff",
                        width: 4,
                    },
                },
                axisLabel: {
                    color: "inherit",
                    distance: 20,
                    fontSize: 10,
                },
                detail: {
                    valueAnimation: true,
                    offsetCenter: [0, "20%"],
                    fontSize: 20,
                    formatter: "{value} μg/m3",
                    color: "inherit",
                },
                title: {
                    offsetCenter: [0, "-50%"],
                },
                data: [
                    {
                        value: prop.data.pm10,
                        name: "PM10",
                    },
                ],
            },
        ],
    };
});
</script>

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