<template>
    <div class="content-small" ref="pmRef"></div>
</template>

<script setup lang='ts'>
import { getCurrentInstance, ref, defineProps, onMounted, watch } from 'vue';
const { proxy } = getCurrentInstance() as any;
const pmRef = ref();
const prop = defineProps<{
    title: string;
    value: any;
}>();
let myChart = null;
let option = null;
const init = () => {
    myChart = proxy.$echarts.init(pmRef.value);
    option = {
        title: {
            text: prop.title,
            show: true,
            textStyle: {
                color: "#fff",
                fontSize: 20,
            },
        },
        grid: {
            // 让图表占满容器
            top: "100%",
            left: "0px",
            right: "0px",
            bottom: "0px",
        },
        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: "40%",
                    width: 10,
                    offsetCenter: [0, "0%"],
                    itemStyle: {
                        color: "inherit",
                    },
                },
                axisLine: {
                    lineStyle: {
                        width: 8,
                        color: [
                            [0.35, "#7CFFB2"],
                            [0.75, "#FDDD60"],
                            [1, "#FF6E76"],
                        ],
                    },
                },
                axisTick: {
                    distance: -7,
                    splitNumber: 5,
                    lineStyle: {
                        width: 2,
                        color: "#fff",
                        opacity: 0.5,
                    },
                },
                splitLine: {
                    distance: -7,
                    length: 8,
                    lineStyle: {
                        width: 3,
                        color: "#fff",
                        opacity: 0.5,
                    },
                },
                axisLabel: {
                    distance: 12,
                    color: "#999",
                    fontSize: 10,
                },
                anchor: {
                    show: false,
                },
                title: {
                    offsetCenter: [0, "-40%"],
                    color: '#fff'
                },
                detail: {
                    valueAnimation: true,
                    width: "60%",
                    lineHeight: 20,
                    borderRadius: 8,
                    offsetCenter: [0, "20%"],
                    fontSize: 15,
                    fontWeight: "bolder",
                    formatter: "{value} μg/m3",
                    color: "inherit",
                },

                data: [
                    {
                        value: prop.value.two,
                        name: "pm2.5",
                    },
                ],
            },
            {
                type: "gauge",
                center: ["50%", "52%"],
                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%"],
                    color: '#fff'
                },
                data: [
                    {
                        value: prop.value.ten,
                        name: "pm10",

                    },
                ],
            },
        ],
    };
    myChart.setOption(option);
}
watch(() => prop.value, (val) => {
    option.series[0].data[0].value = val.two;
    option.series[1].data[0].value = val.ten;
    myChart.setOption(option);
}, { deep: true })
onMounted(() => {
    init();
})


</script>

<style  scoped>
.content-small {
    width: 100%;
    height: 100%;
}
</style>
