606 lines
16 KiB
HTML
606 lines
16 KiB
HTML
<!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>
|