Java开发千人交流群 677807540 大家可以一起讨论技术欢迎加入
1.js代码块
// ECharts 山东地图
(function($) {
$.fn.strokerShandongMapCharts = function(options) {
var myChart = echarts.init(document.getElementById('main'));
//存储切换的每一级地图信息
var mapStack = [];
var cityMap = {
"济南市" : "370100",
"青岛市" : "370200",
"淄博市" : "370300",
"枣庄市" : "370400",
"东营市" : "370500",
"烟台市" : "370600",
"潍坊市" : "370700",
"济宁市" : "370800",
"泰安市" : "370900",
"威海市" : "371000",
"日照市" : "371100",
"莱芜市" : "371200",
"临沂市" : "371300",
"德州市" : "371400",
"聊城市" : "371500",
"滨州市" : "371600",
"菏泽市" : "371700"
};
var timeFn = null;
var curMap = {};
//初始化为中国地图
loadMap('shandong', '山东');
/**
绑定用户切换地图区域事件
cityMap对象存储着地图区域名称和区域的信息(name-code)
当mapCode有值,说明可以切换到下级地图
同时保存上级地图的编号和名称
*/
myChart.on('mapselectchanged', function(params) {
clearTimeout(timeFn);
//由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
timeFn = setTimeout(function(){
var name = params.batch[0].name;
var mapCode = cityMap[name];
if (!mapCode) {
alert('无此区域地图显示');
return;
}
//打开一个新的页面根据code显示地图
window.location.href = ("sdNewDiTu.action?method=getShi&cityId="+mapCode+"&cityName="+$.encodeUTF8(name));
// loadMap(mapCode, name);
//将上一级地图信息压入mapStack
mapStack.push({
mapCode: curMap.mapCode,
mapName: curMap.mapName
});
}, 250);
});
/**
绑定双击事件，并加载上一级地图
*/
/*myChart.on('dblclick', function(params) {
//当双击事件发生时，清除单击事件，仅响应双击事件
clearTimeout(timeFn);
var map = mapStack.pop();
if (!mapStack.length && !map) {
alert('已经到达最上一级地图了');
return;
}
loadMap(map.mapCode, map.mapName);
});*/
/**
加载地图：根据地图所在省市的行政编号，
获取对应的json地图数据，然后向echarts注册该区域的地图
最后加载地图信息
@params {String} mapCode:地图行政编号,for example['中国':'100000', '湖南': '430000']
@params {String} mapName: 地图名称
*/
function loadMap(mapCode, mapName) {
$.getJSON($.getRootPath()+"/static_resources/js/echarts/3.0/map/" + mapCode + '.json', function (data) {
if (data) {
echarts.registerMap(mapName, data);
var option = {
textStyle: {
color: "#4f7cd7",
fontStyle: 'normal',
fontWeight: 'bolder',
fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif',
fontSize: 15
},
tooltip: {
trigger: 'item',
formatter: '{b}'
},
series: [
{
name: '',
type: 'map',
mapType: mapName,
selectedMode : 'multiple',
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data:[
]
}
]
};
myChart.setOption(option);
curMap = {
mapCode: mapCode,
mapName: mapName
};
} else {
alert('无法加载该地图');
}
});
}
}
})(jQuery);2.html代码块
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib uri="/WEB-INF/tld/c" prefix="c" %>
<%@ taglib uri="/WEB-INF/tld/fn" prefix="fn" %>
<%@ taglib prefix="p" tagdir="/WEB-INF/tags/ptags" %>
<%@ taglib uri="/WEB-INF/tld/fmt" prefix="fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("basePath", basePath);
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>山东省上报地图</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="${basePath }static_resources/js/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${basePath }static_resources/css/ChestpainShow/bootstrap.css">
<script src="${basePath}static_resources/js/echarts/4.0/echarts.js"></script>
<script type="text/javascript" src="${basePath}/static_resources/js/ChestpainShow/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="${basePath}/static_resources/js/ChestpainShow/bootstrap.min.js"></script>
<script src="${basePath}static_resources/js/jquery.extend.js"></script>
<script type="text/javascript" src="${basePath}static_resources/js/sdchestpain/sdNewDiTu.js"></script>
<script type="text/javascript" src="${basePath }static_resources/js/laydate/laydate.js"></script>
<style type="text/css">
input.form-control {
text-align: center;
padding: 10px 20px;
font-size: 16px;
color: #333
}
#city-picker3 {
min-width: 360px;
}
#inDate, #search-input {
height: 35px;
border: 1px solid #ddd;
}
.table {
width: 99%;
height:100%;
margin-top: 1%;
}
.table th{
text-align: center;
color: white;
background: #46a2ff;
font-family: 微软雅黑;
font-weight: unset;
}
.table td{
text-align: center;
}
.input-group {
position: relative;
margin: 13px;
border-collapse: separate;
}
a.btn {
padding-left: 15px;
float: right;
margin-top: 0px;
color: black;
margin-right: 13px;
}
.container-fluid {
height: 91% !important;
}
#tablelist tbody {
border:0px solid red;
display:block;
height:55%;
overflow-y:auto;
}
#tablelist thead ,#tablelist tr {
display:table;
width:100%;
table-layout:fixed;
}
</style>
<script type="text/javascript">
$(function () {
//调用地图
$("#main").strokerShandongMapCharts({
});
});
window.onload = function () {
$(".laydate").each(function() {
$(this).attr("readonly", "readonly");
$(this).css("background-color", "#fff");
laydate.render({
elem : this,//指定元素 表示当前的元素
type : 'month',
trigger : 'click',
theme : '#0099FF'
});
});
}
</script>
</head>
<body style="overflow-y:hidden;background-color: #f5f5f5;">
<form action="${basePath}sdNewDiTu.action?method=getSDData"
method="post" class="form-inline" id="form0">
<center>
<div class="row">
<div class="box-tools pull-left">
<input id="cityId" name="cityId" class="form-control"
style="display: none"></input>
<div class="input-group" style="margin-left: 30px;">
<span class="input-group-addon" style="width: 80px;color: #0f0f0f">开始时间</span> <input
size="2" type="text" class="form-control laydate" style="width: 130px;color:#bebebe"
id="startTime" name="startTime" value="${startTime}">
</div>
<div class="input-group">
<span class="input-group-addon" style="width: 80px;color: #0f0f0f">结束时间</span> <input
size="2" type="text" class="form-control laydate" style="width: 130px;color:#bebebe"
id="endTime" name="endTime" value="${endTime}">
</div>
<button type="submit" class="btn " id="query"
style="margin-left: 99px; margin-top: 15px; margin-left: 40px; margin-bottom: 15px;
background-color: #409eff;color: white;border-radius:20px;width:100px">查询
</button>
</div>
</div>
<div class="container-fluid" id="page-content">
<div style="height: 80%;background-color: #ffffff">
<div id="main" style="height: 100%;"></div>
</div>
<div class="row" >
<table class="table" id="tablelist"style="background-color: #ffffff">
<thead>
<tr>
<th>医院应上报数量</th>
<th>医院实际上报数量</th>
</tr>
</thead>
<tbody>
<tr>
<td>${count}</td>
<td>${provinceList}</td>
</tr>
<c:choose>
<c:when test="${empty provinceList}">
<tr>
<td colspan="5">暂无数据！</td>
</tr>
</c:when>
</c:choose>
</tbody>
</table>
</div>
</div>
<c:if test="${start eq 1}">
<div style=" margin-top:0px;width:93%; border:1px 0xFFFFFF solid;position:fixed;bottom: 10px;right:3%;">
<p:pagefooter></p:pagefooter>
</div>
</c:if>
</center>
</form>
</body>
</html>
版权声明：本文为Bian_MCheng原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。