<!--  脑电评估检测指数分析看板 柱状图 -->
<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: "averageBarChart",
		required: true,
	},
	className: {
		type: String,
		default: "chart",
	},
	width: {
		type: String,
		default: "400px",
	},
	height: {
		type: String,
		default: "400px",
	},
	// dataSets:[[50, 60, 55, 64.5],[55, 90, 70, 82.5]]
	dataSets: {
		type: Array,
		default: [] as Array<number>,
	},
});
/**
 * 配置项
 */
const options = {
	color: ["#f8b865", "#8877ef"],
	grid: {
		left: "10%",
		right: "8%",
		top: "15%",
		bottom: "10%",
	},
	tooltip: {
		show: true,
	},
	legend: {
		data: ["首次检测", "最近检测"],
		top: 0,
		right: "5%"
	},
	xAxis: [
		{
			type: "category",
			//name:"高专注占比",
			data: ["0-10%", "11-20%", "21-30%", "31-45%", "46%以上"],
			axisTick: {
				show: false,
			},
			axisLabel: {
				color: "#09132e",
			},
			axisLine:{
				show:true,
				lineStyle: {
					color: "#aaaaaa",
				},
			},
		},
	],
	yAxis: [
		{
			type: "value",
			name: "人数",
			show: true,
			min: 0,
			max: 18,
			boundaryGap: true,
			axisLine:{
				show:true,
				lineStyle: {
					color: "#aaaaaa",
				},
			},
			axisLabel: {
				color: "#09132e",
			},
			splitNumber: 6,
			axisTick: {
				show: true,
				alignWithLabel: true,
			}
		},
	],
	series: [
		{
			name: "首次检测",
			type: "bar",
			data: props.dataSets?.[0],
			barGap: 0,
			barCategoryGap: "50%",
		},
		{
			name: "最近检测",
			type: "bar",
			data: props.dataSets?.[1],
		},
	],
};

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