screenFront/src/views/Mechanics/components/ringChart.vue

<!--
 * @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="container">
        <h2 class="title">
            <DecorationFadeOut>
                &nbsp;{{ t('messages.设备状态总览') }}&nbsp;
            </DecorationFadeOut>
        </h2>
        <div class="ring" ref="ringRef"></div>
    </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'
import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
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 = {
        tooltip: {
            trigger: "item",
        },
        legend: {
            type: "scroll",
            top: "5%",
            left: "center",
            textStyle: {
                color: "#fff",
                fontSize: 16,
            },
        },
        series: [
            {
                name: "",
                type: "pie",
                radius: ["40%", "70%"],
                center: ["50%", "45%"],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    // 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: '10%',
                data: prop.data,
            },
        ],
    }
    ringChart.setOption(option)
}

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

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

.title {
    color: #fff;
    font-size: 20px;
    margin-bottom: 10px;
    text-align: center;
}

.ring {
    width: 100%;
    height: calc(100% - 50px);
}
</style>