<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\legionProducts\chart\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 } from 'vue'
const { proxy } = getCurrentInstance() as any;
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
let ringRef = ref();
let ringChart = null;
const init = () => {
    ringChart = proxy.$echarts.init(ringRef.value, 'dark')
    let option = {
        title: {
            text: t('messages.DevType'),
            show: true,
            textStyle: {
                color: "#fff",
                fontSize: 20,
            },
            padding:10
        },
        tooltip: {
            trigger: "item",
        },
        legend: {
            type: "scroll",
            bottom: "5%",
            left: "center",
        },
        series: [
            {
                name: "",
                type: "pie",
                radius: ["20%", "50%"],
                center: ["50%", "45%"],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 5,
                    // borderColor: '#fff',
                    borderWidth: 2,
                },
                label: {
                    show: true,
                    formatter: "{b}: {c}",
                },
                labelLine: {
                    show: true,
                },
                data: [
                    {
                        "value": 7,
                        "name": "老化架",
                        "id": "aging_rack"
                    },
                    {
                        "value": 4,
                        "name": "绘图仪",
                        "id": "graph_plotter"
                    },
                    {
                        "value": 6,
                        "name": "老化台",
                        "id": "aging_table"
                    }
                ],
            },
        ],
    }
    ringChart.setOption(option)
}

onMounted(() => {
    init()
})
</script>

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