<template>
	<!-- 年龄比例 -->
	<div id="AgeRatioChart" class="echarts"></div>
</template>

<script setup lang="ts">
import { ECharts, EChartsOption, init } from "echarts";
interface ChartProp {
	value: string;
	name: string;
	percentage: string;
}
const initChart = (data: any): ECharts => {
	const charEle = document.getElementById("AgeRatioChart") as HTMLElement;
	const charEch: ECharts = init(charEle);
	/* echarts colors */
	const colors = ["#F6C95C", "#EF7D33", "#1F9393", "#184EA1", "#81C8EF", "#9270CA"];
	const option: EChartsOption = {
		color: colors,
		tooltip: {
			show: true,
			trigger: "item",
			formatter: "{b} <br/>占比：{d}%"
		},
		legend: {
			orient: "vertical",
			right: "20px",
			top: "15px",
			itemGap: 15,
			itemWidth: 14,
			formatter: function (name) {
				let text = "";
				data.forEach((val: ChartProp) => {
					if (val.name === name) {
						text = " " + name + "　 " + val.percentage;
					}
				});
				return text;
			},
			textStyle: {
				color: "#fff"
			}
		},
		grid: {
			top: "bottom",
			left: 10,
			bottom: 10
		},
		series: [
			{
				zlevel: 1,
				name: "年龄比例",
				type: "pie",
				selectedMode: "single",
				radius: [50, 90],
				center: ["35%", "50%"],
				startAngle: 60,
				// hoverAnimation: false,
				label: {
					position: "inside",
					show: true,
					color: "#fff",
					formatter: function (params: any) {
						return params.data.percentage;
					},
					rich: {
						b: {
							fontSize: 16,
							lineHeight: 30,
							color: "#fff"
						}
					}
				},
				itemStyle: {
					shadowColor: "rgba(0, 0, 0, 0.2)",
					shadowBlur: 10
				},
				data: data.map((val: ChartProp, index: number) => {
					return {
						value: val.value,
						name: val.name,
						percentage: val.percentage,
						itemStyle: {
							borderWidth: 10,
							shadowBlur: 20,
							borderColor: colors[index],
							borderRadius: 10
						}
					};
				})
			},
			{
				name: "",
				type: "pie",
				selectedMode: "single",
				radius: [50, 90],
				center: ["35%", "50%"],
				startAngle: 60,
				data: [
					{
						value: 1000,
						name: "",
						label: {
							show: true,
							formatter: "{a|本日总数}",
							rich: {
								a: {
									align: "center",
									color: "rgb(98,137,169)",
									fontSize: 14
								}
							},
							position: "center"
						}
					}
				]
			}
		]
	};
	charEch.setOption(option);
	return charEch;
};
defineExpose({
	initChart
});
</script>
<style lang="less" scoped>
.echarts {
	width: 100%;
	height: 100%;
}
</style>
