90 lines
2.0 KiB
Vue
90 lines
2.0 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'
|
|
let { t } = useI18n();
|
|
let ringRef = ref();
|
|
let ringChart = null;
|
|
const prop = defineProps({
|
|
data: {
|
|
type: Array,
|
|
default: []
|
|
}
|
|
})
|
|
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%"],
|
|
label: {
|
|
show: true,
|
|
formatter(params) {
|
|
return `${params.name}:${params.value}台`
|
|
},
|
|
fontSize: 18,
|
|
fontWeight: 500,
|
|
},
|
|
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>
|