Echarts显示数据

最新推荐文章于 2024-07-24 17:16:26 发布

java后端指南

最新推荐文章于 2024-07-24 17:16:26 发布

阅读量415

点赞数

分类专栏：前端文章标签： jquery bootstrap

本文链接：https://blog.csdn.net/Ting1king/article/details/107364051

版权

前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				float: left;
			}
			table{
				
			}
		</style>
	</head>
	<script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
	<!-- 引入 echarts.js -->
	<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
	<script type="text/javascript">
		$(function() {
			var html = "<tr><th>学号</th><th>姓名</th><th>班级ID</th><th>成绩平均分</th>	<th>最高分</th><th>最低分</th></tr>";
			var sum = 0;
			var max = 0;
			var min = 0;
			var avg1 = 0;
			var avg2 = 0;
			var avg3 = 0;
			var avg4 = 0;
			var avg5 = 0;

			var proportion1 = 0;
			var proportion2 = 0;
			var proportion3 = 0;
			var proportion4 = 0;
			var proportion5 = 0;
			//发送ajax请求
			$.ajax({
				url: "../data/student.json",
				method: "get",
				dataType: "json",
				cache: false,
				success: function(jsop) {
					for (let i = 0; i < 20; i++) {
						//总分
						sum = jsop[i].score[0] + jsop[i].score[1] + jsop[i].score[2] + jsop[i].score[3] + jsop[i].score[4];
						//最高分
						max = Math.max.apply(null, jsop[i].score);
						//最低分
						min = Math.min.apply(null, jsop[i].score);
						//各科总分
						avg1 += jsop[i].score[0];
						avg2 += jsop[i].score[1];
						avg3 += jsop[i].score[2];
						avg4 += jsop[i].score[3];
						avg5 += jsop[i].score[4];
						//不及格数量
						if (jsop[i].score[0] < 60) {
							proportion1 += 1;
						} else if (jsop[i].score[1] < 60) {
							proportion2 += 1;
						} else if (jsop[i].score[2] < 60) {
							proportion3 += 1;
						} else if (jsop[i].score[3] < 60) {
							proportion4 += 1;
						} else if (jsop[i].score[4] < 60) {
							proportion5 += 1;
						}
						html += "<tr><td>" + jsop[i].sid + "</td><td>" + jsop[i].sname + "</td><td>" + jsop[i].classid + "</td><td>" +
							(sum / 5) + "</td><td>" + max + "</td><td>" + min + "</td></tr>";


					}

					//不及格成绩占的比例
					//echarts进行初始化
					var myChart1 = echarts.init(document.getElementById("char1"));
					var option1 = {
						series: [{
							//设置标题
							title: {
								show:true,
								text: '不及格成绩占的比例'
							},
							name: '',
							type: 'pie', // 设置图表类型为饼图
							radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
							data: [ // 数据数组，name 为数据项名称，value 为数据项值
								{
									value: proportion1 / 20,
									name: '语文'
								},
								{
									value: proportion2 / 20,
									name: '数学'
								},
								{
									value: proportion3 / 20,
									name: '英语'
								},
								{
									value: proportion4 / 20,
									name: '政治'
								},
								{
									value: proportion5 / 20,
									name: '历史'
								}
							],
							//设置百分比
							itemStyle: {
								normal: {
									label: {
										show: true,
										formatter: '{b} : {c} ({d}%)'
									},
									labelLine: {
										show: true
									}
								}
							}
						}]
					}
					myChart1.setOption(option1);

					//各课程的平均分
					//echarts进行初始化
					var myChart2 = echarts.init(document.getElementById("char2"));

					var option2 = {
						//设置标题
						title: {
							text: '各课程的平均分'
						},
						//提示
						tooltip: {},

						legend: {
							
							data: ['平均分']
						},
						//设置横坐标
						xAxis: {
							data: ["语文", "数学", "英语", "政治", "历史"]
						},
						//设置纵坐标属性
						yAxis: {
							min: 0, //y轴的最小值
							max: 100, //y轴最大值 
							interval: 10 //值之间的间隔
						},
						series: [{
							name: '平均分',
							type: 'bar',
							data: [avg1 / 20, avg2 / 20, avg3 / 20, avg4 / 20, avg5 / 20]
						}]

					};

					myChart2.setOption(option2);
					$("#d1").html(html);
				}
			})



		})
	</script>
	<body>
		
		<table id="d1" align="center">
		</table>
		<br />
		<div style="clear: both;"></div>
		<div id="char1" style="width: 600px;height: 600px;"></div>
		<div id="char2" style="width: 600px;height: 600px;"></div>
	</body>
</html>