master

分支 (1)

管理

管理

master

stu_eng_chart
/
mainpage_classm.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 active"><a href="#">school</a>
			   <ul class="items">
			      <li > <a href="mainpage_school1.html" > school score </a></li>
			      <li  class="active"> <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 "><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>

		   <li class="list"><a href="#">todo</a>
		      <ul class="items">
		         <li> <a href="#" > Item 4-1 </a></li>
		         <li> <a href="#" > Item 4-2 </a></li>
		         <li class="list"><a href="#">List 4-1</a>
		            <ul  class="items">
		               <li> <a href="#" > Item 4-1-1</a></li>
		               <li> <a href="#" > Item 4-1-2</a></li>
		               <li class="list"><a href="#">List 4-2</a>
		                  <ul  class="items">
		                     <li> <a href="#" > Item 4-2-1</a></li>
		                     <li> <a href="#" > Item 4-2-2</a></li>
		                  </ul>
		               </li>
		            </ul>
		         </li>
		      </ul>
		   </li>
		</ul>

	</div>
  </div>

  <div class="layui-body layui-bg-gray">
	  <div id="search">
		 </div>
<div>
<li class="layui-btn layui-btn-normal">  class  English  score </li>
</div>
    <!-- 内容主体区域 -->
    <div id="chart" style="width: 550px"></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 length=12;//此处为动态数据的长度
var hei=(length*40)+'px';//动态获取图表高度
$("#chart").css('height',hei);//动态设置图表高度
//showchart();   //图表执行

var myChart = echarts.init(document.getElementById("chart"));
	//var myChart = echarts.init(chartDom);
	var option;

		 option = {
		   tooltip: {
		     trigger: 'axis',
		     axisPointer: {
		       // Use axis to trigger tooltip
		       type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
		     }
		   },
		   legend: {},
		   grid: {
		     left: '3%',
		     right: '4%',
		     bottom: '3%',
		     containLabel: true
		   },
		   xAxis: {
		     type: 'value'
		   },
		   yAxis: {
		     type: 'category',
		     data: ['classA','B','C','D','E','F','G','your Class']
		   },
		   series: [
		     {
		       name: 'choise',
		       type: 'bar',
		       stack: 'total',
		       label: {
		         show: true
		       },
			   itemStyle:{
			       normal: {
			           color: '#ffaaff'
			       }
			   },
		       emphasis: {
		         focus: 'series'
		       },
		       data: [26, 28,28,20,20,27,20,25]
		     },


		     {
		       name: 'answer',
		       type: 'bar',
		       stack: 'total',
		       label: {
		         show: true
		       },
			   itemStyle:{
			       normal: {
			           color: '#ffaa7f'
			       }
			   },
		       emphasis: {
		         focus: 'series'
		       },
		       data: [56, 50,58,50,60,57,52,55]
		     }
		   ]
		 };

		 option && myChart.setOption(option);


$(function() {
	$("#search").load("search_school.html .searchFormBox");


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>