241 lines
6.0 KiB
Plaintext
241 lines
6.0 KiB
Plaintext
<%@ page contentType="text/html;charset=UTF-8" %>
|
||
<%@ include file="/webpage/include/taglib.jsp"%>
|
||
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
|
||
<title>ECharts</title>
|
||
<!-- 引入 echarts.js -->
|
||
<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>
|
||
<script src="${ctxStatic}/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
|
||
<style type="text/css">
|
||
.clear_box::after {
|
||
content: "";
|
||
display: block;
|
||
clear: both;
|
||
}
|
||
|
||
.div_float {
|
||
width: 50%;
|
||
float: left;
|
||
}
|
||
|
||
.layui-btn-primary {
|
||
border: 1px solid #C9C9C9;
|
||
background-color: #01b9dd !important;
|
||
color: white !important;
|
||
}
|
||
.gray-bg {
|
||
background-color: #f3f3f4 !important;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="gray-bg">
|
||
<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>
|
||
|
||
<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">
|
||
layui.use('table', function() {
|
||
var table = layui.table;
|
||
table.render({
|
||
elem: '#demo',
|
||
// url: 'files/jclb.json' //数据接口[123, 265, 372, 274][84, 182, 213, 56]
|
||
// ,
|
||
"data": ${areaCfqkJson},
|
||
cellMinWidth: 80 //全局定义常规单元格的最小宽度
|
||
,
|
||
page: false //开启分页
|
||
,
|
||
cols: [
|
||
[ //表头
|
||
{
|
||
field: 'areaName',
|
||
title: '区域'
|
||
}, {
|
||
field: 'areaJcgs',
|
||
title: '区域检测人数'
|
||
}, {
|
||
field: 'quezhen',
|
||
title: '尘肺确诊人数'
|
||
}, {
|
||
field: 'yisi',
|
||
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('查看详情');
|
||
}
|
||
});
|
||
});
|
||
|
||
|
||
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('main'));
|
||
|
||
|
||
|
||
$.get('${ctx}/zyb/logon/getAreaCfCout', function(data) {//与服务器连接成功
|
||
var areaName = [];
|
||
var areaQuezhen = [];
|
||
var areaYisi = [];
|
||
for (var i = 0; i < data.data.length; i++) {
|
||
areaName[i] = data.data[i].areaName;
|
||
areaQuezhen[i] = data.data[i].quezhen;
|
||
areaYisi[i] = data.data[i].yisi;
|
||
}
|
||
myChart.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: areaName
|
||
}],
|
||
yAxis: [{
|
||
type: 'value'
|
||
}],
|
||
dataZoom: [{
|
||
type: 'slider',
|
||
show: true,
|
||
xAxisIndex: [0],
|
||
left: '9%',
|
||
bottom: -5,
|
||
start: 10,
|
||
end: 90 //初始化滚动条
|
||
}],
|
||
series: [{
|
||
name: '确诊',
|
||
type: 'bar',
|
||
barGap: 0,
|
||
barWidth: 35,
|
||
data: areaQuezhen
|
||
},
|
||
{
|
||
name: '疑似',
|
||
type: 'bar',
|
||
barWidth: 35,
|
||
data: areaYisi
|
||
}
|
||
]
|
||
});
|
||
});
|
||
|
||
//myChart.setOption(option);
|
||
var myChart1 = echarts.init(document.getElementById('main1'));
|
||
|
||
|
||
$.get('${ctx}/zyb/logon/getCfWtgQk', function(data) {//与服务器连接成功
|
||
console.log(data)
|
||
let AreaList = [];
|
||
let WtgList = [];
|
||
for (var i = 0; i < data.data.length; i++) {
|
||
AreaList.push(data.data[i].areaName)
|
||
WtgList.push({"name": data.data[i].areaName, "value": data.data[i].quezhen});
|
||
}
|
||
myChart1.setOption(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: AreaList
|
||
},
|
||
series: [{
|
||
type: 'pie',
|
||
radius: '65%',
|
||
center: ['50%', '50%'],
|
||
selectedMode: 'single',
|
||
data: WtgList
|
||
}]
|
||
});
|
||
});
|
||
|
||
//myChart1.setOption(option1);
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|