64 lines
1.3 KiB
Vue
64 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useEcharts } from '@/hooks/common/echarts';
|
|
|
|
defineOptions({
|
|
name: 'PieChart'
|
|
});
|
|
|
|
const props = defineProps<{ data?: { name: string; value: number }[]; colors?: string[] }>();
|
|
|
|
const { domRef, updateOptions } = useEcharts(() => ({
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b}: {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
bottom: 3,
|
|
left: 'center',
|
|
icon: 'circle',
|
|
itemWidth: 10,
|
|
itemHeight: 10,
|
|
itemStyle: {
|
|
borderWidth: 0
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
|
|
radius: '65%',
|
|
center: ['50%', '43%'],
|
|
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>
|