master

分支 (1)

管理

管理

master

stu_eng_chart
/
mainpage_stu3.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 class=" active"><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">  student A English  score </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 radar_chart = echarts.init(document.getElementById("chart"));
		let yList = ['allSchool','your School'];
		let collectingMediaList = [76, 80];
		let dealerLists = [134, 31];
		let regionalDelivery = [34, 31];

		var option = {
		                //提示框，默认显示
		                tooltip: {
		                    trigger: 'axis',
		                    axisPointer: {// 坐标轴指示器，坐标轴触发有效
		                        type: 'shadow'// 默认为直线，可选为：'line' | 'shadow'
		                    },
		                    // 控制提示格式
		                    formatter: function(param){
		                        return `${param[0].axisValue}: <br/>${param[0].value}人`
		                    }
		                },
		                //控制直角坐标系与容器上下左右的距离
		                grid: {
		                    left: '2%',
		                    right: '12%',
		                    bottom: '0',
		                    top: '4%',
		                    containLabel: true,//gid区域是否包含坐标轴的刻度标签。
		                },
		                // x轴（指的是水平的那条线）相关配置
		                xAxis: [
		                    {
		                        type: 'value',//x轴数据类型，value时就是值，category时就是分类，可用于区分y轴与x轴
		                        axisLabel: {    // 坐标轴标签
		                            show: true,  // 是否显示
		                            // inside: true, // 标签是否朝内,默认false
		                            interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
		                            rotate: 0, // 旋转角度
		                            margin: 5, // 刻度标签与轴线之间的距离
		                            color: '#000',  // 标签颜色默认取轴线的颜色
		                            fontSize: 12//标签字号
		                        },
		                        splitLine: {    // 网格线
		                            show: false  // 是否显示，默认为true
		                        },
		                        axisLine: {    // 坐标轴 轴线
		                            show: true,  // 是否显示,默认false
		                            lineStyle: {
		                            // color: '#FFFFFF',//轴线颜色
		                            width: 1,//轴线宽度
		                            type: 'solid'//轴线类型
		                            }
		                        },
		                    }
		                ],
		                // y轴（垂直的那条线）设置
		                yAxis: [
		                    {
		                        type: 'category',
		                        data: ['ch1','ch2','ch3','ch4','ch5','qu6','qu7','qu8'],//类目轴数据
		                        axisLabel: {    // 坐标轴标签
		                            show: true,  // 是否显示
		                            inside: false, // 是否朝内
		                            color: '#000',
		                            fontSize: 12
		                        },
		                        splitLine: {    // 网格线
		                            show: false  // 是否显示，默认为false
		                        },
		                        axisLine: {    // 坐标轴 轴线
		                            show: true,  // 是否显示
		                            lineStyle: {
		                            // color: '#FFFFFF',
		                            width: 1,
		                            type: 'solid'
		                            }
		                        },
		                        boundaryGap: true,//显示刻度，默认为 true,只是作为分隔线，标签和数据点都会在两个刻度之间的带中间
		                        axisTick: {//坐标轴刻度相关
		                            alignWithLabel: true,//类目轴中在`boundaryGap`为`true`的时候有效，可以保证刻度线和标签对齐
		                        },
		                        inverse:true,//翻转y轴数据
		                    }
		                ],
		                series: [
		                    {
		                        name: '直接访问',
		                        type: 'bar',//表明柱状体，饼图是pie，折线图是line
		                        barWidth: 10,//柱子宽度
		                        data: [0,4,0,4,4,8,5,10],//值数据，与类型数据一一对应
		                        itemStyle: {
		                            // emphasis: {
		                            //     barBorderRadius: 7,
		                            // },
		                            normal: {//柱子相关设置
		                                barBorderRadius: [0,7,7,0],//设置柱子圆角;左上-右上-右下-左下
		                                label: {//柱子标签相关
		                                    show: true,
		                                    position: 'right',//柱子标签位置
		                                    textStyle: {//柱子标签文本设置
		                                        color: '#000',
		                                        fontSize: 12
		                                    },
		                                },
		                                color: new echarts.graphic.LinearGradient(//柱子加渐变色
		                                    0, 0, 1, 0,
		                                    [
		                                        {offset: 0, color: '#F9456D'},//柱图渐变色
		                                        // {offset: 0.5, color: '#44C0C1'},//柱图渐变色
		                                        {offset: 1, color: '#FDEEB0'},//柱图渐变色
		                                    ]
		                                )
		                            },
		                        }
		                    }
		                ],
		            };


		radar_chart.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>