<!-- 圆饼图 -->
<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: "lineChart",
		required: true,
	},
	className: {
		type: String,
		default: "chart",
	},
	width: {
		type: String,
		default: "400px",
	},
	height: {
		type: String,
		default: "300px",
	},
	title: {
		type: String,
		default: "",
	},
	data: {
		type: Array,
		default: [] as Array<number>,
	},
});
/**
 * 配置项
 */
const options = {
	grid: {
		x: "5%",
		y: "5%",
		x2: "8%",
		y2: "10%",
	},
	xAxis: {
		type: "category",
		data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
		boundaryGap: true,
		axisLabel: {
			color: "#09132e",
			interval: (value, index) => { return (index%4)==0;}
		},
		axisLine:{
			show:true,
			lineStyle: {
				color: "#aaaaaa",
			},
		},
		axisTick: {
			show: true,
			alignWithLabel: true,
		}
	},
	yAxis: {
		type: "value",
		max: 100,
		interval: 10,
		axisLabel: {
			color: "#09132e",
		},
		axisLine:{
			show:true,
			lineStyle: {
				color: "#aaaaaa",
			},
		},
		splitNumber: 10,
		axisTick: {
			show: true,
			alignWithLabel: true,
		}
	},
	series: [
		{
			data: [20, 30, 50, 78, 53, 47, 60,30, 50, 78, 53, 47, 60,30, 50, 78, 53, 47, 60],
			type: "line",
			symbol: "circle",
			symbolSize: 10,
			lineStyle:{
				normal:{
					color:{
						type: "linear",
						x:0,
						y:0,
						x2:0,
						y2:1,
						colorStops:[
							{
								offset:0,
								color:"#ffd223",
							},
							{
								offset:1,
								color:"#9685fb",
							},
						]
					}
				}
			}
		}
	],
	visualMap: {
		type: "continuous",
		min: 0,
		max: 100,
		text: ["HIGH", "LOW"],
		realtime: false,
		calculable: false,
		color: ["#ffd223", "#9685fb"],
		itemWidth: 30,
		right: "2%",
		bottom: "5%",
	},
};

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