86 lines
1.9 KiB
Vue
86 lines
1.9 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 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'
|
||
|
|
import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
|
||
|
|
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",
|
||
|
|
},
|
||
|
|
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>
|