Java记录-SpringMVC整合Echarts画地图加散点图
1.搭建eclipse+JDK+Maven+SpringMVC+Spring+Mybatis后台架构，详细就不过多阐述了
2.下载百度eharts插件：http://echarts.baidu.com/download.html 下载地图JSON
3.后台代码架构
3.1 entity层核心关键代码
public class LgorgInfo {
private String tmw;
private String dtype;
private String orgname;
private String len;
private String organlongitude;
private String organlatitude;
private String origin;
public String getOrganlongitude() {
return organlongitude;
}
public void setOrganlongtitude(String organlongtitude) {
this.organlongitude = organlongtitude;
}
public String getOrganlatitude() {
return organlatitude;
}
public void setOrganlatitude(String organlatitude) {
this.organlatitude = organlatitude;
}
public String getLen() {
return len;
}
public void setLen(String len) {
this.len = len;
}
public String getTmw() {
return tmw;
}
public void setTmw(String tmw) {
this.tmw = tmw;
}
public String getDtype() {
return dtype;
}
public void setDtype(String dtype) {
this.dtype = dtype;
}
public String getOrgname() {
return orgname;
}
public void setOrgname(String orgname) {
this.orgname = orgname;
}
public String getOrigin() {
return origin;
}
public void setOrigin(String origin) {
this.origin = origin;
}
}3.2 dao层核心关键代码
@MyBatisDao
public interface LgorgmapDao extends CrudDao<Object>{
/***
* 获取机构名和病例数
* 获取对应的时间
* 获取对应的时间长度
* @param begindate
* @return
*/
/***
* 按月
* @param begindate
* @return
*/
public abstract List<LgorgInfo> getlgorgBymon(String begindate);
public abstract List<String> getlgorgBymondate(String begindate);
/***
* 按周
* @param begindate
* @return
*/
public abstract List<LgorgInfo> getlgorgByweek(String begindate);
public abstract List<String> getlgorgByweekdate(String begindate);
/***
* 最近一周
* @param begindate
* @return
*/
public abstract List<LgorgInfo> getlgorgBydayw(String begindate);
public abstract List<String> getlgorgBydaywdate(String begindate);
/***
* 最近一月
* @param begindate
* @return
*/
public abstract List<LgorgInfo> getlgorgBydaym(String begindate);
public abstract List<String> getlgorgBydaymdate(String begindate);
}
3.3 service层核心关键代码@Service
@Transactional(readOnly = true)
public class LgorgmapService extends BaseService {
@Autowired
private LgorgmapDao LgorgmapDao;
@Autowired
private GetMaxDateDao maxDateDao;
/***
* 获取流感机构信息（机构名、病例数据、时间）
*
* @param begindate
* @param datetype
* @return
*/
public Map<String, Object> getlgorgmap(String begindate, String datetype) {
Map<String, Object> map = new HashMap<String, Object>();
List<HashMap<String, Object>> maxdate = new ArrayList<HashMap<String, Object>>();
List<String> mList = new ArrayList<String>();
maxdate = maxDateDao.getlgmaxdate();// 获取手足口数据的最大时间
if (maxdate != null && maxdate.size() > 0) {
for (HashMap<String, Object> hashMap : maxdate) {
String dname = hashMap.get("VDATE") + "";
mList.add(dname);
}
}
begindate = mList.get(0).toString();
List<LgorgInfo> list = new ArrayList<LgorgInfo>();
List<String> timeLineData = new ArrayList<String>();
if (datetype.indexOf("最近一周") != -1) {
timeLineData = this.LgorgmapDao.getlgorgBydaywdate(begindate);
list = this.LgorgmapDao.getlgorgBydayw(begindate);
} else if (datetype.indexOf("最近一月") != -1) {
timeLineData = this.LgorgmapDao.getlgorgBydaymdate(begindate);
list = this.LgorgmapDao.getlgorgBydaym(begindate);
} else if (datetype.indexOf("按周进行") != -1) {
timeLineData = this.LgorgmapDao.getlgorgByweekdate(begindate);
list = this.LgorgmapDao.getlgorgByweek(begindate);
} else if (datetype.indexOf("按月进行") != -1) {
timeLineData = this.LgorgmapDao.getlgorgBymondate(begindate);
list = this.LgorgmapDao.getlgorgBymon(begindate);
}
map = handleInfo(timeLineData, list, map);
return map;
}
/***
* 处理数据输出对应的格式
* @param timeLineData
* @param list
* @param map
* @return
*/
private Map<String, Object> handleInfo(List<String> timeLineData, List<LgorgInfo> list, Map<String, Object> map) {
List<Object> optionsList = new ArrayList<Object>();
for (int i = 0; i < timeLineData.size(); i++) {
String vdate = (String) timeLineData.get(i);
Map<String, Object> seriesMap = new HashMap<String, Object>();
List<Object> dataList = new ArrayList<Object>();
Map<String, Object> dataMap = new HashMap<String, Object>();
List<Object> dataAllList = new ArrayList<Object>();
for (int j = 0; j < list.size(); j++) {
Map<String, Object> seriesDataMap = new HashMap<String, Object>();
List<String> valueList = new ArrayList<String>();
if (vdate.equals(((LgorgInfo) list.get(j)).getTmw())) {
valueList.add(((LgorgInfo) list.get(j)).getOrganlongitude());
valueList.add(((LgorgInfo) list.get(j)).getOrganlatitude());
valueList.add(((LgorgInfo) list.get(j)).getOrigin());
seriesDataMap.put("name", ((LgorgInfo) list.get(j)).getOrgname());
seriesDataMap.put("value", valueList);
dataList.add(seriesDataMap);
if (list.size() > 1) {
list.remove(j);
j -= 1;
}
}
}
dataMap.put("data", dataList);
dataAllList.add(dataMap);
seriesMap.put("series", dataAllList);
optionsList.add(seriesMap);
}
map.put("optionsList", optionsList);
map.put("timeLineData", timeLineData);
//System.out.println(map);
return map;
}
}
3.4 controller层核心关键代码@Controller
@RequestMapping("/${adminPath}/lxb/Lgorgmap")
public class LgorgmapController extends BaseController{
@Autowired
private LgorgmapService lgorgmapService;
//获取当前view页面
@RequestMapping("")
public String goLgorg(Model model){
return "modules/lxb/Lgorgmap";
}
//获取流感机构地图数据
@RequestMapping(value="/getlgorgmap",method = RequestMethod.GET)
public @ResponseBody Map<String,Object> getlgseason(HttpServletRequest request,HttpServletResponse response) throws IOException{
//String BeginDate=new String(request.getParameter("BeginDate").getBytes("ISO-8859-1"),"UTF-8");
String BeginDate="";
String DateType=new String(request.getParameter("DateType").getBytes("ISO-8859-1"),"UTF-8");
return lgorgmapService.getlgorgmap(BeginDate,DateType);
}
}
3.5 Mybatis SQL.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.sz.lxb.modules.lxb.dao.LgorgmapDao">
<!--取最近一周的信息（机构、病例、日期、日期长度） -->
<select id="getlgorgBydayw" resultType="com.sz.lxb.modules.lxb.entity.LgorgInfo">
select
t.tmw as tmw,
t.org_name as orgname,
t.origin as origin,
t.organ_longitude as organlongitude,
t.organ_latitude as organlatitude
from tab_org_lg t
where TO_DATE(T.TMW,'yyyy-MM-dd')>=TO_date(to_char(TO_DATE(#{0},'yyyy-MM-dd')-7,'yyyy-MM-dd'),'yyyy-MM-dd')
AND TO_DATE(T.TMW,'yyyy-MM-dd')<=TO_date(#{0},'yyyy-MM-dd')
and trim(t.dtype)='天' ORDER BY t.tmw asc
</select>
<select id="getlgorgBydaywdate" resultType="String">
select DISTINCT t.tmw as tmw from tab_org_lg t
where to_date(t.tmw,'yyyy-MM-dd')>=to_date(to_char(to_date(#{0},'yyyy-MM-dd')-7,'yyyy-MM-dd'),'yyyy-MM-dd')
AND to_date(t.tmw,'yyyy-MM-dd')<=to_date(#{0},'yyyy-MM-dd')
and trim(t.dtype)='天' ORDER BY t.tmw ASC
</select>
<!--取最近一月的信息（机构、病例、日期、日期长度） -->
<select id="getlgorgBydaym" resultType="com.sz.lxb.modules.lxb.entity.LgorgInfo">
select
t.tmw as tmw,
t.org_name as orgname,
t.origin as origin,
t.organ_longitude as organlongitude,
t.organ_latitude as organlatitude
from tab_org_lg t
where TO_DATE(T.TMW,'yyyy-MM-dd')>=TO_date(to_char(TO_DATE(#{0},'yyyy-MM-dd')-30,'yyyy-MM-dd'),'yyyy-MM-dd')
AND TO_DATE(T.TMW,'yyyy-MM-dd')<=TO_date(#{0},'yyyy-MM-dd')
and trim(t.dtype)='天' ORDER BY t.tmw asc
</select>
<select id="getlgorgBydaymdate" resultType="String">
select DISTINCT t.tmw as tmw from tab_org_lg t
where to_date(t.tmw,'yyyy-MM-dd')>=to_date(to_char(to_date(#{0},'yyyy-MM-dd')-30,'yyyy-MM-dd'),'yyyy-MM-dd')
AND to_date(t.tmw,'yyyy-MM-dd')<=to_date(#{0},'yyyy-MM-dd')
and trim(t.dtype)='天' ORDER BY t.tmw ASC
</select>
<!--取按月的信息（机构、病例、日期、日期长度） -->
<select id="getlgorgBymon" resultType="com.sz.lxb.modules.lxb.entity.LgorgInfo">
select
t.tmw as tmw,
t.org_name as orgname,
t.origin as origin,
t.organ_longitude as organlongitude,
t.organ_latitude as organlatitude
from tab_org_lg t
where to_char(to_date(t.tmw,'yyyy-MM'),'yyyy-MM')>=to_char(to_date(#{0},'yyyy-MM-dd')-365,'yyyy-MM')
AND to_char(to_date(t.tmw,'yyyy-MM'),'yyyy-MM')<=to_char(to_date(#{0},'yyyy-MM-dd'),'yyyy-MM')
and trim(t.dtype)='月' ORDER BY t.tmw asc
</select>
<select id="getlgorgBymondate" resultType="String">
select DISTINCT t.tmw as tmw from tab_org_lg t
where to_char(to_date(t.tmw,'yyyy-MM'),'yyyy-MM')>=to_char(to_date(#{0},'yyyy-MM-dd')-365,'yyyy-MM')
AND to_char(to_date(t.tmw,'yyyy-MM'),'yyyy-MM')<=to_char(to_date(#{0},'yyyy-MM-dd'),'yyyy-MM')
and trim(t.dtype)='月' ORDER BY t.tmw asc
</select>
<!--取按周的信息（机构、病例、日期、日期长度） -->
<select id="getlgorgByweek" resultType="com.sz.lxb.modules.lxb.entity.LgorgInfo">
select
t.tmw as tmw,
t.org_name as orgname,
t.origin as origin,
t.organ_longitude as organlongitude,
t.organ_latitude as organlatitude
from tab_org_lg t
where t.tmw>=to_char(to_date(#{0},'yyyy-MM-dd')-182,'yyyy-IW')
AND t.tmw<=to_char(to_date(#{0},'yyyy-MM-dd'),'yyyy-IW')
and trim(t.dtype)='周' ORDER BY t.tmw asc
</select>
<select id="getlgorgByweekdate" resultType="String">
select DISTINCT t.tmw as tmw from tab_org_lg t
where t.tmw>=to_char(to_date(#{0},'yyyy-MM-dd')-182,'yyyy-IW')
AND t.tmw<=to_char(to_date(#{0},'yyyy-MM-dd'),'yyyy-IW')
and trim(t.dtype)='周' ORDER BY t.tmw asc
</select>
</mapper>4.前台关键代码
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流感大数据时空机构地图分布</title>
<script type="text/javascript" src="${ctxStatic}/lxb/baseinfo/js/jquery.min.js"></script>
<link rel="stylesheet" href="${ctxStatic}/lxb/lgmap/js/org.css" type="text/css" />
<script type="text/javascript" src="${ctxStatic}/lxb/lgmap/js/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="${ctxStatic}/lxb/lgmap/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="${ctxStatic}/lxb/lgmap/js/echarts.min.js" charset="utf-8"/>
<script src="${ctxStatic}/lxb/lgmap/js/sz.js"></script>
<script src="${ctxStatic}/lxb/lgmap/js/infographic.js"></script>
</head>
<body>
<div id='all'>
<div id="container">
<div class="clear-fix" id="wrapper">
<div class="top_p" id="select">
<span class="tips_map">
<!--<input id="sole-input" class="text" type="text" name="word"
autocomplete="off" maxlength="25" placeholder="2015-01-01"
value="2015-01-01" onClick="WdatePicker()">-->
</span>
<select id="date" class="ui-select">
<option>选择周期</option>
<option>按月进行</option>
<option>按周进行</option>
<option>最近一周</option>
<option>最近一月</option>
</select>
</div>
<div id="map"></div>
</div>
</div>
<script type="text/javascript" src="${ctxStatic}/lxb/lgmap/js/plug-in/jQuery_select/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/lxb/lgmap/js/plug-in/jQuery_select/js/jquery-ui.js"></script>
<script type="text/javascript" src="${ctxStatic}/lxb/lgmap/js/plug-in/jQuery_select/js/select-widget-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ui-select").selectWidget({
change: function (changes) {
//var time = document.getElementById("sole-input").value;
var time='0000-00-00';
dataFunc(changes,time);
},
effect : "slide",
keyControl : true,
scrollHeight : 250
});
//////////////////////////////////定义一些全局变量/////////////////////////////////////////////////////////////////////////
//定义各个曲线数据变量
var data_date=[],data_optionsList=[];
var d1=["2015-01-01"],d2=[];
loadmap(d1,d2,10,0);
///////////////////////////////初始化地图//////////////////////////////////////////////////
function loadmap(date1,optionsList,maxnum,mthod){
$.get('${ctxStatic}/lxb/lgmap/data/sz.json', function (szjson) {
echarts.registerMap('深圳', szjson);
var chart = echarts.init(document.getElementById('map'),'infographic');
optionMap={
baseOption:{
timeline:{
show:true,
type:'slider',
axisType:'category',
notMerge:false,
realtime:true,
data:date1,
label: {
show: true,
interval: 'auto',
rotate: 0,
formatter:function(s) {
if(mthod==2)
{
return (new String(s))+'周';
}
else if(mthod==3){
return ((new Date(s)).getFullYear())+'-'+((new Date(s)).getMonth()+1)+'月';
}
else{
return ((new Date(s)).getFullYear()).toString()+'-'+((new Date(s)).getMonth()+1).toString()+'-'+((new Date(s)).getDate()).toString();
}
},
textStyle: {
color:'white'
}
},
controlPosition:'left',
checkpointStyle:{
symbol : 'diamond',
symbolSize:16,
color : 'yellow',
borderColor : 'yellow',
borderWidth : '1',
label: {
show: true,
textStyle: {
color: '#fff'
}
}
},
lineStyle:{
color: '#666',
width: 1,
type: 'dashed'
},
symbol : 'emptyDiamond',
symbolSize:20,
controlStyle:{
itemSize: 15,
itemGap: 5,
},
tooltip: {
trigger: 'item',
formatter: function (params) {
var i=0;
var value = (params.value + '').split('.');
value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
return '时间：'+params.name;
},
show:true
},
autoPlay : true,
playInterval : 1000
},
backgroundColor: '#404a59',
title: {
text:'深圳市医疗机构流感时空分布',
//subtext:sub,
x:'center',
textStyle: {
fontWeight: '800',
color: '#fff',
fontSize: '32'
},
subtextStyle: {
fontWeight: '800',
color: '#fff',
fontSize: '24'
}
},
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2,
formatter: function (params) {
return '流感病例'+'</br>'+params.name + ' : ' + params.value[2];
}
},
legend: {
orient: 'horizontal',
x:'370px',
y:'80px',
textStyle: {
fontWeight: '300',
color: '#1f74f2',
fontSize: '16'
},
data:['lg']
},
dataRange:{
x: 'left',
y: 'bottom',
textStyle: {
color: '#fff',
},
splitList: [
{start:maxnum[16],label:'红色预警'},
{start:maxnum[14], end:maxnum[15],label:'橙色预警2级'},
{start:maxnum[12], end:maxnum[13],label:'橙色预警1级'},
{start:maxnum[10], end:maxnum[11],label:'黄色预警2级'},
{start:maxnum[8], end:maxnum[9],label:'黄色预警1级'},
{start:maxnum[6], end:maxnum[7],label:'严重'},
{start:maxnum[4], end:maxnum[5],label:'一般严重'},
{start:maxnum[2], end:maxnum[3],label:'一般影响'},
{start:maxnum[0], end:maxnum[1],label:'正常范围'}
],
color:['red','yellow','green']
},
geo: {
map: '深圳',
label: {
emphasis: {
show: true,
textStyle: {
fontSize: '12',
color:'#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},series:[
{
name: '流感病例',
type: 'effectScatter',
coordinateSystem: 'geo',
mapLocation:{
y:60
},
symbolSize: 12,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
large:true,
largeThreshold:2000,
hoverAnimation: true,
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
}]
},
options:optionsList };
chart.setOption(optionMap,true)
});
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function dataFunc(str1,str2)
{
var strDate=str1;//获取选择的时间方式
////////////////////////////////////////对传入的日期进行处理///////////////////////////////////////////////////////////////////////////
var datestr = str2;//获取选择的时间}
var base = new Date(Date.parse(datestr.replace(/-/g,"/")));
var dd = new Date(base);
///////////////////////////////////////加载从mysql传出的json数据///////////////////////////////////////////////////////////////////////////////
allData();
function allData(){
//对传入的日期进行处理//////////////////////
var year = (dd.getFullYear()).toString();
var month =(dd.getMonth() + 1).toString();
var day = (dd.getDate()).toString();
if (month.length == 1) {
month = "0" + month;
}
if (day.length == 1) {
day = "0" + day;
}
var dateTime = year + "-" + month+"-" +day;
$.ajax({
url:"${ctx}/lxb/Lgorgmap/getlgorgmap",
data:{
"BeginDate":dateTime,
"DateType":strDate
},
dataType:"json",
type:"GET",
success:function(map){
data_date=map.timeLineData;
data_optionsList=map.optionsList;
if(strDate=='按周进行'){
var maxnum=[0,50,51,100,101,500,501,1000,1001,2000,2001,5000,5001,8000,8001,10000,10001];
loadmap(data_date,data_optionsList,maxnum,2);
}
else if(strDate=='按月进行'){
var maxnum=[0,300,301,600,601,1000,1001,2000,2001,5000,5001,10000,10001,20000,20001,25000,25001];
loadmap(data_date,data_optionsList,maxnum,3);
}
else{
var maxnum=[0,50,51,100,101,200,201,500,501,1000,1001,1500,1501,2000,2001,2500,3000];
loadmap(data_date,data_optionsList,maxnum,0);
}
},error:function(){
alert("获取数据失败！");
}
});
}
}
});
</script>
</div>
</body>
</html>
