import * as echarts from 'echarts'
import { setOptions, nowSize } from "./echarts";

let sdtj = null
export function setSdtj(ele, dataIn) {

	var option = {
		grid: {
			containLabel: true,
			left: "0%",
			right: "0%",
			top: "5%",
			bottom: "0%",
		},
		tooltip: {
			trigger: 'axis',
			borderColor: "#092B46",
			backgroundColor: "#092B46",
			textStyle: {
				color: "#ddd",
				fontSize: nowSize(12),
				align: 'left'
			}
		},
		xAxis: {
			type: 'category',
			data: Array.from({ length: 24 }, (_, i) => i), // 生成 '0:00' 到 '24:00' 的时间轴
			axisLabel: {
				show: true,
				color: '#aaa',
				fontSize: nowSize(12)
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: 'rgba(100,100,100, 0.2)',
					type: 'solid',
					width: nowSize(0.5)
				}
			},
		},
		yAxis: {
			type: 'value',
			min: 0,
			max: 100,
			axisLabel: {
				show: true,
				color: '#aaa',
				fontSize: nowSize(12)
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: 'rgba(100,100,100, 0.2)',
					type: 'solid',
					width: nowSize(0.5)
				}
			},
		},
		visualMap: {
			show: false, // 不显示 visualMap 组件本身
			min: 0,
			max: 100,
			inRange: {
				color: ['green', 'yellow', 'orange', 'red'] // 颜色平滑过渡：绿 -> 黄 -> 橙 -> 红
			}
		},
		series: [
			{
				name: '繁忙度',
				type: 'line',
				data: [20, 25, 30, 35, 40, 50, 60, 55, 70, 65, 80, 75, 60, 50, 55, 70, 85, 90, 95, 80, 75, 70, 60, 50],  // 24小时示例数据
				smooth: true,
				lineStyle: {
					width: 4
				},
				itemStyle: {
					opacity: 0
				},
				// 配置折线图下方的阴影部分
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 1, color: 'rgba(0, 255, 0, 0.0)' },
						{ offset: 0.5, color: 'rgba(255, 255, 0, 0.2)' },
						{ offset: 0, color: 'rgba(255, 0, 0, 0.4)' }
					])
				}
			}
		]
	};


	sdtj = setOptions(ele, option)
}
