<template>
	<div ref="pie" style="width: 100%; height: 240px;"></div>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed } from 'vue';
	import { init } from 'echarts';

	const pie = ref(null);

	// 设置环形图的数据
	const ageData = [
		{ name: '0-18岁', value: 20 },
		{ name: '19-30岁', value: 30 },
		{ name: '31-45岁', value: 40 },
		{ name: '46岁以上', value: 10 },
	];

	// 使用setup函数创建环形图
	onMounted(() => {
		console.log(pie)
		const aa = init(pie.value)
		const option = {
			legend: {
				orient: 'vertical',
				top: '10%',
				left: 'left'
			},
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b} : {c} ({d}%)',
			},
			series: [
				{
					name: '年龄分布',
					type: 'pie',
					radius: ['40%', '70%'],
					center: ['50%', '50%'],
					data: ageData,
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)',
						},
					},
				},
			],
		};
		aa.setOption(option)
	});
</script>