代码拉取完成，页面将自动刷新
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
<!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="chart" 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('chart'));
// 指定图表的配置项和数据
option = {
title: {//标题组件
textStyle: {
color: "#333333",
fontSize: 12,
}
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)",
textStyle:{ //图例文字的样式
color:'#fff', //文字颜色
fontSize:10 //文字大小
}
},
graphic:[
{
type: 'text',
top: '40%',
left: 'center',
style: {
text: '100.00%',
fill: '#333333',
fontSize: 20,
fontWeight: 'normal'
}
},{
type: 'text',
top: '53%',
left: 'center',
style: {
text: '就业率',
fill: '#A6A8B6',
fontSize: 12,
fontWeight: 'normal'
}
},
],
//圆环的颜色
color:['#48cda6','#fd87fb','#11abff','#ffdf6f','#968ade','#F94E70','#FBA492'],
// 图例
series: [
{
name:'就业率',//代表a的值，系列名称
type:'pie',
center:['50%','45%'], //饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
radius: ['45%', '60%'],//饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]
avoidLabelOverlap: false,
/* animation: false, */ //是否禁用动画效果
label: {
normal: {
show: true,//是否显示标签
position: 'left', // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
//显示的标签的内容
//a（系列名称），b（数据项名称），c（数值）, d（百分比）
formatter: "{a},{b}:{c}（{d}%）", // 
},
emphasis: {
//鼠标放在圆环上显示的标签样式
show: true,
textStyle: {
fontSize: '12',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: true,//是否显示引导线
length:10, //百分比引导线
length2:20 //视觉引导项第二段的长度。
}
},
itemStyle: {
normal: {
borderColor: "#FFFFFF",
borderWidth: 1,
label:{
show:true,
formatter:'{d}%'
},
}
},
// 系列中的数据内容数组。
data:[
{value:12, name:'其它'},
{value:4, name:'待就业'},
{value:4, name:'政府机关'},
{value:13, name:'教育'},
{value:32, name:'软件与信息服务'},
{value:11, name:'制造业'},
{value:43, name:'互联网与相关'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
举报
请认真填写举报原因，尽可能描述详细。
请选择举报类型
误判申诉
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化