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 {@Autowiredprivate LgorgmapDao LgorgmapDao;@Autowiredprivate 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{@Autowiredprivate 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 organlatitudefrom 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 organlatitudefrom 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>

轉載于:https://www.cnblogs.com/xinfang520/p/7684578.html

總結

以上是生活随笔為你收集整理的Java记录-SpringMVC整合Echarts画地图加散点图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。