<!--
 * @FilePath: \code\gitscreenFront\src\views\Mechanics\components\ringChart.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-04-28 08:01:55
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
    <div class="ring" ref="ringRef"></div>
</template>

<script setup lang='ts'>
import { ref, onMounted, onUnmounted, getCurrentInstance,watch,onUpdated } from 'vue'
const { proxy } = getCurrentInstance() as any;
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
let ringRef = ref();
let ringChart = null;
const prop = defineProps({
    data: [],
    total: Number
})
const init = () => {
    ringChart = proxy.$echarts.init(ringRef.value, 'dark')
    let option = {
        title: {
            text: t('messages.设备状态总览'),
            show: true,
            textStyle: {
                color: "#fff",
                fontSize: 20,
            },
            left:'center'
        },
        tooltip: {
            trigger: "item",
        },
        legend: {
            type: "scroll",
            top: "10%",
            left: "center",
            textStyle: {
                color: "#fff",
                fontSize: 16,
            },
        },
        series: [
            {
                name: "",
                type: "pie",
                radius: ["20%", "70%"],
                center: ["50%", "45%"],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 5,
                    // borderColor: '#fff',
                    borderWidth: 2,
                    
                },
                label: {
                    show: true,
                    formatter(params) {
                        return `${params.name} \n${(params.value / prop.total * 100).toFixed(2)}%`
                    },
                    fontSize:20
                },
                labelLine: {
                    show: true,
                },
                top:'20%',
                data: prop.data,
            },
        ],
    }
    ringChart.setOption(option)
}

onUpdated(() => {
    ringChart.setOption({
        series: [
            {
                data: prop.data
            }
        ]
    })
})
onMounted(() => {
    init()
})
</script>

<style scoped>
.ring {
    width: 100%;
    height: 100%;
}
</style>
