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?: { name: string; value: number; money: number; rate: number }[]; colors?: string[]; range?: string }>();
|
|
|
|
const { domRef, updateOptions } = useEcharts(() => ({
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b}: {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
right: '0%',
|
|
top: 'center',
|
|
icon: 'circle',
|
|
itemWidth: 10,
|
|
itemHeight: 10,
|
|
itemStyle: {
|
|
borderWidth: 0
|
|
},
|
|
textStyle: {
|
|
rich: {
|
|
name: {
|
|
width: 50,
|
|
},
|
|
count: {
|
|
width: 80,
|
|
align: 'right',
|
|
fontWeight: 600,
|
|
},
|
|
rate: {
|
|
align: 'left',
|
|
},
|
|
money: {
|
|
width: 80,
|
|
align: 'right',
|
|
fontWeight: 600,
|
|
},
|
|
}
|
|
},
|
|
formatter: function (name: string) {
|
|
var info = props.data?.find((item: { name: string }) => item.name === name);
|
|
if(info){
|
|
return '{name|'+name+'} {count|'+(info.value)+' 起}{rate|'+(info.rate)+' %} {money|'+(info.money)+' 万元}';
|
|
}else{
|
|
return name;
|
|
}
|
|
}
|
|
},
|
|
title: {
|
|
text: `{a|19}\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: '32%',
|
|
top: '35%',
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
|
|
radius: ['50%', '70%'],
|
|
center: ['35%', '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 => {
|
|
opts.series[0].data = props.data || [];
|
|
opts.series[0].color = props.colors || [];
|
|
return opts;
|
|
});
|
|
}
|
|
|
|
init();
|
|
</script>
|
|
|
|
<template>
|
|
<div ref="domRef" class="w-full h-220px overflow-hidden"></div>
|
|
</template>
|
|
|
|
<style scoped></style>
|