431 lines
14 KiB
Plaintext
431 lines
14 KiB
Plaintext
<%@ page contentType="text/html;charset=UTF-8" %>
|
||
<%@ include file="/webpage/include/taglib.jsp"%>
|
||
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<title>ECharts</title>
|
||
<!-- 引入 echarts.js -->
|
||
<script src="${ctxStatic}/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
|
||
<script src="/dzzyb/static/echarts/echarts.min.js" charset="utf-8"></script>
|
||
<script src="/dzzyb/static/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="main3" style="width: 100%;height:400px;margin: 0 auto;"></div>
|
||
</div>
|
||
<div class="div_float ">
|
||
<div id="main2" style="width: 100%;height:400px;margin: 0 auto;"></div>
|
||
</div>
|
||
<%-- <div class="div_float margin_rig">--%>
|
||
<%-- <div id="main3" style="width: 100%;height:400px;margin: 0 auto;"></div>--%>
|
||
<%-- </div>--%>
|
||
<%-- <div class="div_float">--%>
|
||
<%-- <div id="main2" style="width: 100%;height:400px;margin: 0 auto;"></div>--%>
|
||
<%-- </div>--%>
|
||
</div>
|
||
|
||
<script type="text/javascript">
|
||
|
||
function GetPercent(num, total) {
|
||
/// <summary>
|
||
/// 求百分比
|
||
/// </summary>
|
||
/// <param name="num">当前数</param>
|
||
/// <param name="total">总数</param>
|
||
num = parseFloat(num);
|
||
total = parseFloat(total);
|
||
if (isNaN(num) || isNaN(total)) {
|
||
return "-";
|
||
}
|
||
return total <= 0 ? "" : (Math.round(num / total * 10000) / 100.00);
|
||
}
|
||
var colors = ['#C23531', '#2F4554', '#675bba'];
|
||
// 基于准备好的dom，初始化echarts实例
|
||
//var myChart = echarts.init(document.getElementById('main'))
|
||
$.get('${ctx}/zyb/logon/getPxSize', function(data) {//与服务器连接成功
|
||
|
||
let Xlist = [];
|
||
let PxSixeZsList=[];
|
||
let PxSizeList=[];
|
||
let noPxSize=[];
|
||
console.log(data);//获取到的json数据是个对象
|
||
for(var i = 0;i<data.data.length;i++){
|
||
Xlist.push(data.data[i].pxTime);
|
||
PxSixeZsList.push(data.data[i].pxSizeZs);
|
||
PxSizeList.push(data.data[i].pxSize);
|
||
//data.data[i].noPxSize
|
||
noPxSize.push(GetPercent(data.data[i].pxSize,data.data[i].pxSizeZs));
|
||
}
|
||
console.log(Xlist,PxSixeZsList,PxSizeList,noPxSize)
|
||
myChart.setOption(option = {
|
||
title: {
|
||
text: '培训完成情况统计',
|
||
subtext: '2020年1月-4月'
|
||
},
|
||
color: colors,
|
||
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross'
|
||
},
|
||
//formatter: '{a} <br/>{b}<br/> {c} <br/> ({d}%)'
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
|
||
legend: {
|
||
data: ['计划人数', '实际人数', '完成率']
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
},
|
||
// data: Xlist
|
||
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: PxSixeZsList
|
||
data: [156, 121, 154, 164]
|
||
},
|
||
{
|
||
name: '实际人数',
|
||
type: 'bar',
|
||
barWidth: 40,
|
||
/* data: PxSizeList*/
|
||
data: [132, 119, 146,152]
|
||
},
|
||
{
|
||
name: '完成率',
|
||
type: 'line',
|
||
yAxisIndex: 1,
|
||
// data: noPxSize
|
||
data: [80.0, 98.3, 94.8, 92.6]
|
||
}
|
||
]
|
||
});
|
||
});
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
//培训分数
|
||
//var myChart1 = echarts.init(document.getElementById('main1'))
|
||
$.get('${ctx}/zyb/logon/getPxFsTj', function(data) {
|
||
console.log("培训数据统计",data);
|
||
let nameList = [];
|
||
let dFen=[];
|
||
let zFen = [];
|
||
let gFen = [];
|
||
let vFen = [];
|
||
for(let item of data.data){
|
||
console.log("1",item)
|
||
nameList.push(item.pxkc);
|
||
dFen.push(item.diFen);
|
||
zFen.push(item.zfen);
|
||
gFen.push(item.gfen);
|
||
vFen.push(item.vfen)
|
||
}
|
||
console.log(nameList)
|
||
// for(let i=0;i<data.data.length;i++){
|
||
// nameList.push(data.data[i].pxkcName);
|
||
// isTrueList.push(data.data[i].isTrue);
|
||
// isFalseList.push(data.data[i].isFalse);
|
||
// }
|
||
myChart1.setOption(
|
||
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: nameList
|
||
data: [
|
||
'职业卫生培训',
|
||
'职业卫生管理员培训',
|
||
'职业危害知识培训',
|
||
'岗后培训',
|
||
'岗中培训',
|
||
'岗前培训'
|
||
]
|
||
},
|
||
series: [{
|
||
name: '0-59分',
|
||
type: 'bar',
|
||
stack: '总数',
|
||
label: {
|
||
show: true,
|
||
position: 'insideRight'
|
||
},
|
||
//data: dFen//[320, 302, 301, 334, 390, 330]
|
||
data:[320, 302, 301, 334, 390, 330]
|
||
},
|
||
{
|
||
name: '60-79分',
|
||
type: 'bar',
|
||
stack: '总数',
|
||
label: {
|
||
show: true,
|
||
position: 'insideRight'
|
||
},
|
||
//data: zFen//[120, 132, 101, 134, 90, 230]
|
||
data: [120, 132, 101, 134, 90, 230]
|
||
},
|
||
{
|
||
name: '80-99分',
|
||
type: 'bar',
|
||
stack: '总数',
|
||
label: {
|
||
show: true,
|
||
position: 'insideRight'
|
||
},
|
||
//data: gFen//[220, 182, 191, 234, 290, 330]
|
||
data: [220, 182, 191, 234, 290, 330]
|
||
},
|
||
{
|
||
name: '100分',
|
||
type: 'bar',
|
||
stack: '总数',
|
||
label: {
|
||
show: true,
|
||
position: 'insideRight'
|
||
},
|
||
// data: vFen//[150, 212, 201, 154, 190, 330]
|
||
data: [150, 212, 201, 154, 190, 330]
|
||
}
|
||
]
|
||
}
|
||
)
|
||
});
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
var myChart2 = echarts.init(document.getElementById('main2'))
|
||
$.get('${ctx}/zyb/logon/getPxHgzSize', function(data) {
|
||
console.log(data);
|
||
let nameList = [];
|
||
let isTrueList=[];
|
||
let isFalseList = [];
|
||
for(let i=0;i<data.data.length;i++){
|
||
nameList.push(data.data[i].pxkcName);
|
||
isTrueList.push(data.data[i].isTrue);
|
||
isFalseList.push(data.data[i].isFalse);
|
||
}
|
||
|
||
myChart2.setOption( 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: //nameList
|
||
['生产技术部', '人力资源部', '财务部', '计划营销部']
|
||
},
|
||
series: [{
|
||
name: '确诊',
|
||
type: 'bar',
|
||
stack: '总数',
|
||
label: {
|
||
show: true,
|
||
position: 'insideRight'
|
||
},
|
||
// data:isTrueList// [320, 302, 250, 36, 87, 150]
|
||
data:[2, 2, 1, 6]
|
||
},
|
||
{
|
||
name: '疑似',
|
||
type: 'bar',
|
||
stack: '总数',
|
||
label: {
|
||
show: true,
|
||
position: 'insideRight'
|
||
},
|
||
// data: isFalseList//[120, 132, 80, 124, 155, 160]
|
||
data:[1, 2, 5, 14]
|
||
}
|
||
]
|
||
})
|
||
})
|
||
|
||
var myChart3 = echarts.init(document.getElementById('main3'))
|
||
$.get('${ctx}/zyb/logon/getBmPxRs', function(data) {
|
||
console.log(data,"各岗位参与培训统计");
|
||
let BmRsName = [];
|
||
let BmPxRs = [];
|
||
let objList = [];
|
||
for(let i=0;i<data.data.length;i++ ){
|
||
BmRsName.push(data.data[i].departmentName)
|
||
BmPxRs.push(data.data[i].pxBmRs)
|
||
objList.push({"name":data.data[i].departmentName,"value":data.data[i].pxBmRs})
|
||
};
|
||
console.log(objList)
|
||
myChart3.setOption(
|
||
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: BmRsName//['人事部', '售前部', '售后部', '技术部', '后勤部']
|
||
data: ['生产技术部', '人力资源部', '财务部', '计划营销部']
|
||
},
|
||
series: [{
|
||
type: 'pie',
|
||
radius: '65%',
|
||
center: ['50%', '50%'],
|
||
selectedMode: 'single',
|
||
// data: objList,
|
||
data:[
|
||
{
|
||
value: 2,
|
||
name: '生产技术部'
|
||
},
|
||
{
|
||
value: 2,
|
||
name: '人力资源部'
|
||
},
|
||
{
|
||
value: 1,
|
||
name: '财务部'
|
||
},
|
||
{
|
||
value: 6,
|
||
name: '计划营销部'
|
||
}
|
||
],
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}]
|
||
}
|
||
|
||
)
|
||
|
||
})
|
||
|
||
|
||
|
||
document.getElementById('main').onclick = function() {
|
||
// /window.location="yjtjsz.html";
|
||
|
||
layer.open({
|
||
type: 2,
|
||
area: ['100%', '100%'],
|
||
title: '培训数据统计情况',
|
||
maxmin: true,
|
||
content: '${ctx}/zyb/logon/cfqkXgqy',
|
||
tn: ['关闭'],
|
||
yes: function(index) {
|
||
layer.close(index)
|
||
}
|
||
})
|
||
}
|
||
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|