<!-- 圆饼图 -->
<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: "curveLineChart",
		required: true,
	},
	className: {
		type: String,
		default: "chart",
	},
	width: {
		type: String,
		default: "400px",
	},
	height: {
		type: String,
		default: "300px",
	},
	title: {
		type: String,
		default: "",
	},
	// dataSets:[[1,2,5,6,3,4],[6,3,4,1,2,5],[1,2,3,4,5,6]]
	dataSets: {
		type: Array,
		default: [] as Array<number>,
	},
});
/**
 * 配置项
 */
const options = {
	grid: {
		x: "6%",
		y: "22%",
		x2: "0",
		y2: "16%",
	},
	xAxis: {
		type: "category",
	},
	yAxis: {
		type: "value",
		offset: -6,
	},
	legend: {
		data: ["Att(专注度)","Med(放松度)","Amp(和谐度)"],
		top: "6%",
		right: "0",
	},
	color: [
		"#FAB615",
		"#40FF31",
		"#D4327A"
	],
	series: [{
		name: "Att(专注度)",
		type: "line",
		symbol: "none",
		smooth: true,
		data: props.dataSets?.[0],
	},
		{
			name: "Med(放松度)",
			type: "line",
			symbol: "none",
			smooth: true,
			data: props.dataSets?.[1],
		},
		{
			name: "Amp(和谐度)",
			type: "line",
			symbol: "none",
			smooth: true,
			data: props.dataSets?.[2],
		}
	]
};

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