$(window).load(function () {
    //导航栏
    $(".headModeList li").eq(0).removeClass("active");
    $(".headModeList li").eq(1).removeClass("active");
    $(".headModeList li").eq(2).addClass("active");
    $(".headModeTxt").find('span').html($(".headModeList li").eq(2).find('a').html());

	//学生到课率预警
	var toClassNum = 20;
	var toClassBl = $('.toClassBl')
	if (toClassNum < 60) {
        toClassBl.addClass('green').height(toClassNum + '%')
	} else if (toClassNum >= 60 && toClassNum < 80) {
		toClassBl.addClass('blue').height(toClassNum + '%')
	} else if (toClassNum >= 80) {
        toClassBl.addClass('red').height(toClassNum + '%')
	}
	//专业总览
	majorEchart()
	
	//课程总览
	classEchart()
	
	//教师年龄比例
	ageEchart()
	
	//教师学历比例
	eduEchart()
	
	// 学生成绩预警
	achWarnEchart()
	
	// 学生逃课预警
	skipEchart()
	
	var layer = null;
	layui.use('form', function() {
		layer = layui.layer;
		let form = layui.form;
	
		// form.render()
		//监听select选择 专业总览
		form.on('select', function(data) {
			console.log(data);
		});
	});


});

//教师学历比例
function eduEchart() {
	var myChart6 = echarts.init(document.getElementById('education'));
	option = {
		tooltip: {
			formatter: function(n) { //"{a} <br/>{b} : {d}({c}%)"
				//console.log(n)
				return n.name + '<br/>' + n.value + '人' + '(' + n.percent + '%)'
			}
		},
		// calculable: true,
		series: [{
			name: '教师学历比例',
			type: 'funnel',
			width: '100%',
			height: '80%',
			x: '0%',
			y: '10%',
			sort: 'ascending',
			label: {
				// show: false,
				position: 'center'
			},
			labelLine: {
				show: false,
			},
			color: ['#F6685E', '#ECBD02', '#67A0F5', '#198BE3', '#F6685E', '#DEBC03', '#0BB56C', '#CB1FA1'],
            data: TeacherByHighestRecord
		}]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart6.setOption(option);
	window.addEventListener("resize", function() {
		myChart6.resize();
	});
}

// 教师年龄比例
function ageEchart() {
	var myChart6 = echarts.init(document.getElementById('age'));

	option = {
		tooltip: {
			trigger: 'item',
			formatter: '{b} : {c}人 ({d}%)'
		},
		legend: {
			// orient: 'vertical',
			textStyle: { //图例文字的样式
				color: '#424242',
				fontSize: 8
			},
			left: 0,
            bottom: 0,
			itemWidth: 8,
			itemHeight: 8,
			data: ['20~30岁', '30~40岁', '40~50岁', '50~60岁', '60岁以上']
		},
		color: ['#00E7B9', '#7486F1', '#FCF13E', '#ECBD02', '#F6685E', '#DEBC03', '#0BB56C', '#CB1FA1'],
		series: [{
			name: '教师年龄比例',
			type: 'pie',
			radius: [30, 50],
			center: ['55%', '50%'],
			label: {
				show: true
			},
			roseType: 'radius',
            data: TeacherByAge
		}],
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart6.setOption(option);
	window.addEventListener("resize", function() {
		myChart6.resize();
	});
}


//课程总览
function classEchart() {
	// 基于准备好的dom，初始化echarts实例
	var myChart3 = echarts.init(document.getElementById('class'));

	option = {
		tooltip: {
            trigger: 'item',
            formatter: '{b} : {c}'
		},
		
		series: [{
				name: '课程分类',
				type: 'pie',
				radius: [42, 57],
				center: ['50%', '50%'],
				hoverAnimation: false,
				zlevel: 2,
				color: ['#59D078', '#8F66E1'],
                data: LessonBySort
			},
			{
				name: '课程类型',
				type: 'pie',
				radius: [70, 85],
				center: ['50%', '50%'],
				hoverAnimation: false,
				color: ['#ECBD02', '#00E7B9'],
                data: LessonByType
			}
		]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart3.setOption(option);
	window.addEventListener("resize", function() {
		myChart3.resize();
	});
}

//专业总览
function majorEchart() {
	var myChart5 = echarts.init(document.getElementById('major'));

	option = {
		tooltip: {
			trigger: 'item',
			formatter: '{b} : {c}'
		},
		series: [{
			name: '专业学生',
			type: 'pie',
			radius: [60, 75],
			center: ['50%', '50%'],
			label: {
				// show: true
				show: false
			},
			color: ['#6C5CEA', '#57C5F5', '#E7C900', '#FF9C95', '#59D078', '#C97FEF', '#ECBD02', '#DF59B8', '#F6685E',
				'#00E7B9', '#7A74F1', '#4A9ADE', '#33F0E5', '#ECBD02', '#DF59B8'
			],
			// hoverAnimation: false,
            data: StuByMajor
		}, {
			name: '班级总数',
			type: 'pie',
			radius: [50, 65],
			center: ['17%', '50%'],
			label: {
				// show: true
				show: false
			},
			color: ['#59D078', '#57C5F5', '#E7C900'],
			// hoverAnimation: false,
			data: [{
                value: ClassInfoTotalNum,
				name: '班级总数',
			}]
		}, {
			name: '专业教室',
			type: 'pie',
			radius: [50, 65],
			center: ['83%', '50%'],
			label: {
				// show: true
				show: false
			},
			color: ['#3E49E2', '#677BF5', '#67A0F5', '#E7C900'],
			// hoverAnimation: false,
			data: [{
                value: ClassRoomTotalNum,
				name: '教室总数',
			}]
		}, ]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart5.setOption(option);
	window.addEventListener("resize", function() {
		myChart5.resize();
	});
    setTimeout(function(){
    myChart5.resize();
    });
}

// 学生逃课预警
function skipEchart() {
	// 基于准备好的dom，初始化echarts实例
	var myChart8 = echarts.init(document.getElementById('skipClass'));

	option = {
		tooltip: {
			formatter: '{a} : {c}%'
		},
		series: [{
			name: '学生逃课预警',
			type: 'gauge',
			radius: "70%",
			center: ["50%", "50%"],
			axisLine: {
				show: true,
				lineStyle: {
					color: [ //表盘颜色
						[0.6, "#0AB56B"], //0-50%处的颜色
						[0.8, "#64CDFE"], //51%-70%处的颜色
						[1, "#E44E4E"], //70%-90%处的颜色
					],
					width: 15 //表盘宽度
				}
			},
			splitLine: {
				show: false,
			},
			axisLabel: {
				show: true,
				formatter: function(v) {
					// console.log(v)
					switch (v + '') {
						case '30':
							return '低';
						case '70':
							return '中';
						case '90':
							return '高';
					}
				},
				distance: -50 //文字离表盘的距离
			},
			axisTick: {
				show: false,
			},
			detail: {
				formatter: "{score|{value}%}",
				offsetCenter: [0, "80%"],
				height: 30,
				rich: {
					score: {
						fontSize: 16
					}
				}
			},
			data: [{
				value: 5,
				name: '',
				label: {
					textStyle: {
						fontSize: 12
					}
				}
			}]
		}]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart8.setOption(option);
	window.addEventListener("resize", function() {
		myChart8.resize();
	});
}

// 学生成绩预警
function achWarnEchart() {
	var myChart5 = echarts.init(document.getElementById('achWarn'));

	option = {
		tooltip: {
			trigger: 'item',
			formatter: '{b} : {c}人({d}%)'
		},
		color: ['#EB5858', '#FB8383', '#FDACAC', '#FECACA', '#FFE2E2', '#DEBC03', '#0BB56C', '#CB1FA1'],
		series: [{
			name: '全校',
			type: 'pie',
			radius: [50, 60],
			center: ['50%', '50%'],
			label: {
				// show: false
			},
			hoverAnimation: false,
            data: StuScoreByMajor
		}]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart5.setOption(option);
	window.addEventListener("resize", function() {
		myChart5.resize();
	});
}