257 lines
5.4 KiB
HTML
257 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>学习记录查询</title>
|
||
|
||
<script src="js/layui-v2.5.4/layui/layui.js" type="text/javascript" charset="utf-8"></script>
|
||
<script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>
|
||
|
||
<link rel="stylesheet" type="text/css" href="./js/layui-v2.5.4/layui/css/layui.css" />
|
||
<style type="text/css">
|
||
.cont_daping_right {
|
||
width: 600px;
|
||
background: #2e3347;
|
||
border-radius: 8px;
|
||
padding-top: 10px;
|
||
padding-left: 10px;
|
||
box-sizing: border-box;
|
||
margin-top: 50px;
|
||
margin-left: -40px;
|
||
}
|
||
|
||
.daping_box_bottom_con {
|
||
width: 28%;
|
||
left: 50%;
|
||
box-sizing: border-box;
|
||
border-radius: 8px;
|
||
margin-top: 10px;
|
||
padding-top: 10px;
|
||
}
|
||
|
||
.daping_box_bottom {
|
||
width: 500px;
|
||
margin: auto;
|
||
}
|
||
|
||
.layui-btn-primary {
|
||
border: 1px solid #C9C9C9;
|
||
background-color: #01b9dd !important;
|
||
color: white !important;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="daping_box_bottom clear_box">
|
||
|
||
|
||
<div class="cont_daping_right">
|
||
<div id="main2" style="width: 600px;height:350px;"></div>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
<table id="demo" class="layui-hide" lay-filter="xk"></table>
|
||
</table>
|
||
<script src="js/layui-v2.5.6/layui/layui.all.js"></script>
|
||
<script type="text/javascript">
|
||
//基于准备好的dom，初始化echarts实例
|
||
var myChart3 = echarts.init(document.getElementById('main2'));
|
||
|
||
|
||
var option = {
|
||
title: {
|
||
text: '人数',
|
||
left: 'left',
|
||
textStyle: {
|
||
color: '#FFF'
|
||
}
|
||
},
|
||
color: ['#3398DB', '#00FF00', '#e5323e'],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['已学习人数', '合格人数', '未学习人数']
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
orient: 'vertical',
|
||
left: 'right',
|
||
top: 'center',
|
||
feature: {
|
||
mark: {
|
||
show: true
|
||
},
|
||
dataView: {
|
||
show: true,
|
||
readOnly: false
|
||
},
|
||
magicType: {
|
||
show: true,
|
||
type: ['line', 'bar', 'stack', 'tiled']
|
||
},
|
||
restore: {
|
||
show: true
|
||
},
|
||
saveAsImage: {
|
||
show: true
|
||
}
|
||
}
|
||
},
|
||
xAxis: [{
|
||
|
||
type: 'category',
|
||
data: ['岗前培训二试题', '岗前培训一试题', '普通话培训', '基础课程一'],
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
type: 'solid',
|
||
color: '#FFF', //左边线的颜色
|
||
width: '1' //坐标线的宽度
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 40,
|
||
show: true,
|
||
splitNumber: 15,
|
||
color: "#FFF",
|
||
textStyle: {
|
||
//fontFamily: "微软雅黑",
|
||
fontSize: 12,
|
||
},
|
||
|
||
}
|
||
}],
|
||
yAxis: [{
|
||
|
||
type: 'value',
|
||
splitLine: { //分割线
|
||
show: true,
|
||
color: "#fff",
|
||
lineStyle: {
|
||
color: '#FFF'
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
type: 'solid',
|
||
color: '#FFF', //左边线的颜色
|
||
width: '1' //坐标线的宽度
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 0,
|
||
show: true,
|
||
splitNumber: 30,
|
||
color: "#FFF",
|
||
textStyle: {
|
||
//fontFamily: "微软雅黑",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
}],
|
||
series: [{
|
||
name: '已学习人数',
|
||
type: 'bar',
|
||
barGap: 0,
|
||
|
||
data: [30, 50, 0, 25]
|
||
},
|
||
{
|
||
name: '合格人数',
|
||
type: 'bar',
|
||
|
||
data: [30, 48, 0, 24]
|
||
},
|
||
{
|
||
name: '未学习人数',
|
||
type: 'bar',
|
||
label: "jfkasldj",
|
||
data: [28, 7, 60, 15]
|
||
}
|
||
]
|
||
};
|
||
|
||
|
||
|
||
|
||
myChart3.setOption(option);
|
||
|
||
|
||
|
||
|
||
layui.use('table', function() {
|
||
var table = layui.table;
|
||
table.render({
|
||
elem: '#demo',
|
||
data: [{
|
||
"xxmc": "岗前培训二试题",
|
||
"yxxrs": "30",
|
||
"hgrs": "30",
|
||
"wxirs": "28",
|
||
},
|
||
{
|
||
"xxmc": "岗前培训一试题",
|
||
"yxxrs": "50",
|
||
"hgrs": "48",
|
||
"wxirs": "7",
|
||
},
|
||
{
|
||
"xxmc": "普通话培训",
|
||
"yxxrs": "0",
|
||
"hgrs": "0",
|
||
"wxirs": "60",
|
||
},
|
||
{
|
||
"xxmc": "基础课程一",
|
||
"yxxrs": "25",
|
||
"hgrs": "24",
|
||
"wxirs": "15",
|
||
}
|
||
] //数据接口
|
||
,
|
||
cellMinWidth: 80 //全局定义常规单元格的最小宽度
|
||
,
|
||
cols: [
|
||
[ //表头
|
||
{
|
||
field: 'xxmc',
|
||
title: '学习名称'
|
||
}, {
|
||
field: 'yxxrs',
|
||
title: '已学习人数'
|
||
},
|
||
{
|
||
field: 'hgrs',
|
||
title: '合格人数'
|
||
}, {
|
||
field: 'wxirs',
|
||
title: '未学习人数'
|
||
}
|
||
]
|
||
]
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|