118 lines
2.4 KiB
Vue
118 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useEcharts } from '@/hooks/common/echarts';
|
|
|
|
defineOptions({
|
|
name: 'RingChart'
|
|
});
|
|
|
|
const props = defineProps<{ data: any; }>();
|
|
const chartData = ref<any[]>([]);
|
|
|
|
const { domRef, updateOptions } = useEcharts(() => ({
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b}: {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
bottom: 10,
|
|
left: 'center',
|
|
icon: 'circle',
|
|
itemWidth: 10,
|
|
itemHeight: 10,
|
|
itemStyle: {
|
|
borderWidth: 0
|
|
},
|
|
textStyle: {
|
|
rich: {
|
|
name: {
|
|
padding: [0, 0, 0, 0],
|
|
},
|
|
count: {
|
|
padding: [0, 0, 0, 0],
|
|
},
|
|
}
|
|
},
|
|
formatter: function (name: string) {
|
|
var info = chartData.value?.find((item: { name: string }) => item.name === name);
|
|
if(info){
|
|
return '{name|'+name+'} {count|'+(info.value)+'}';
|
|
}else{
|
|
return name;
|
|
}
|
|
}
|
|
},
|
|
title: {
|
|
text: '',
|
|
textStyle: {
|
|
rich: {
|
|
a: {
|
|
fontSize: 24,
|
|
color: '#333',
|
|
fontWeight: 800,
|
|
align: 'center',
|
|
verticalAlign: 'middle',
|
|
},
|
|
b: {
|
|
fontSize: 12,
|
|
color: '#999',
|
|
align: 'center',
|
|
verticalAlign: 'middle',
|
|
fontWeight: 500,
|
|
padding: [5, 0, 0, 0]
|
|
}
|
|
}
|
|
},
|
|
left: 'center',
|
|
top: '35%',
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
color: ["#f5222d", "#faad14", "#b2bcca"],
|
|
radius: ['45%', '65%'],
|
|
center: ['50%', '45%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: false,
|
|
position: 'outside',
|
|
formatter: '{b}\n{c} ({d}%)',
|
|
fontSize: 12,
|
|
},
|
|
labelLine: {
|
|
show: true,
|
|
length: 10,
|
|
length2: 10
|
|
},
|
|
data: [] as { name: string; value: number }[]
|
|
}
|
|
]
|
|
}));
|
|
|
|
function init() {
|
|
if (!props.data) {
|
|
return;
|
|
}
|
|
updateOptions(opts => {
|
|
const total = props.data.high + props.data.mid + props.data.low;
|
|
const data = [
|
|
{name:'高风险项',value:props.data.high},
|
|
{name:'中风险项',value:props.data.mid},
|
|
{name:'低风险项',value:props.data.low},
|
|
]
|
|
chartData.value = data;
|
|
opts.series[0].data = data;
|
|
opts.title.text = `{a|${total}}\n{b|剩余风险项}`;
|
|
return opts;
|
|
});
|
|
}
|
|
|
|
init();
|
|
</script>
|
|
|
|
<template>
|
|
<div ref="domRef" class="w-full h-200px overflow-hidden"></div>
|
|
</template>
|
|
|
|
<style scoped></style>
|