master

分支 (1)

管理

管理

master

stu_eng_chart
/
mainpage_class3.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  > <a href="mainpage_class2.html" > class score chart </a></li>
			      <li class="active"> <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  choice question correct rate</li>
</div>
    <!-- 内容主体区域 -->
   <div id="heartMap" style="width: 1060px;height:800px;">

  </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 heatMapChart = echarts.init(document.getElementById("heartMap"));
		        // x轴数据
		        var hours = ['0-9','10-19', '20-29','30-39', '40-49', '50-59','60-69', '70-79', '80-89', '90-99','100'];
		        // y轴数据
		       var days = ['se1', 'se2', 'se3', 'se4', 'se5', 'se6', 'se7', 'se8'];

		        /*
		        数据解释：
		        [y轴，x轴，value]（注意第一个是y，第二个才是x！！！）
		        例如[0,1,1]表示坐标为(1,0)的点的值为1
		        因为y轴为一周，所以如果按天分，数据可以分为六行
		        x轴为一天，按小时分，可以分为24个小时
		        如下所示
		         */
		        var data = [
					 [0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0],
					 [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5],
					 [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3],
					 [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5],
					 [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4],
					 [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4],
					 [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1],
					 [7, 0, 5], [7, 1, 1], [7, 2, 0], [7, 3, 0], [7, 4, 0], [7, 5, 2], [7, 6, 0], [7, 7, 0], [7, 8, 0], [7, 9, 8], [7, 10, 0],
					 // [8, 0, 1], [8, 1, 8], [8, 2, 6], [8, 3, 0], [8, 4, 3], [8, 5, 0], [8, 6, 0], [8, 7, 0], [8, 8, 4], [8, 9, 0], [8, 10, 0],
					 // [9, 0, 5], [9, 1, 1], [9, 2, 0], [9, 3, 0], [9, 4, 0], [9, 5, 0], [9, 6, 0], [9, 7, 6], [9, 8, 0], [9, 9, 0], [9, 10, 9],
					 ];
	             for (i=0;i<data.length;i++)
					{
						data[i][2]= Math.round( (data[i][1]+data[i][0] +Math.random()*10)/20*30);
						if (data[i][2]>30) data[i][2]=30;
						if (data[i][1]==10)
						{
							data[i][2]=30;
						}
					}

		        data = data.map(function (item) {
		            return [item[1], item[0], item[2] || '-'];
		        });

		        var option = {
		            // 移到每个值上的文本提示框
		            tooltip: {
		                position: 'top'
		            },
		            // 关闭动画
		            animation: true,
		            // 直角坐标系内绘图网格
		            grid: {
		                height: '50%',
		                top: '10%'
		            },
		            xAxis: {
		                // 坐标轴类型，（value数值轴,category类目轴,time时间轴,log对数轴）
		                type: 'category',
		                data: hours,
		                // 分隔区域
		                splitArea: {
		                    show: true
		                }
		            },
		            yAxis: {
		                type: 'category',
		                data: days,
		                splitArea: {
		                    show: true
		                }
		            },
		            // 视觉映射组件
		            visualMap: {
		                min: 0,
		                max: 30,
		                // grid 区域包含坐标轴的刻度标签
		                calculable: true,
		                orient: 'horizontal',
		                left: 'center',
		                bottom: '15%',
						splitNumber: 8,//这里设置分割数
						        inRange: {   color: ['#313695', '#4575b4', '#74add1', '#abd9e9',  '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']  //格子分类的颜色，这里定义了颜色之后，每一种都会有颜色
						}
		            },


		            series: [{
		                name: 'Punch Card',
		                type: 'heatmap',
		                data: data,
		                label: {
		                    show: true
		                },
		                // 当鼠标移到某个值上强调显示的格式（通过visualMap可以明显的看出这个效果）
		                emphasis: {
		                    itemStyle: {
		                        // 图形阴影的模糊大小
		                        shadowBlur: 30,
		                        shadowColor: 'rgba(0, 0, 0, 0.5)'
		                    }
		                }
		            }]
		        };
		      //  heatMapChart.setOption(option);
		//          window.onresize = function () {  //适应页面
		//              myChartContainer();
		//              myChart.resize();
		//          }
		    heatMapChart.setOption(option);

			heatMapChart.on('click', function (params) {
			    // 在用户点击后控制台打印数据的名称
			    console.log(params);
				console.log(params.name);
				console.log(params.value);
				console.log(params.xAxis);
				console.log(params.yAxis);
			});


$(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>