DigitalScholl/Learun.Framework.Ultimate V7/Learun.Application.Web/wsbsdt/js/index3.js

//学生到课率预警
var toClassNum = 43;
var toClassBl = $('.toClassBl')
if (toClassNum < 60) {
	toClassBl.addClass('red').height(toClassNum + '%')
} else if (toClassNum >= 60 && toClassNum < 80) {
	toClassBl.addClass('blue').height(toClassNum + '%')
} else if (toClassNum >= 80) {
	toClassBl.addClass('green').height(toClassNum + '%')
}
layui.use('form', function() {
	let form = layui.form;
	form.render()

	//监听select选择 专业总览
	form.on('select(zy)', function(data) {
		console.log("data==");

	});
	//监听select选择 课程总览
	form.on('select(wh)', function(data) {
		console.log("data==");
	
	});

	// 学生成绩预警
	achWarnEchart()

	// 学生逃课预警
	skipEchart()

	//教师年龄比例
	ageEchart()

	//教师学历比例
	eduEchart()

	//专业总览
	majorEchart()
	
	//课程总览
	classEchart()
});

$(window).load(function(){
	$('.index_sec4').height($('.index_sec1').height())
})

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

	option = {
		tooltip: {
			trigger: 'axis'
		},
		
		series: [{
				name: '',
				type: 'pie',
				radius: [42, 57],
				center: ['50%', '50%'],
				hoverAnimation: false,
				zlevel: 2,
				color: ['#59D078', '#8F66E1'],
				data: [{
						value: 10,
						name: '文化课程',
						label: {
							color: '#FFBA14'
						}
					},
					{
						value: 5,
						name: '专业课程',
						label: {
							color: '#4EC5BB'
						}
					}
				]
			},
			{
				name: '',
				type: 'pie',
				radius: [70, 85],
				center: ['50%', '50%'],
				hoverAnimation: false,
				color: ['#ECBD02', '#00E7B9'],
				data: [{
						value: 30,
						name: '精品课程',
						label: {
							color: '#306DF7'
						}
					},
					{
						value: 5,
						name: '普通课程',
						label: {
							color: '#E65331'
						}
					}
				]
			}
		]
	};

	// 使用刚指定的配置项和数据显示图表。
	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: [80, 95],
			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: [{
					value: 10,
					name: '物理',
				},
				{
					value: 5,
					name: '数学',
				},
				{
					value: 15,
					name: '化学',
				},
				{
					value: 15,
					name: '历史',
				},
				{
					value: 5,
					name: '医学',
				},
				{
					value: 15,
					name: '计算机',
				},
				{
					value: 15,
					name: '矿业',
				}
			]
		}, {
			name: '班级总数',
			type: 'pie',
			radius: [50, 65],
			center: ['15%', '50%'],
			label: {
				// show: true
				show: false
			},
			color: ['#59D078', '#57C5F5', '#E7C900'],
			// hoverAnimation: false,
			data: [{
				value: 10,
				name: '班级总数',
			}]
		}, {
			name: '专业教室',
			type: 'pie',
			radius: [50, 65],
			center: ['85%', '50%'],
			label: {
				// show: true
				show: false
			},
			color: ['#3E49E2', '#677BF5', '#67A0F5', '#E7C900'],
			// hoverAnimation: false,
			data: [{
				value: 10,
				name: '教室1',
			}, {
				value: 5,
				name: '教室2',
			}, {
				value: 20,
				name: '教室3',
			}, {
				value: 30,
				name: '教室4',
			}]
		}, ]
	};

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


//教师学历比例
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: [{
					value: 50,
					name: '博士'
				},
				{
					value: 30,
					name: '硕士'
				},
				{
					value: 20,
					name: '本科'
				},
				{
					value: 10,
					name: '专科'
				}
			]
		}]
	};

	// 使用刚指定的配置项和数据显示图表。
	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: 10
			},
			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: [{
					value: 10,
					name: '20~30岁',
				},
				{
					value: 20,
					name: '30~40岁',
				},
				{
					value: 30,
					name: '40~50岁',
				},
				{
					value: 20,
					name: '50~60岁',
				},
				{
					value: 30,
					name: '60岁以上',
				}
			]
		}]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart6.setOption(option);
	window.addEventListener("resize", function() {
		myChart6.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: 75.59,
				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: [{
					value: 10,
					name: '语文',
				},
				{
					value: 5,
					name: '数学',
				},
				{
					value: 15,
					name: '英语',
				},
				{
					value: 15,
					name: '其他',
				}
			]
		}]
	};

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