master

分支 (1)

管理

管理

master

stu_eng_chart
/
mainpage_stu4.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 > <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"><a href="#">class</a>
			   <ul class="items">
			      <li class=""> <a href="mainpage_class1.html" > class score </a></li>
			       <li  class=""> <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 active"><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  class=" active"><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">  student 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: ['#F94E70','#FBA492', '#91c7ae','#2f4554', '#61a0a8',  '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
		             series: {
		                 type: 'sunburst',
		                 data: [{
		                     name: 'Choice',
		                     value: 10,
		                     children: [{
		                         value: 3,
		                         name: ' ChoiceRight'
		                     }, {
		                         value: 5,
		                         name: ' ChoiceWrong'
		                     }]
		                 }, {
		                     name: ' short answer',
		                     children: [{
		                         name: ' short answerRight',
		                         value: 4,
		                     }, {
		                         name: ' short answerWrong',
		                         value: 2
		                     }]
		                 }, {
		                     name: 'Others',
		                     value: 3
		                 }],


						 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>