100 lines
2.3 KiB
Vue
100 lines
2.3 KiB
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="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>
|