liug/src/main/webapp/static/big-screen/js/js.js

//响应式布局
$(window).load(function() {
	$(".loading").fadeOut()
})
$(document).ready(function() {
	var whei = $(window).width()
	$("html").css({
		fontSize: whei / 20
	})
	$(window).resize(function() {
		var whei = $(window).width()
		$("html").css({
			fontSize: whei / 20
		})
	});
});
//试验次数
function chart1(data) {
	let myChart = echarts.init(document.getElementById('chart1'));
	let option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: "shadow"
			}
		},
		grid: {
			left: '5%',
			top: '20%',
			right: '5%',
			bottom: '3%',
			containLabel: true
		},
		color: ['#23abca'],
		xAxis: [{
			data: ['2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022'],
			axisLine: options().yAxis.axisLine
		}],
		yAxis: options().yAxis,
		series: [{
				type: 'bar',
				data: [1235, 2300, 1221, 3420, 2321, 1036, 2567, 1700],
				barWidth: '35%', //柱子宽度
				itemStyle: {
					normal: {
						opacity: 1,
						barBorderRadius: [5, 5, 0, 0],
						label: {
							show: true,
							position: 'top',
							textStyle: {
								color: 'rgba(255,255,255,.6)'
							}
						}
					}
				}
			}

		]
	};
	myChart.setOption(option);
	window.addEventListener("resize", function() {
		myChart.resize();
	});
}
//渠道占比
function chart2(data) {
	let myChart = echarts.init(document.getElementById('chart2'));
	let option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: "shadow"
			}
		},
		series: [{
				type: 'pie',
				radius: ['40%', '70%'],
				label: {
					normal: {
						show: true,
						formatter: '{b}: {d}%',
						fontSize: '14',
						textStyle: {
							color: 'rgba(255,255,255,.6)'
						}
					}
				},
				data: [{
					value: 1048,
					name: '已完成'
				}, {
					value: 735,
					name: '未完成'
				}]
			}

		]
	};
	myChart.setOption(option);
	window.addEventListener("resize", function() {
		myChart.resize();
	});
}
//样机信息
function chart3(data) {
	let myChart = echarts.init(document.getElementById('chart3'));
	data = [35, 23, 21, 23, 21, 36, 7, 17, 9];
	let option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: "shadow"
			}
		},
		grid: {
			left: '5%',
			top: '20%',
			right: '5%',
			bottom: '3%',
			containLabel: true
		},
		color: ['#23abca'],
		xAxis: [{
			data: ['2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022'],
			axisLine: options().yAxis.axisLine
		}],
		yAxis: options().yAxis,
		series: [{
				type: 'bar',
				data: [1235, 2300, 1221, 3420, 2321, 1036, 2567, 1700],
				barWidth: '35%', //柱子宽度
				itemStyle: {
					normal: {
						opacity: 1,
						barBorderRadius: [5, 5, 0, 0],
						label: {
							show: true,
							position: 'top',
							textStyle: {
								color: 'rgba(255,255,255,.6)'
							}
						}
					}
				}
			}

		]
	};
	myChart.setOption(option);
	window.addEventListener("resize", function() {
		myChart.resize();
	});
}
//样机改装信息
function chart4(data) {
	let myChart = echarts.init(document.getElementById('chart4'));
	data = [35, 23, 21, 23, 21, 36, 7, 17, 9];
	let option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: "shadow"
			}
		},
		grid: {
			left: '5%',
			top: '20%',
			right: '5%',
			bottom: '3%',
			containLabel: true
		},
		color: ['#23abca'],
		xAxis: [{
			data: ['2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022'],
			axisLine: options().yAxis.axisLine
		}],
		yAxis: options().yAxis,
		series: [{
				type: 'bar',
				data: [1235, 2300, 1221, 3420, 2321, 1036, 2567, 1700],
				barWidth: '35%', //柱子宽度
				itemStyle: {
					normal: {
						opacity: 1,
						barBorderRadius: [5, 5, 0, 0],
						label: {
							show: true,
							position: 'top',
							textStyle: {
								color: 'rgba(255,255,255,.6)'
							}
						}
					}
				}
			}

		]
	};
	myChart.setOption(option);
	window.addEventListener("resize", function() {
		myChart.resize();
	});
}
//设备资产
function chart5(data) {
	let myChart = echarts.init(document.getElementById('chart5'));
	data = [35, 23, 21, 23, 21, 36, 7, 17, 9];
	let option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: "shadow"
			}
		},
		grid: {
			left: '5%',
			top: '20%',
			right: '5%',
			bottom: '3%',
			containLabel: true
		},
		color: ['#23abca'],
		xAxis: [{
			data: ['2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022'],
			axisLine: options().yAxis.axisLine
		}],
		yAxis: options().yAxis,
		series: [{
				type: 'bar',
				data: [1235, 2300, 1221, 3420, 2321, 1036, 2567, 1700],
				barWidth: '35%', //柱子宽度
				itemStyle: {
					normal: {
						opacity: 1,
						barBorderRadius: [5, 5, 0, 0],
						label: {
							show: true,
							position: 'top',
							textStyle: {
								color: 'rgba(255,255,255,.6)'
							}
						}
					}
				}
			}

		]
	};
	myChart.setOption(option);
	window.addEventListener("resize", function() {
		myChart.resize();
	});
}
//能源管理
function chart6(data) {
	let myChart = echarts.init(document.getElementById('chart6'));
	data = [35, 23, 21, 23, 21, 36, 7, 17, 9];
	let option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: "shadow"
			}
		},
		grid: {
			left: '5%',
			top: '20%',
			right: '5%',
			bottom: '3%',
			containLabel: true
		},
		color: ['#23abca'],
		xAxis: [{
			data: ['2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022'],
			axisLine: options().yAxis.axisLine
		}],
		yAxis: options().yAxis,
		series: [{
				type: 'bar',
				data: [1235, 2300, 1221, 3420, 2321, 1036, 2567, 1700],
				barWidth: '35%', //柱子宽度
				itemStyle: {
					normal: {
						opacity: 1,
						barBorderRadius: [5, 5, 0, 0],
						label: {
							show: true,
							position: 'top',
							textStyle: {
								color: 'rgba(255,255,255,.6)'
							}
						}
					}
				}
			}

		]
	};
	myChart.setOption(option);
	window.addEventListener("resize", function() {
		myChart.resize();
	});
}
//向上滚动
function roll(t) {
	//滚动排行1
	let ul1 = document.getElementById("comment1");
	let ul2 = document.getElementById("comment2");
	let ulbox = document.getElementById("marquee-view");
	ul2.innerHTML = ul1.innerHTML;
	ulbox.scrollTop = 0; // 开始无滚动时设为0
	let timer = setInterval(rollStart, t, 1); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
	// 鼠标移入div时暂停滚动
	ulbox.onmouseover = function() {
		clearInterval(timer);
	}
	// 鼠标移出div后继续滚动
	ulbox.onmouseout = function() {
		timer = setInterval(rollStart, t, 1);
	}
	//滚动排行2
	var a2_ul1 = document.getElementById("a2_comment1");
	var a2_ul2 = document.getElementById("a2_comment2");
	var a2_ulbox = document.getElementById("a2_marquee-view");
	a2_ul2.innerHTML = a2_ul1.innerHTML;
	a2_ulbox.scrollTop = 0; // 开始无滚动时设为0
	var timer2 = setInterval(rollStart, t, 2); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
	// 鼠标移入div时暂停滚动
	a2_ulbox.onmouseover = function() {
		clearInterval(timer2);
	}
	// 鼠标移出div后继续滚动
	a2_ulbox.onmouseout = function() {
		timer2 = setInterval(rollStart, t, 2);
	}
}
// 开始滚动函数
function rollStart(index) {
	if (index == 1) {
		// 上面声明的DOM对象为局部对象需要再次声明
		let ul1 = document.getElementById("comment1");
		let ul2 = document.getElementById("comment2");
		let ulbox = document.getElementById("marquee-view");
		// 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
		if (ulbox.scrollTop >= ul1.scrollHeight) {
			ulbox.scrollTop = 0;
		} else {
			ulbox.scrollTop++;
		}
	}
	if (index == 2) {
		let a2_ul1 = document.getElementById("a2_comment1");
		let a2_ul2 = document.getElementById("a2_comment2");
		let a2_ulbox = document.getElementById("a2_marquee-view");
		// 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
		if (a2_ulbox.scrollTop >= a2_ul1.scrollHeight) {
			a2_ulbox.scrollTop = 0;
		} else {
			a2_ulbox.scrollTop++;
		}
	}
}