master

分支 (1)

管理

管理

master

stu_eng_chart
/
mainpage_class2-2 - 副本.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>layout 管理界面大布局示例 - Layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
		<!--演示页面样式，使用时可以不引用-->
		<link href="./css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" href="./css/base.css?r=2021090711483762" />
		<link rel="stylesheet" href="./css/layui.css?t=1632659138211" media="all">
		<style>
			/* 移动端 */
			@media screen and (max-width: 768px) {

				.layui-layout-admin .layui-layout-left,
				.layui-layout-admin .layui-body,
				.layui-layout-admin .layui-footer {
					left: 0;
				}

				.layui-layout-admin .layui-side {
					left: -300px;
				}
			}
		</style>

	</head>
	<body>

		<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
				<div class="layui-logo layui-hide-xs layui-bg-black">student score manage</div>
				<!-- 头部区域（可配合layui 已有的水平导航） -->
				<ul class="layui-nav layui-layout-left">
					<!-- 移动端显示 -->
					<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
						<i class="layui-icon layui-icon-spread-left"></i>
					</li>


				</ul>
				<ul class="layui-nav layui-layout-right">
					<li class="layui-nav-item layui-hide layui-show-md-inline-block">
						<a href="javascript:;">
							<img src="./img/index_user.jpg" class="layui-nav-img">
							tester
						</a>
						<dl class="layui-nav-child">
							<dd><a href="">Your Profile</a></dd>
							<dd><a href="">Settings</a></dd>
							<dd><a href="">Sign out</a></dd>
						</dl>
					</li>
					<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
						<a href="javascript:;">
							<i class="layui-icon layui-icon-more-vertical"></i>
						</a>
					</li>
				</ul>
			</div>

			<div class="layui-side  layui-bg-darkgray">
				<div class="htmleaf-container">
					<ul class="menu">
						<li class="list "><a href="#">school</a>
							<ul class="items">
								<li class=""> <a href="mainpage_school1.html"> school score </a></li>
								<li class=""> <a href="mainpage_school2.html"> school score chart </a></li>
								<li class=""> <a href="mainpage_school3.html"> score trend </a></li>
							</ul>
						</li>
						<li class="list active"><a href="#">class</a>
							<ul class="items">
								<li> <a href="mainpage_class1.html"> class score </a></li>
								<li class="active"> <a href="mainpage_class2.html"> class score chart </a></li>
								<li class=""> <a href="mainpage_class3.html"> class trend </a></li>
							</ul>
						</li>
						<li class="list "><a href="#">student </a>
							<ul class="items">
								<li><a href="mainpage_stu1.html"> student list</a></li>
								<li><a href="mainpage_stu2.html"> subject score </a></li>
								<li><a href="mainpage_stu3.html"> score trend</a></li>
								<li><a href="mainpage_stu4.html"> score analyse</a></li>
							</ul>
						</li>


					</ul>

				</div>
			</div>

			<div class="layui-body  layui-bg-gray">
				<li class="layui-btn layui-btn-normal"> grade A English score analyse</li>
				<!-- 内容主体区域 -->
				<div id="chart" style="height: 450px;width: 450px"></div>

			</div>

			<div class="layui-footer">

				Copyright 2021, gust
			</div>
		</div>
		<script src="./js/jquery.min.js"></script>
		<script src="./js/echarts.min.js"></script>
		<script src="./core/js/layui/layui.js" charset="utf-8"></script>
		<script>
			var myChart = echarts.init(document.getElementById('chart'));
			// 指定图表的配置项和数据
			var option = {
					color: ['#7AB1D3', '#F57346', '#2f4554', '#61a0a8', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074',
						'#546570', '#c4ccd3'
					],
					series: {
						type: 'sunburst',
						var data = [{
							name: 'Grandpa',
							emphasis: {
								itemStyle: {
									color: 'red'
								}
							},
							highlight: {
								itemStyle: {
									color: 'orange'
								}
							},
							downplay: {
								itemStyle: {
									color: '#ccc'
								}
							},
							children: [{
								name: 'Uncle Leo',
								value: 15,
								children: [{
									name: 'Cousin Jack',
									value: 2
								}, {
									name: 'Cousin Mary',
									value: 5,
									children: [{
										name: 'Jackson',
										value: 2
									}]
								}, {
									name: 'Cousin Ben',
									value: 4
								}]
							}, {
								name: 'Father',
								value: 10,
								children: [{
									name: 'Me',
									value: 5
								}, {
									name: 'Brother Peter',
									value: 1
								}]
							}]
						}, {
							name: 'Nancy',
							children: [{
								name: 'Uncle Nike',
								children: [{
									name: 'Cousin Betty',
									value: 1
								}, {
									name: 'Cousin Jenny',
									value: 2
								}]
							}]
						}];

								emphasis: {
									itemStyle: {
										color: '#c30'
									}
								},
								highlight: {
									itemStyle: {
										color: '#c90'
									}
								},
								downplay: {
									itemStyle: {
										color: '#909'
									}
								}
							}
						};


						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option);

						$(function() {
							//$("#menudiv").load("index.html");


							var list = document.querySelectorAll('.list');

							function accordion(e) {
								e.stopPropagation();
								if (this.classList.contains('active')) {
									this.classList.remove('active');
								} else
								if (this.parentElement.parentElement.classList.contains('active')) {
									this.classList.add('active');
								} else {
									for (i = 0; i < list.length; i++) {
										list[i].classList.remove('active');
									}
									this.classList.add('active');
								}
							}
							for (i = 0; i < list.length; i++) {
								list[i].addEventListener('click', accordion);
							}


						})
		</script>

	</body>
</html>