master

分支 (1)

管理

管理

master

stu_eng_chart
/
mainpage_class1male_female.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 class="active"> <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>


		</ul>

	</div>
  </div>

  <div class="layui-body layui-bg-gray">
	  <div id="search">
		 </div>
<div>
<li class="layui-btn layui-btn-normal">  class  English  choice question correct rate </li>
</div>
    <!-- 内容主体区域 -->
   <div id="barchart" style="width: 860px;height:600px;">

  </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('barchart'));

			 // 指定图表的配置项和数据
			     var option = {
			         // 标题
			         title: {
			             text: '',
			             subtext:'',
			             left:'left',

			         },
			         // 工具箱
			         toolbox: {
			             show: true,
			             feature:{
			                 saveAsImage:{
			                     show:true
			                 },
			                 restore:{
			                     show:true
			                 },
			                 dataView:{
			                     show:true
			                 },
			                 dataZoom:{
			                     show:true
			                 },
			                 magicType:{
			                     type:['line','bar']
			                 }

			             }
			         },
			         tooltip:{
			             trigger:'axis'
			         },
			         // 图例
			         legend: {
			             data: ['female right rate','male right rate']
			         },
			         // x轴
			         xAxis: {
			             data: ["1qu","2qu","3qu","4qu","5qu","6qu","7qu","8qu","9qu","10qu","11qu","12qu"],//内容
			         },
			         yAxis: {},
			         // 数据
					color: ['#E066FF','#33B1D3', '#37499E','#2f4554', '#61a0a8',  '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
			         series: [{
			             name: 'female right rate',
			             type: 'bar',
						 barWidth:'15',
			             data: [32, 40, 30, 65, 43, 60,50,72,45,67,80,52],
			             markPoint:{
			                 data:[
			                     {type:'max',name:'max',symbol:'arrow'},
			                     {type:'min',name:'min'}
			                 ]
			             },
			             markLine:{
			                 data:[
			                     {type: 'average',name:'avarige'}
			                 ]
			             }
			         },
					 {
					     name: 'male right rate',
					     type: 'bar',
						  barWidth:'15',
					     data: [30, 38, 77, 52,66, 43, 60,50,72,45,67,78],

					     markPoint:{
					         data:[
					             {type:'max',name:'max',symbol:'arrow'},
					             {type:'min',name:'min'}
					         ]
					     },
					     markLine:{
					         data:[
					             {type: 'average',name:'avarige'}
					         ]
					     }
					 }
			         ],

			     };


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

$(function() {
	$("#search").load("search_class.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>