<!-- 圆饼图 -->
<template>
	<div :id="id" :class="className" :style="{ height, width }" />
</template>

<script setup lang="ts">
import * as echarts from "echarts";

const props = defineProps({
	id: {
		type: String,
		default: "simplePieChart",
		required: true,
	},
	className: {
		type: String,
		default: "chart",
	},
	width: {
		type: String,
		default: "400px",
	},
	height: {
		type: String,
		default: "300px",
	},
	title: {
		type: String,
		default: "",
	},
	// data:[78,88,65,82,65]
	data: {
		type: Array,
		default: [] as Array<number>,
	},
});
/**
 * 配置项
 */
const options = {
	color:["#ed6767","#f6bb34","#8bc86f","#546fc6","#38c6ff"],
	title: {
		text: ["专注力数值","比例"].join("\n"),
		left: "47%",
		top: "40%",
		textStyle: {
			fontSize: "1rem",
			fontWeight: "normal",
			color: "#666666",
		},
		textAlign:"center",
	},
	series: [
		{
			type: "pie",
			radius: ["60%", "90%"],
			avoidLabelOverlap: false,
			label: {show: false,},
			center: ["50%", "50%"],
			data: [
				{ value: props.data?.[0], name: "0-20" },
				{ value: props.data?.[1], name: "21-40" },
				{ value: props.data?.[2], name: "41-60" },
				{ value: props.data?.[3], name: "61-80" },
				{ value: props.data?.[4], name: "81-100" },
			],
		},
	],
};

onMounted(() => {
	// 图表初始化
	const chart = echarts.init(
		document.getElementById(<string>props.id) as HTMLDivElement
	);
	chart.setOption(options);
	// 大小自适应
	window.addEventListener("resize", () => {
		chart.resize();
	});
});
</script>
