ZhiYeJianKang/职业健康平台后端/target/dzzyb/static/quxian/jcqk.html

606 lines
16 KiB
HTML
Raw Permalink Normal View History

2025-02-20 15:25:59 +08:00
<!DOCTYPE html>
<html>
<head>
<title>ECharts</title>
<!-- 引入 echarts.js -->
<link rel="stylesheet" href="js/layui-v2.5.6/layui/css/layui.css" media="all">
<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">
.clear_box::after {
content: "";
display: block;
clear: both;
}
.div_float {
width: 50%;
float: left;
}
</style>
</head>
<body>
<div class="sjzs_top">
</div>
<div class="sjzs_cont clear_box">
<div class="div_float">
<div id="main" style="width: 800px;height:400px;margin: 0 auto;"></div>
</div>
<div class="div_float">
<div id="main1" style="width: 800px;height:400px;margin: 0 auto;"></div>
</div>
<!-- <div class="div_float">
<div id="main2" style="width: 800px;height:400px;margin: 0 auto;"></div>
</div>
<div class="div_float">
<div id="main3" style="width: 800px;height:400px;margin: 0 auto;"></div>
</div> -->
</div>
<table id="demo" class="layui-hide" lay-filter="xk"></table>
<script type="text/javascript">
layui.use('table', function() {
var table = layui.table;
table.render({
elem: '#demo',
// url: 'files/jclb.json' //数据接口
// ,
"data": [{
qymc: "袁桥镇",
jcxm: "食堂",
jcsj: "2020-03-26",
jcr: "林东",
jcjg: "合格"
}, {
qymc: "抬头寺镇",
jcxm: "园区",
jcsj: "2020-01-16",
jcr: "刘志远",
jcjg: "不合格"
},
{
qymc: "赵虎镇",
jcxm: "技术部",
jcsj: "2020-01-24",
jcr: "孙雪键",
jcjg: "合格"
},
{
qymc: "黄河涯镇",
jcxm: "大厅",
jcsj: "2020-01-26",
jcr: "姜新成",
jcjg: "不合格"
},
{
qymc: "二屯镇",
jcxm: "大厅",
jcsj: "2020-01-26",
jcr: "姜新成",
jcjg: "不合格"
},
],
cellMinWidth: 80 //全局定义常规单元格的最小宽度
,
page: true //开启分页
,
cols: [
[ //表头
{
field: 'qymc',
title: 'Top5 乡镇'
}, {
field: 'jcxm',
title: '检测项目'
}, {
field: 'jcsj',
title: '检测时间'
}, {
field: 'jcr',
title: '检测人'
}, {
field: 'jcjg',
title: '检测结果'
}
]
]
});
//监听行工具事件
table.on('tool(xk)', function(obj) { //注tool 是工具条事件名test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data //获得当前行数据
,
layEvent = obj.event; //获得 lay-event 对应的值
if (layEvent === 'detail') {
ckzy();
}
});
});
// 基于准备好的dom初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
option = {
title: {
text: '乡镇检测情况统计'
},
color: ['#003366', '#e5323e'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['完成', '未完成']
},
toolbox: {
show: false,
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',
axisLabel: {
interval: 0
},
axisTick: {
show: false
},
data: ['袁桥镇', '抬头寺镇', '赵虎镇', '黄河涯镇', '二屯镇']
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '完成',
type: 'bar',
barGap: 0,
barWidth: 35,
data: [520, 432, 360, 250, 120]
},
{
name: '未完成',
type: 'bar',
barWidth: 35,
data: [220, 182, 200, 56, 50]
}
]
};
myChart.setOption(option);
// option = {
// tooltip: {
// trigger: 'item',
// formatter: '{a} <br/>{b}: {c} ({d}%)'
// },
// legend: {
// orient: 'vertical',
// left: 10,
// data: [' 岗前培训', '技术培训', '基础课程', '普通话培训', '人事部门培训', '技术部门培训']
// },
// series: [{
// name: '访问来源',
// type: 'pie',
// selectedMode: 'single',
// radius: [0, '30%'],
// label: {
// position: 'inner'
// },
// labelLine: {
// show: false
// },
// data: [{
// value: 335,
// name: '电脑端',
// selected: true
// },
// {
// value: 679,
// name: '移动端'
// },
// ]
// },
// {
// name: '课程名称',
// type: 'pie',
// radius: ['40%', '55%'],
// label: {
// formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}}{c} {per|{d}%} ',
// backgroundColor: '#eee',
// borderColor: '#aaa',
// borderWidth: 1,
// borderRadius: 4,
// // shadowBlur:3,
// // shadowOffsetX: 2,
// // shadowOffsetY: 2,
// // shadowColor: '#999',
// // padding: [0, 7],
// rich: {
// a: {
// color: '#999',
// lineHeight: 22,
// align: 'center'
// },
// // abg: {
// // backgroundColor: '#333',
// // width: '100%',
// // align: 'right',
// // height: 22,
// // borderRadius: [4, 4, 0, 0]
// // },
// hr: {
// borderColor: '#aaa',
// width: '100%',
// borderWidth: 0.5,
// height: 0
// },
// b: {
// fontSize: 16,
// lineHeight: 33
// },
// per: {
// color: '#eee',
// backgroundColor: '#334455',
// padding: [2, 4],
// borderRadius: 2
// }
// }
// },
// data: [{
// value: 335,
// name: '岗前培训'
// },
// {
// value: 310,
// name: '技术培训'
// },
// {
// value: 234,
// name: '基础课程'
// },
// {
// value: 135,
// name: '普通话培训'
// },
// {
// value: 1048,
// name: '人事部门培训'
// },
// {
// value: 251,
// name: '技术部门培训'
// }
// ]
// }
// ]
// };
// 使用刚指定的配置项和数据显示图表。
// myChart.setOption(option);
// var myChart1 = echarts.init(document.getElementById('main1'));
// option1 = {
// 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 = {
// 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 myChart1 = echarts.init(document.getElementById('main1'));
option1 = {
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: [{
name: '袁桥镇',
value: 220
// 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: 182,
name: '抬头寺镇'
},
{
value: 200,
name: '赵虎镇'
},
{
value: 56,
name: '黄河涯镇'
},
{
value: 50,
name: '二屯镇'
}
]
}]
};
myChart1.setOption(option1);
// document.getElementById("main").onclick = function() {
// // /window.location="yjtjsz.html";
// layer.open({
// type: 2,
// area: ['50%', '70%'],
// title: "面授课程",
// maxmin: true,
// content: 'mskc.html',
// tn: ['关闭'],
// yes: function(index) {
// layer.close(index);
// }
// })
// }
// document.getElementById("main1").onclick = function() {
// // /window.location="yjtjsz.html";
// layer.open({
// type: 2,
// area: ['50%', '70%'],
// 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: ['50%', '70%'],
// 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: ['50%', '70%'],
// title: "人员列表",
// maxmin: true,
// content: 'yglb.html',
// tn: ['关闭'],
// yes: function(index) {
// layer.close(index);
// }
// })
// }
</script>
</body>
</html>