<template>
	<!-- 年度使用 -->
	<div id="AnnualUseChart" class="echarts"></div>
</template>

<script setup lang="ts">
import { ECharts, EChartsOption, init } from "echarts";
interface ChartProp {
	label: string;
	value: string[];
}
const initChart = (data: any = {}): ECharts => {
	const charEle = document.getElementById("AnnualUseChart") as HTMLElement;
	const gradientColors = ["rgba(254, 219, 101,0.1)", "rgba(0, 122, 254,0.1)", "rgba(255, 75, 122, 0.1)"];
	const charEch: ECharts = init(charEle);
	const option: EChartsOption = {
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "none"
			},
			borderWidth: 0, //边框线宽
			padding: 0,
			backgroundColor: "transparent",
			formatter: (p: any) => {
				let str = "";
				p.forEach((val: any) => {
					str += `
          <div class="year-item">
            <span class="year-dot" style="background-color: ${val.color};"></span>
            <span class="year-name">${val.seriesName}</span>
            <span class="year-value">${val.data >= 10000 ? (val.data / 10000).toFixed(2) + "w" : val.data}</span>
          </div>
          `;
				});
				let dom = `
                    <div class="annual-tooTip">
                      <span class="annual-month">${p[0].dataIndex + 1}月</span>
                      <div class="annual-list">
                        ${str}
                      </div>
                    </div>
                  `;
				return dom;
			}
		},

		legend: {
			right: "2%",
			top: "0%",
			itemWidth: 15,
			itemHeight: 6,
			align: "auto",
			icon: "rect",
			itemGap: 15,
			textStyle: {
				color: "#ebebf0"
			}
		},
		grid: {
			top: "20%",
			left: "40",
			right: "4%",
			bottom: "15%"
			// containLabel: true
		},
		xAxis: [
			{
				name: "(月份)",
				type: "category",
				boundaryGap: false,
				axisLine: {
					// 坐标轴轴线相关设置。数学上的x轴
					show: true,
					lineStyle: {
						color: "#233653"
					}
				},
				axisLabel: {
					// 坐标轴刻度标签的相关设置
					color: "#7ec7ff",
					padding: 0,
					fontSize: 12,
					formatter: function (data) {
						return data;
					}
				},
				splitLine: {
					show: false,
					lineStyle: {
						color: "#192a44"
					}
				},
				axisTick: {
					show: false
				},
				data: data.columns
			}
		],
		yAxis: {
			name: "(人数)",
			nameTextStyle: {
				color: "#D6DFEA",
				fontSize: 12,
				padding: [0, 30, 0, 0]
			},
			// nameGap:18,
			minInterval: 1,
			// min: 4,
			splitNumber: 5,
			splitLine: {
				show: false,
				lineStyle: {
					color: "#192a44"
				}
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "#233653"
				}
			},
			axisLabel: {
				show: true,
				color: "#B9D6D6",
				padding: 0,
				formatter: function (value: any) {
					if (value >= 10000) {
						value = value / 10000 + "w";
					}
					return value;
				}
			},
			axisTick: {
				show: false
			}
		},
		series: data.data.map((val: ChartProp, index: number) => {
			return {
				name: val.label,
				type: "line",
				symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
				showSymbol: false,
				smooth: true,
				lineStyle: {
					width: 1,
					color: data.colors[index], // 线条颜色
					borderColor: data.colors[index]
				},
				itemStyle: {
					color: data.colors[index],
					borderColor: "#646ace",
					borderWidth: 2
				},
				tooltip: {
					show: true
				},
				areaStyle: {
					// 区域填充样式
					// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
					color: {
						type: "linear",
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{
								offset: 0,
								color: data.colors[index] // 0% 处的颜色
							},
							{
								offset: 1,
								color: gradientColors[index] // 100% 处的颜色
							}
						],
						global: false // 缺省为 false
					},
					shadowColor: "rgba(25,163,223, 0.3)", //阴影颜色
					shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
				},
				data: val.value
			};
		})
	};
	charEch.setOption(option);
	return charEch;
};
defineExpose({
	initChart
});
</script>
<style lang="less" scoped>
.echarts {
	width: 100%;
	height: 100%;
}
:deep(.annual-tooTip) {
	box-sizing: border-box;
	width: 206px;
	height: 103px;
	padding: 5px 20px;
	background: url("../images/contrast-bg.png") no-repeat;
	background-size: 100% 100%;
	.annual-month {
		display: inline-block;
		margin-bottom: 2px;
		font-size: 10px;
		color: #03b8e2;
		transform: scale(0.9);
	}
	.annual-list {
		display: flex;
		flex-direction: column;
		width: 100%;
		.year-item {
			display: flex;
			align-items: center;
			width: 100%;
			height: 22px;
			.year-dot {
				width: 5px;
				height: 5px;
				margin: 0 2px;
				border-radius: 50%;
			}
			.year-name,
			.year-value {
				font-size: 10px;
				color: #03b8e2;
				transform: scale(0.8);
			}
			.year-name {
				margin: 0 2px;
			}
			.year-value {
				display: inline-block;
				width: 25%;
			}
		}
	}
}
</style>
