server/WebRoot/charts/visualizedcharts/js/visualizedCharts.js

//定义图表对象
var myChart1 = null;
var myChart2 = null;
var myChart3 = null;
var myChart4 = null;
var myChart5 = null;
var myChart6 = null;
var myChart7 = null;
var myChart8 = null;
$(function() {

	function load() {
		$.ajax({
			url: "c1.htm", async: false, dataType: 'json', success: function(result) {
				industryBar(result.array);
			}
		});

		$.ajax({
			url: "c2.htm", async: false, dataType: 'json', success: function(result) {
				changeChart(result.array);
			}
		});
		$.ajax({
			url: "c3.htm", async: false, dataType: 'json', success: function(result) {
				skillAcquisitionChart(result.array);
			}
		});


//		$.ajax({
//			url: "c4.htm", async: false, dataType: 'json', success: function(result) {
//				pieChart(result.array);
//			}
//		});

		var currentnum = 0; allnum = 0;
		$.ajax({
			url: "allnum.htm", async: false, dataType: 'json', success: function(result) {
				allnum = result.array[0].allnum;
				currentnum = result.array[0].currentnum;
			}
		});
		clocknum(currentnum, 'requiredPeoples');
		clocknum(allnum, 'supplyPeoples');
	}
	load();

	setInterval(function() {
		load();
	}, 10000);


	//roseChart();



	/* $(".digits").numScroll({
			time:5000
	 });*/

});
/**
*	柱形图
*/
function industryBar(data) {
	let xAxisData = data.map(v => v.college);
	let yAxisData = data.map(v => v.currentnum);

	myChart1 = echarts.init(document.getElementById('industryBar'));	// 基于准备好的dom，初始化echarts实例
	var option = {
		title: {
			text: '院系报到数据',
			left: 'center',
			textStyle: { color: '#fff' },
			top: '4%',
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {            // 坐标轴指示器，坐标轴触发有效
				type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		grid: {
			left: '2%',
			right: '4%',
			top: '12%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [
			{
				type: 'category',
				data: xAxisData,
				axisTick: {
					alignWithLabel: false
				},
				axisLabel: {		//x轴文字颜色
					color: '#fff',
					show: true,
					formatter: function(value, index) {
						return value.split('').join('\n');
					}
				},
				axisLine: {		    //x轴线的颜色
					lineStyle: {
						color: ['#fff'],
						width: 1,
						type: 'solid',
						opacity: 0.1
					}
				}
			}
		],
		yAxis: [
			{
				type: 'value',
				axisLabel: {		//y轴文字颜色
					color: '#fff'
				},
				axisLine: {		    //y轴线的颜色
					lineStyle: {
						color: ['#fff'],
						width: 1,
						type: 'solid',
						opacity: 1
					}
				},
				splitLine: {        //网格样式
					show: true,
					lineStyle: {
						color: 'rgba(255,255,255,0.3)',
						width: 1,
						type: 'dashed'
					}
				}
			}
		],
		series: [
			{
				//				name: '直接访问',
				type: 'bar',
				barWidth: '50%',
				itemStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: '#248ff7'
						}, {
							offset: 1,
							color: '#6851f1'
						}]),
						barBorderRadius: 11,
					}
				},
				data: yAxisData
			}
		]
	};
	myChart1.setOption(option, true);	    // 使用刚指定的配置项和数据显示图表。
	$(document).ready(function() {
		myChart1.resize();
	})
	window.addEventListener("resize", function() {
		myChart1.resize();
	});
}

	var app = {
		currentIndex: -1,

	};
	setInterval(function() {
		var dataLen = 15;

		// 取消之前高亮的图形
		myChart1.dispatchAction({
			type: 'downplay',
			seriesIndex: 0,
			dataIndex: app.currentIndex
		});
		app.currentIndex = (app.currentIndex + 1) % dataLen;
		//console.log(app.currentIndex);
		// 高亮当前图形
		myChart1.dispatchAction({
			type: 'highlight',
			seriesIndex: 0,
			dataIndex: app.currentIndex,
		});
		// 显示 tooltip
		myChart1.dispatchAction({
			type: 'showTip',
			seriesIndex: 0,
			dataIndex: app.currentIndex
		});
	}, 1000);


/**
*折线图
*/
function changeChart(data) {
	let x = data.map(v => v.name);
	let d1 = data.map(v => v.d1);
	let d2 = data.map(v => v.d2);

	myChart2 = echarts.init(document.getElementById('changeLine'));
	var option = {
		title: {
			text: '报到接种疫苗',
			left: 'center',
			show:false,
			textStyle: { color: '#fff' },
			top: '4%',
		},
		grid: {
			left: '2%',
			right: '4%',
			top: '8%',
			bottom: '3%',
			containLabel: true
		},
		legend: {
			data: ['已报到', '已接种'],
			textStyle: { color: '#fff' },
			right: '4%',
			top: '3%',
			bottom: '5%',
		},
		xAxis: {
			type: 'category',
			data: x,
			axisLabel: {		//x轴文字颜色
				color: '#fff',
				interval: 0,
				// rotate:"45"
			},
			axisLine: {		    //x轴线的颜色
				lineStyle: {
					color: ['#fff'],
					width: 1,
					type: 'solid',
					opacity: 0.1
				}
			}
		},
		yAxis: {
			type: 'value',
			axisLabel: {		//x轴文字颜色
				color: '#fff'
			},
			axisLine: {		    //x轴线的颜色
				lineStyle: {
					color: ['#fff'],
					width: 1,
					type: 'solid',
					opacity: 0.1
				}
			},
			splitLine: {        //网格样式
				show: true,
				lineStyle: {
					color: 'rgba(255,255,255,0.1)',
					width: 1,
					type: 'dashed'
				}
			}
		},
		color: ['#01dee1', "#ed3f35"],        //曲线颜色
		series: [{
			name: '已报到',
			type: 'bar',
			data: d1,
			label: {
				show: true
			},
			itemStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: '#0090FF'
					}, {
						offset: 1,
						color: '#0090FF'
					}]),
					barBorderRadius: 11,
				}
			}
		}, {
			name: '已接种',
			type: 'bar',
			data: d2,
			label: {
				show: true
			},
			itemStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: '#ff3300'
					}, {
						offset: 1,
						color: '#ff3333'
					}]),
					barBorderRadius: 11,
				}
			}
		}]
	};
	myChart2.setOption(option, true);	    // 使用刚指定的配置项和数据显示图表。
	$(document).ready(function() {
		myChart2.resize();
	})
	window.addEventListener("resize", function() {
		myChart2.resize();
	});
}
/**
*饼形图 
*/
function ageTrendPie() {
	myChart3 = echarts.init(document.getElementById('agePie'));
	var option = {
		title: {
			text: '年龄分析',
			left: 'center',
			textStyle: { color: '#fff' },
			top: '4%',
		},
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b}: {c} ({d}%)'
		},
		grid: {
			left: '3%',
			right: '4%',
			top: '35%',
			bottom: '3%'
		},
		legend: {
			orient: 'vertical',
			left: 10,
			data: ['16岁', '17岁', '18岁', '19岁', '20岁', '21岁以上'],
			textStyle: {
				color: '#fff'
			}
		},
		series: [
			{
				name: '年龄占比',
				type: 'pie',
				radius: ['50%', '70%'],
				avoidLabelOverlap: true,
				label: {
					show: false,
					position: 'center'
				},
				emphasis: {
					label: {
						show: true,
						fontSize: '30',
						fontWeight: 'bold'
					}
				},
				labelLine: {
					show: false
				},
				itemStyle: {
					normal: {
						label: {
							show: true,
							formatter: '{b} \n ({d}%)'
						}
					}
				},
				color: ['#10606b', '#0696ab', '#06a0ab', '#86c9f4', '#4da8ec', '#3a91d2', '#005fa6', '#315f97'],
				data: [
					{ value: 999, name: '16岁' },
					{ value: 2000, name: '17岁' },
					{ value: 1548, name: '18岁' },
					{ value: 1548, name: '19岁' },
					{ value: 1548, name: '20岁' },
					{ value: 1548, name: '21岁以上' }
				]
			}
		]
	};
	myChart3.setOption(option, true);	    // 使用刚指定的配置项和数据显示图表。
	$(document).ready(function() {
		myChart3.resize();
	})
	window.addEventListener("resize", function() {
		myChart3.resize();
	});
}

/**
*柱形图
*/
function skillAcquisitionChart(cost) {
	//var cost = [1679, 78, 60, 34, 70,80,90]//本期比上期（大于1按1处理）
	var totalCost = [1679, 1679, 1679, 1679, "1679", "1679", "1679"]//比例综合
	var visits = [1679, 1679, 1679, 1679, "1679", "1679", "1679"]//本期占总的百分比*100
	var grade = ['招生处', '医务室', '保卫处', '学工部', '组织部', '公寓', '院系办公室'];
	var myColor = ['#21BF57', '#56D0E3', '#1089E7', '#F8B448', '#F57474',];
	var data = {
		grade: grade,
		cost: cost,
		totalCost: totalCost,
		visits: visits
	};
	var option = {
		title: {
			top: '4%',
			left: 'center',
			text: '节点报到数据',
			textStyle: {
				align: 'center',
				color: '#fff'
			}
		},
		grid: {
			left: '50',
			right: '35',
			bottom: '20'
		},
		xAxis: {
			show: false,
		},
		yAxis: {
			type: 'category',
			inverse: true,//倒
			axisLabel: {
				margin: 20,
				show: true,
				color: '#4DCEF8',
				fontSize: 12,

				formatter: function(value, index) {
					return  value.split('').join('\n');
				}
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				show: false,
			},
			data: data.grade
		},
		series: [{//外层边框
			type: 'bar',
			barGap: '-65%',
			label: {
				normal: {
					show: true,
					position: 'right',
					color: '#fff',
					fontSize: 14,
					formatter:
						function(param) {
							return data.visits[param.dataIndex];
						},
				}
			},
			barWidth: '50%',
			itemStyle: {
				normal: {
					borderColor: '#4DCEF8',
					borderWidth: 2,
					barBorderRadius: 12,
					color: 'rgba(102, 102, 102,0)'
				},
			},
			z: 1,
			data: data.totalCost,
			// data: da
		}, {//柱形图占比
			type: 'bar',
			barGap: '-85%',
			barWidth: '35%',
			itemStyle: {
				normal: {
					barBorderRadius: 14,
					color: function(params) {
						var num = myColor.length;
						return myColor[params.dataIndex % num]
					},
				}
			},
			max: 1,
			label: {
				normal: {
					show: true,
					position: 'inside',
					formatter: '{c}'
				}
			},
			labelLine: {
				show: true,
			},
			z: 2,
			data: data.cost,
		}]
	}
	myChart4 = echarts.init(document.getElementById('skillAcquisitionBar'));
	myChart4.setOption(option, true);
	$(document).ready(function() {
		myChart4.resize();
	})
	window.addEventListener("resize", function() {
		myChart4.resize();
	});
}

/**
*折线图 
*/
function playCounts(echartData) {
	let bgColor = "#fff";
	let color = [
		"#0090FF",
		"#36CE9E",
		"#FFC005",
		"#FF515A",
		"#8B5CFF",
		"#00CA69"
	];


	let xAxisData = echartData.map(v => v.name);
	//  ["1", "2", "3", "4", "5", "6", "7", "8"]
	let yAxisData1 = echartData.map(v => v.value1);
	// [100, 138, 350, 173, 180, 150, 180, 230]
	let yAxisData2 = echartData.map(v => v.value2);
	// [233, 233, 200, 180, 199, 233, 210, 180]
	let yAxisData3 = [233, 233, 200, 180, 199, 233, 210, 180];
	const hexToRgba = (hex, opacity) => {
		let rgbaColor = "";
		let reg = /^#[\da-f]{6}$/i;
		if (reg.test(hex)) {
			rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
				"0x" + hex.slice(3, 5)
			)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
		}
		return rgbaColor;
	}
	/////////////////////
	var option = {
		title: {
			top: '4%',
			left: 'center',
			text: '本硕博 ',
			textStyle: {
				align: 'center',
				color: '#fff'
			}
		},
		legend: {
			right: 10,
			top: 10,
			textStyle: {
				color: "#fff"
			}
		},
		tooltip: {
			trigger: "axis",
			formatter: function(params) {
				let html = '';
				params.forEach(v => {
					console.log(v)
					html += `<div style="color: #666;font-size: 14px;line-height: 24px">
					<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
					${v.seriesName}.${v.name}
					<span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
					`;
				})
				return html
			},
			extraCssText: 'border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
			axisPointer: {
				type: 'shadow',
				shadowStyle: {
					color: '#ffffff',
					shadowColor: 'rgba(225,225,225,1)',
					shadowBlur: 5
				}
			}
		},
		grid: {
			top: 70,
			bottom: 10,
			containLabel: true
		},
		xAxis: [{
			type: "category",
			boundaryGap: false,
			axisLabel: {
				formatter: '{value}',
				textStyle: {
					color: "#fff",
					opacity: 1
				}
			},
			axisLine: {
				lineStyle: {
					color: "#D9D9D9"
				}
			},
			data: xAxisData
		}],
		yAxis: [{
			type: "value",
			//name: '单位：人 ',
			axisLabel: {
				textStyle: {
					color: "#fff"
				}
			},
			nameTextStyle: {
				color: "#fff",
				fontSize: 12,
				lineHeight: 40
			},
			splitLine: {        //网格样式
				show: true,
				lineStyle: {
					color: 'rgba(255,255,255,0.1)',
					width: 1,
					type: 'dashed'
				}
			},

			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			}
		}],
		series: [{
			name: "硕士",
			type: "line",
			smooth: true,
			// showSymbol: false,/
			symbolSize: 8,
			zlevel: 3,
			lineStyle: {
				normal: {
					color: color[0],
					shadowBlur: 3,
					shadowColor: hexToRgba(color[0], 0.5),
					shadowOffsetY: 8
				}
			},
			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(
						0,
						0,
						0,
						1,
						[{
							offset: 0,
							color: hexToRgba(color[0], 0.3)
						},
						{
							offset: 1,
							color: hexToRgba(color[0], 0.1)
						}
						],
						false
					),
					shadowColor: hexToRgba(color[0], 0.1),
					shadowBlur: 10
				}
			},
			data: yAxisData1
		}, {
			name: "博士",
			type: "line",
			smooth: true,
			// showSymbol: false,
			symbolSize: 8,
			zlevel: 3,
			lineStyle: {
				normal: {
					color: color[1],
					shadowBlur: 3,
					shadowColor: hexToRgba(color[1], 0.5),
					shadowOffsetY: 8
				}
			},
			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(
						0,
						0,
						0,
						1,
						[{
							offset: 0,
							color: hexToRgba(color[1], 0.3)
						},
						{
							offset: 1,
							color: hexToRgba(color[1], 0.1)
						}
						],
						false
					),
					shadowColor: hexToRgba(color[1], 0.1),
					shadowBlur: 10
				}
			},
			data: yAxisData2
		}, {
			name: "本科",
			type: "line",
			smooth: true,
			// showSymbol: false,
			symbolSize: 8,
			zlevel: 3,
			lineStyle: {
				normal: {
					color: color[1],
					shadowBlur: 3,
					shadowColor: hexToRgba(color[2], 0.5),
					shadowOffsetY: 8
				}
			},
			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(
						0,
						0,
						0,
						1,
						[{
							offset: 0,
							color: hexToRgba(color[2], 0.3)
						},
						{
							offset: 1,
							color: hexToRgba(color[2], 0.1)
						}
						],
						false
					),
					shadowColor: hexToRgba(color[2], 0.1),
					shadowBlur: 10
				}
			},
			data: yAxisData3
		}

		]
	};
	myChart5 = echarts.init(document.getElementById('playCounts'));
	myChart5.setOption(option, true);
	myChart5.on("click", function (params) {
		console.log(params.name);
		
	});
	$(document).ready(function() {
		myChart5.resize();
	})
	window.addEventListener("resize", function() {
		myChart5.resize();
	});
}

/**
*饼图
*/
function pieChart(data) {
	let legend = data.map(v => v.name);
	var option = {
		color: ['#6328af', '#0090FF', '#36CE9E', '#3a91d2', '#06a0ab', '#86c9f4'],
		title: {
			text: '本硕博',
			left: 'center',
			top: '4%',
			textStyle: {
				color: '#fff'
			}
		},
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b} : {c} ({d}%)'
		},
		legend: {
			left: 'center',
			top: 'bottom',
			show: false,
			data: legend,
			textStyle: {
				color: '#fff'
			}
		},
		toolbox: {
			show: true
		},
		series: [
			{
				name: '半径模式',
				type: 'pie',
				radius: [50, 100],
				center: ['50%', '50%'],
				label: {
					show: true
				},
				emphasis: {
					label: {
						show: true
					}
				},
				data: data
			}
		]
	};
	myChart7 = echarts.init(document.getElementById('playCounts'));
	myChart7.setOption(option);
	$(document).ready(function() {
		myChart7.resize();
	})
	window.addEventListener("resize", function() {
		myChart7.resize();
	});
}

/**
*	玫瑰图-地区分布
*/
function roseChart() {
	var option = {
		color: ['#1d9dff', '#006cff', '#60cda0', '#ed8884', '#8b78f6', '#3a91d2', '#06a0ab', '#86c9f4'],
		title: {
			text: '地区分布',
			left: 'center',
			top: '4%',
			textStyle: {
				color: '#fff'
			}
		},
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b} : {c} ({d}%)'
		},
		legend: {
			left: 'center',
			top: 'bottom',
			data: ['北京', '天津', '上海', '深圳', '广州', '厦门', '珠海', '西安'],
			textStyle: {
				color: '#fff'
			}
		},
		toolbox: {
			show: true,
			feature: {
				mark: { show: true },
				dataView: { show: true, readOnly: false },
				magicType: {
					show: true,
					type: ['pie', 'funnel']
				},
				restore: { show: true },
				saveAsImage: { show: true }
			}
		},
		series: [
			{
				name: '半径模式',
				type: 'pie',
				radius: [15, 90],
				center: ['50%', '50%'],
				roseType: 'radius',
				label: {
					show: true
				},
				emphasis: {
					label: {
						show: true
					}
				},
				data: [
					{ value: 10, name: '北京' },
					{ value: 15, name: '天津' },
					{ value: 15, name: '上海' },
					{ value: 25, name: '深圳' },
					{ value: 20, name: '广州' },
					{ value: 35, name: '厦门' },
					{ value: 30, name: '珠海' },
					{ value: 40, name: '西安' }
				]
			}
		]
	};
	myChart6.setOption(option);
	$(document).ready(function() {
		myChart6.resize();
	})
	window.addEventListener("resize", function() {
		myChart6.resize();
	});
}


/**
*LED液晶屏数字字符效果
*/
function showLEDNumber(value, id) {
	var htmlArr = [];
	var len = value.length;
	for (var i = 0; i < len; i++) {
		var number = value.charAt(i);
		htmlArr.push('<div class="clock c' + number + '" >');
		htmlArr.push('<div class="v n1"><div class="u"></div><div class="d"></div></div>');
		htmlArr.push('<div class="v n2"><div class="u"></div><div class="d"></div></div>');
		htmlArr.push('<div class="h n3"><div class="l"></div><div class="r"></div></div>');
		htmlArr.push('<div class="v n4"><div class="u"></div><div class="d"></div></div>');
		htmlArr.push('<div class="v n5"><div class="u"></div><div class="d"></div></div>');
		htmlArr.push('<div class="h n6"><div class="l"></div><div class="r"></div></div>');
		htmlArr.push('<div class="h n7"><div class="l"></div><div class="r"></div></div>');
		htmlArr.push('</div>');
	}
	$("#" + id).html(htmlArr.join(""));
}

function clocknum(num, id) {
	$('#' + id).empty();
	var html = '';
	var strarr = num.toString().split('');
	var digit_to_name = 'zero one two three four five six seven eight nine'.split(' ');
	for (var i = 0; i < strarr.length; i++) {
		if (strarr[i] == '.') {
			html += '<div class="dot"></div>'
		} else {
			var clasname = digit_to_name[strarr[i]];
			html += '<div class="' + clasname + '">' +
				'<span class="d1"></span>' +
				'<span class="d2"></span>' +
				'<span class="d3"></span>' +
				'<span class="d4"></span>' +
				'<span class="d5"></span>' +
				'<span class="d6"></span>' +
				'<span class="d7"></span>' +
				'</div>';
		}
	}
	$('#' + id).append(html);
}