<!--
 * @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 ref="ringRef" class="ring" ></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: []
})
const init = () => {
    ringChart = proxy.$echarts.init(ringRef.value, 'dark')
    let option = {
        tooltip: {
            trigger: "item",
        },
        color:['#7CFFB2','#FF6E76','#FDDD60'],
        backgroundColor: '#0E0E0E',
        legend: {
            type: "scroll",
            bottom: "0",
            left: "center",
            textStyle: {
                color: "#fff",
                fontSize: 16,
            },
        },
        series: [
            {
                name: "",
                type: "pie",
                radius: ["40%", "70%"],
                center: ["50%", "45%"],
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    formatter(params) {
                        return `${params.name}:${params.value}台`
                    },
                    fontSize: 20
                },
                labelLine: {
                    show: true,
                },
                top: '5%',
                data: prop.data,
            },
        ],
    }
    ringChart.setOption(option)
}

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

<style scoped>

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