511 lines
12 KiB
HTML
511 lines
12 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<title>ECharts</title>
|
|||
|
|
<!-- 引入 echarts.js -->
|
|||
|
|
<script src="echarts/echarts.min.js" charset="utf-8"></script>
|
|||
|
|
<script src="js/layui-v2.5.6/layui/layui.all.js"></script>
|
|||
|
|
<style type="text/css">
|
|||
|
|
body {
|
|||
|
|
height: 670px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.clear_box::after {
|
|||
|
|
content: '';
|
|||
|
|
display: block;
|
|||
|
|
clear: both;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.div_float {
|
|||
|
|
width: 48%;
|
|||
|
|
float: left;
|
|||
|
|
margin-bottom: 2%;
|
|||
|
|
box-shadow: 0px 1px 6px #dcdcdc;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.margin_rig {
|
|||
|
|
margin-right: 2%;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div class="sjzs_top"></div>
|
|||
|
|
<div class="sjzs_cont clear_box">
|
|||
|
|
<div class="div_float margin_rig">
|
|||
|
|
<div id="main" style="width: 100%;height:400px;margin: 0 auto;"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="div_float ">
|
|||
|
|
<div id="main1" style="width: 100%;height:400px;margin: 0 auto;"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="div_float margin_rig">
|
|||
|
|
<div id="main2" style="width: 100%;height:400px;margin: 0 auto;"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="div_float">
|
|||
|
|
<div id="main3" style="width: 100%;height:400px;margin: 0 auto;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart = echarts.init(document.getElementById('main'))
|
|||
|
|
|
|||
|
|
var colors = ['#C23531', '#2F4554', '#675bba'];
|
|||
|
|
|
|||
|
|
option = {
|
|||
|
|
title: {
|
|||
|
|
text: '培训完成情况统计',
|
|||
|
|
subtext: '2020年1月-4月'
|
|||
|
|
},
|
|||
|
|
color: colors,
|
|||
|
|
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'cross'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '4%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
legend: {
|
|||
|
|
data: ['计划人数', '实际人数', '完成率']
|
|||
|
|
},
|
|||
|
|
xAxis: [{
|
|||
|
|
type: 'category',
|
|||
|
|
axisTick: {
|
|||
|
|
alignWithLabel: true
|
|||
|
|
},
|
|||
|
|
data: ['1月', '2月', '3月', '4月']
|
|||
|
|
}],
|
|||
|
|
yAxis: [{
|
|||
|
|
type: 'value',
|
|||
|
|
position: 'left'
|
|||
|
|
},
|
|||
|
|
{},
|
|||
|
|
{
|
|||
|
|
type: 'value',
|
|||
|
|
name: '完成率',
|
|||
|
|
position: 'right',
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: colors[2]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
series: [{
|
|||
|
|
name: '计划人数',
|
|||
|
|
barWidth: 40,
|
|||
|
|
type: 'bar',
|
|||
|
|
data: [1456, 1321, 1654, 1754]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '实际人数',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 40,
|
|||
|
|
data: [1021, 811, 1456, 1232]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '完成率',
|
|||
|
|
type: 'line',
|
|||
|
|
yAxisIndex: 1,
|
|||
|
|
data: [70.1, 61.3, 88, 70.2]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
// option = {
|
|||
|
|
// title: {
|
|||
|
|
// text: '培训完成情况统计',
|
|||
|
|
// subtext: '2020年1月-4月'
|
|||
|
|
// },
|
|||
|
|
// tooltip: {
|
|||
|
|
// trigger: 'axis',
|
|||
|
|
// axisPointer: {
|
|||
|
|
// type: 'shadow'
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
// legend: {
|
|||
|
|
// data: ['计划人数', '实际人数', '完成比例']
|
|||
|
|
// },
|
|||
|
|
// grid: {
|
|||
|
|
// left: '3%',
|
|||
|
|
// right: '4%',
|
|||
|
|
// bottom: '3%',
|
|||
|
|
// containLabel: true
|
|||
|
|
// },
|
|||
|
|
// yAxis: [{
|
|||
|
|
// type: 'value',
|
|||
|
|
// boundaryGap: [0, 0.01]
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// type: 'value',
|
|||
|
|
// name: '完成比例',
|
|||
|
|
// min: 0,
|
|||
|
|
// max: 250,
|
|||
|
|
// position: 'right',
|
|||
|
|
// offset: 80,
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// ],
|
|||
|
|
// xAxis: {
|
|||
|
|
// type: 'category',
|
|||
|
|
// data: ['1月', '2月', '3月', '4月']
|
|||
|
|
// },
|
|||
|
|
// series: [{
|
|||
|
|
// name: '计划人数',
|
|||
|
|
// type: 'bar',
|
|||
|
|
// data: [1456, 1321, 1654, 1754]
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// name: '实际人数',
|
|||
|
|
// type: 'bar',
|
|||
|
|
// data: [1321, 1211, 1456, 1632]
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// name: '完成比例',
|
|||
|
|
// type: 'line',
|
|||
|
|
// label: {
|
|||
|
|
// normal: {
|
|||
|
|
// show: true,
|
|||
|
|
// // 图形内显示
|
|||
|
|
// position: "inside",
|
|||
|
|
// // 文字的显示格式
|
|||
|
|
// formatter: "{c}%"
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
// stack: '总量',
|
|||
|
|
// data: [89, 90, 95, 60]
|
|||
|
|
// }
|
|||
|
|
// ]
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
var myChart1 = echarts.init(document.getElementById('main1'))
|
|||
|
|
option1 = {
|
|||
|
|
title: {
|
|||
|
|
text: '培训课程分数情况'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
// 坐标轴指示器，坐标轴触发有效
|
|||
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ['0-59分', '60-79分', '80-99分', '100分']
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '4%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'value'
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: [
|
|||
|
|
'职业卫生培训',
|
|||
|
|
'职业卫生管理员培训',
|
|||
|
|
'职业危害知识培训',
|
|||
|
|
'岗后培训',
|
|||
|
|
'岗中培训',
|
|||
|
|
'岗前培训'
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: '0-59分',
|
|||
|
|
type: 'bar',
|
|||
|
|
stack: '总数',
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'insideRight'
|
|||
|
|
},
|
|||
|
|
data: [320, 302, 301, 334, 390, 330]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '60-79分',
|
|||
|
|
type: 'bar',
|
|||
|
|
stack: '总数',
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'insideRight'
|
|||
|
|
},
|
|||
|
|
data: [120, 132, 101, 134, 90, 230]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '80-99分',
|
|||
|
|
type: 'bar',
|
|||
|
|
stack: '总数',
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'insideRight'
|
|||
|
|
},
|
|||
|
|
data: [220, 182, 191, 234, 290, 330]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '100分',
|
|||
|
|
type: 'bar',
|
|||
|
|
stack: '总数',
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'insideRight'
|
|||
|
|
},
|
|||
|
|
data: [150, 212, 201, 154, 190, 330]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
myChart1.setOption(option1)
|
|||
|
|
var myChart2 = echarts.init(document.getElementById('main2'))
|
|||
|
|
option2 = {
|
|||
|
|
title: {
|
|||
|
|
text: '培训合格发证情况'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
// 坐标轴指示器，坐标轴触发有效
|
|||
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ['完成', '未完成']
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '4%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'value'
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: [
|
|||
|
|
'职业卫生培训',
|
|||
|
|
'职业卫生管理员培训',
|
|||
|
|
'职业危害知识培训',
|
|||
|
|
'岗后培训',
|
|||
|
|
'岗中培训',
|
|||
|
|
'岗前培训'
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: '完成',
|
|||
|
|
type: 'bar',
|
|||
|
|
stack: '总数',
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'insideRight'
|
|||
|
|
},
|
|||
|
|
data: [320, 302, 250, 36, 87, 150]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '未完成',
|
|||
|
|
type: 'bar',
|
|||
|
|
stack: '总数',
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'insideRight'
|
|||
|
|
},
|
|||
|
|
data: [120, 132, 80, 124, 155, 160]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
myChart2.setOption(option2)
|
|||
|
|
var myChart3 = echarts.init(document.getElementById('main3'))
|
|||
|
|
|
|||
|
|
option3 = {
|
|||
|
|
title: {
|
|||
|
|
text: '各岗位参与培训统计',
|
|||
|
|
subtext: '统计数据',
|
|||
|
|
left: 'center'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item',
|
|||
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
// orient: 'vertical',
|
|||
|
|
// top: 'middle',
|
|||
|
|
bottom: 10,
|
|||
|
|
left: 'center',
|
|||
|
|
data: ['人事部', '售前部', '售后部', '技术部', '后勤部']
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: '65%',
|
|||
|
|
center: ['50%', '50%'],
|
|||
|
|
selectedMode: 'single',
|
|||
|
|
data: [{
|
|||
|
|
value: 1548,
|
|||
|
|
name: '部门',
|
|||
|
|
label: {
|
|||
|
|
formatter: [
|
|||
|
|
'{title|{b}}{abg|}',
|
|||
|
|
' {weatherHead|人数}{rateHead|占比}',
|
|||
|
|
'{hr|}',
|
|||
|
|
' {value|1876}{rate|35%}',
|
|||
|
|
' {value|388}{rate|20%}',
|
|||
|
|
' {value|160}{rate|10%}',
|
|||
|
|
' {value|89}{rate|8%}',
|
|||
|
|
' {value|67}{rate|7%}'
|
|||
|
|
].join('\n'),
|
|||
|
|
backgroundColor: '#eee',
|
|||
|
|
borderColor: '#777',
|
|||
|
|
borderWidth: 1,
|
|||
|
|
borderRadius: 4,
|
|||
|
|
rich: {
|
|||
|
|
title: {
|
|||
|
|
color: '#eee',
|
|||
|
|
align: 'center'
|
|||
|
|
},
|
|||
|
|
abg: {
|
|||
|
|
backgroundColor: '#333',
|
|||
|
|
width: '100%',
|
|||
|
|
align: 'right',
|
|||
|
|
height: 25,
|
|||
|
|
borderRadius: [4, 4, 0, 0]
|
|||
|
|
},
|
|||
|
|
weatherHead: {
|
|||
|
|
color: '#333',
|
|||
|
|
height: 24,
|
|||
|
|
align: 'left'
|
|||
|
|
},
|
|||
|
|
hr: {
|
|||
|
|
borderColor: '#777',
|
|||
|
|
width: '100%',
|
|||
|
|
borderWidth: 0.5,
|
|||
|
|
height: 0
|
|||
|
|
},
|
|||
|
|
value: {
|
|||
|
|
width: 20,
|
|||
|
|
padding: [0, 20, 0, 30],
|
|||
|
|
align: 'left'
|
|||
|
|
},
|
|||
|
|
valueHead: {
|
|||
|
|
color: '#333',
|
|||
|
|
width: 20,
|
|||
|
|
padding: [0, 20, 0, 30],
|
|||
|
|
align: 'center'
|
|||
|
|
},
|
|||
|
|
rate: {
|
|||
|
|
width: 40,
|
|||
|
|
align: 'right',
|
|||
|
|
padding: [0, 10, 0, 0]
|
|||
|
|
},
|
|||
|
|
rateHead: {
|
|||
|
|
color: '#333',
|
|||
|
|
width: 40,
|
|||
|
|
align: 'center',
|
|||
|
|
padding: [0, 10, 0, 0]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 535,
|
|||
|
|
name: '人事部'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 510,
|
|||
|
|
name: '售前部'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 634,
|
|||
|
|
name: '售后部'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 735,
|
|||
|
|
name: '技术部'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
emphasis: {
|
|||
|
|
itemStyle: {
|
|||
|
|
shadowBlur: 10,
|
|||
|
|
shadowOffsetX: 0,
|
|||
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
myChart3.setOption(option3)
|
|||
|
|
document.getElementById('main').onclick = function() {
|
|||
|
|
// /window.location="yjtjsz.html";
|
|||
|
|
|
|||
|
|
layer.open({
|
|||
|
|
type: 2,
|
|||
|
|
area: ['100%', '100%'],
|
|||
|
|
title: '培训数据统计情况',
|
|||
|
|
maxmin: true,
|
|||
|
|
content: 'pxsjtjqk.html',
|
|||
|
|
tn: ['关闭'],
|
|||
|
|
yes: function(index) {
|
|||
|
|
layer.close(index)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// document.getElementById("main1").onclick=function(){
|
|||
|
|
// // /window.location="yjtjsz.html";
|
|||
|
|
|
|||
|
|
// layer.open({
|
|||
|
|
// type: 2,
|
|||
|
|
// area: ['100%', '100%'],
|
|||
|
|
// title: "练习成绩",
|
|||
|
|
// maxmin: true,
|
|||
|
|
// content: 'lxjl.html',
|
|||
|
|
// tn: ['关闭'],
|
|||
|
|
// yes: function(index) {
|
|||
|
|
// layer.close(index);
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
// }
|
|||
|
|
// document.getElementById("main2").onclick=function(){
|
|||
|
|
// // /window.location="yjtjsz.html";
|
|||
|
|
|
|||
|
|
// layer.open({
|
|||
|
|
// type: 2,
|
|||
|
|
// area: ['100%', '100%'],
|
|||
|
|
// title: "面授课程",
|
|||
|
|
// maxmin: true,
|
|||
|
|
// content: 'mskc.html',
|
|||
|
|
// tn: ['关闭'],
|
|||
|
|
// yes: function(index) {
|
|||
|
|
// layer.close(index);
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
// }
|
|||
|
|
// document.getElementById("main3").onclick=function(){
|
|||
|
|
// // /window.location="yjtjsz.html";
|
|||
|
|
|
|||
|
|
// layer.open({
|
|||
|
|
// type: 2,
|
|||
|
|
// area: ['100%', '100%'],
|
|||
|
|
// title: "人员列表",
|
|||
|
|
// maxmin: true,
|
|||
|
|
// content: 'yglb.html',
|
|||
|
|
// tn: ['关闭'],
|
|||
|
|
// yes: function(index) {
|
|||
|
|
// layer.close(index);
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
// }
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|