299 lines
7.6 KiB
Plaintext
299 lines
7.6 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>
|
||
<link rel="stylesheet" href="/dzzyb/static/js/layui-v2.5.6/layui/css/layui.css" media="all">
|
||
<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;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.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%;
|
||
}
|
||
.display{
|
||
display: none;
|
||
}
|
||
.layui-btn-primary {
|
||
border: 1px solid #C9C9C9;
|
||
background-color: #01b9dd !important;
|
||
color: white !important;
|
||
}
|
||
</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 margin_rig">
|
||
<div id="main1" style="width: 100%;height:400px;margin: 0 auto;"></div>
|
||
</div>
|
||
</div>
|
||
<table id="demo" class="layui-hide" lay-filter="xk"></table>
|
||
|
||
<script type="text/html" id="barDemo">
|
||
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">工单整改</a>
|
||
</script>
|
||
|
||
<script type="text/javascript">
|
||
|
||
function GetPercent(num, total) {
|
||
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'];
|
||
layui.use('table', function() {
|
||
var table = layui.table;
|
||
|
||
table.render({
|
||
elem: '#demo',
|
||
// url: '${ctx}/zyb/logon/getAreaQkList', //数据接口[123, 265, 372, 274][84, 182, 213, 56]
|
||
"data":${wpxqyJson},
|
||
cellMinWidth: 80,//全局定义常规单元格的最小宽度,
|
||
page: false,//开启分页,
|
||
cols: [
|
||
[ //表头
|
||
{
|
||
field: 'qymc',
|
||
title: '企业名称'
|
||
},
|
||
{
|
||
field: 'gly',
|
||
title: '管理员'
|
||
}, {
|
||
field: 'glyPhone',
|
||
title: '联系方式'
|
||
},{
|
||
fixed: 'right',
|
||
title: '查看',
|
||
width: 165,
|
||
align: 'center',
|
||
toolbar: '#barDemo'
|
||
}
|
||
]
|
||
]
|
||
});
|
||
//监听行工具事件
|
||
table.on('tool(xk)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
|
||
var data = obj.data //获得当前行数据
|
||
,
|
||
layEvent = obj.event; //获得 lay-event 对应的值
|
||
if (layEvent === 'detail') {
|
||
layer.msg('查看详情');
|
||
}
|
||
});
|
||
});
|
||
|
||
var myChart = echarts.init(document.getElementById('main'))
|
||
$.get('${ctx}/zyb/logon/getPxsjtjl', function(data) {//与服务器连接成功
|
||
|
||
let Xlist = [];
|
||
let PxSixeZsList=[];
|
||
let PxSizeList=[];
|
||
let noPxSize=[];
|
||
console.log(data);//获取到的json数据是个对象
|
||
for(var i = 0;i<6;i++){
|
||
Xlist.push(data.data[i].areaName);
|
||
PxSixeZsList.push(data.data[i].wcSize);
|
||
PxSizeList.push(data.data[i].wwcSize);
|
||
//data.data[i].noPxSize
|
||
noPxSize.push(GetPercent(data.data[i].pxSize,data.data[i].pxwcl));
|
||
}
|
||
// 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
|
||
}],
|
||
dataZoom: [{
|
||
type: 'slider',
|
||
show: true,
|
||
xAxisIndex: [0],
|
||
left: '9%',
|
||
bottom: -5,
|
||
start: 10,
|
||
end: 90 //初始化滚动条
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
position: 'left',
|
||
},
|
||
{},
|
||
{
|
||
type: 'value',
|
||
name: '完成率',
|
||
position: 'right',
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: colors[2]
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: [{
|
||
name: '计划人数',
|
||
barWidth: 40,
|
||
type: 'bar',
|
||
data: PxSixeZsList
|
||
},
|
||
{
|
||
name: '实际人数',
|
||
type: 'bar',
|
||
barWidth: 40,
|
||
data: PxSizeList
|
||
},
|
||
{
|
||
name: '完成率',
|
||
type: 'line',
|
||
yAxisIndex: 1,
|
||
data: noPxSize
|
||
}
|
||
]
|
||
});
|
||
});
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
var myChart1 = echarts.init(document.getElementById('main1'));
|
||
$.get('${ctx}/zyb/logon/getFzqk', function(data) {
|
||
let fzqkList = [];
|
||
let AreaList=[];
|
||
for(let i=0;i<data.data.length;i++){
|
||
fzqkList.push(data.data[i].tgSize);
|
||
AreaList.push(data.data[i].areaName);
|
||
};
|
||
myChart1.setOption(
|
||
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: AreaList//['德诚区', '平原县', '武城县', '夏津县', '齐河县']
|
||
}],
|
||
dataZoom: [{
|
||
type: 'slider',
|
||
show: true,
|
||
xAxisIndex: [0],
|
||
left: '9%',
|
||
bottom: -5,
|
||
start: 10,
|
||
end: 90 //初始化滚动条
|
||
}],
|
||
yAxis: [{
|
||
type: 'value'
|
||
}],
|
||
series: [{
|
||
name: '签发',
|
||
type: 'bar',
|
||
barGap: 0,
|
||
barWidth: 35,
|
||
data: fzqkList//[1372, 1765, 1272, 974, 700]
|
||
}
|
||
]
|
||
}
|
||
|
||
)
|
||
});
|
||
|
||
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|