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