<!DOCTYPE html>
|
<html class="no-js css-menubar" lang="zh-cn">
|
|
<head>
|
<script type="text/javascript" src="echart/echarts4.0.js"></script>
|
<link href="echart/theme/shine.js" rel="stylesheet" />
|
<link rel="stylesheet" href="../../lib/layui/css/layui.css">
|
<script type="text/javascript" src="../../lib/jquery/jquery-2.1.4.min.js"></script>
|
|
<script type="text/javascript" src="../../lib/layui/layui.js"></script>
|
|
|
<style>
|
#echart {
|
width: 100%;
|
height: 50%;
|
/* background-color: hotpink; */
|
margin-bottom: 80px;
|
margin-top: 50px;
|
}
|
|
#echart>table {
|
width: 100%;
|
height: 50%;
|
/* border-collapse:collapse; */
|
color: aqua;
|
font: italic 400 16px "宋体";
|
border-radius: 10px;
|
}
|
|
table>tr>th {
|
border-radius: 5px;
|
}
|
</style>
|
</head>
|
|
<!-- <body style="padding:5px;text-align:center;background-color: azure;"> -->
|
|
<body cl>
|
<ul class="layui-nav" lay-bar="disabled">
|
<li class="layui-nav-item">
|
<a href="">国控点<span class="layui-badge" id="count1">0</span></a>
|
</li>
|
<li class="layui-nav-item">
|
<a href="">监测点<span class="layui-badge" id="count2">0</span></a>
|
</li>
|
<li class="layui-nav-item">
|
<a href="">微站<span class="layui-badge" id="count3">0</span></a>
|
</li>
|
<li class="layui-nav-item">
|
<a href="">移动监测站<span class="layui-badge" id="count4">0</span></a>
|
</li>
|
<li class="layui-nav-item">
|
<a href="">监测区域<span class="layui-badge" id="count5">0</span></a>
|
</li>
|
</ul>
|
|
<div id="chart" style="width:100%;height:300px;">
|
|
</div>
|
|
|
|
|
<script>
|
//对应widget.js中MyWidget实例化后的对象
|
var thisWidget
|
|
//当前页面业务
|
function initWidgetView(_thisWidget) {
|
thisWidget = _thisWidget
|
|
}
|
|
//
|
var backend_url = "http://112.74.77.127:9090/geoserver/sxyd112_47_77_127/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=sxyd112_47_77_127%3Atest_userid&maxFeatures=50&outputFormat=application%2Fjson&viewparams=id1:0;id2:10";
|
|
|
$.ajax({
|
type: 'get',
|
dataType: 'json',
|
data: {},
|
async: false,//同步
|
url: backend_url,
|
timeout: 0,
|
success: function (data) {
|
console.log(data);
|
|
$("#count1").text(39);
|
$("#count2").text(34);
|
$("#count3").text(0);
|
$("#count4").text(2);
|
$("#count5").text(12);
|
|
|
|
|
},
|
error: function (request, textStatus) {
|
console.log(textStatus, request);
|
}
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
