115 lines
2.4 KiB
Vue
115 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?: { name: string; value: number }[]; }>();
|
|
const chartData = ref<{ name: string; value: number; }[]>([]);
|
|
|
|
const { domRef, updateOptions } = useEcharts(() => ({
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b}: {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
bottom: 0,
|
|
left: 'center',
|
|
icon: 'circle',
|
|
itemWidth: 10,
|
|
itemHeight: 10,
|
|
itemStyle: {
|
|
borderWidth: 0
|
|
},
|
|
textStyle: {
|
|
rich: {
|
|
name: {
|
|
padding: [0, 0, 0, 0],
|
|
},
|
|
count: {
|
|
padding: [0, 0, 0, 5],
|
|
fontWeight: 600,
|
|
},
|
|
}
|
|
},
|
|
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: `{a|126}\n{b|总数}`,
|
|
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: ["#2080f0", "#7CC242", "#F5A623"],
|
|
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() {
|
|
updateOptions(opts => {
|
|
const total = props.data?.reduce((sum:number, item:any) => sum + item.count, 0);
|
|
const result:any = props.data?.map((item:any) => ({
|
|
name: item.label,
|
|
value: item.count,
|
|
}));
|
|
chartData.value = result || [];
|
|
opts.title.text = `{a|${total}}\n{b|总数}`;
|
|
opts.series[0].data = result || [];
|
|
return opts;
|
|
});
|
|
}
|
|
|
|
init();
|
|
</script>
|
|
|
|
<template>
|
|
<div ref="domRef" class="w-full h-220px overflow-hidden"></div>
|
|
</template>
|
|
|
|
<style scoped></style>
|