用了兩天的時間才把這個簡陋的世界疫情圖做出來，是真的不容易，數據是通過python爬取的，再通過web數據庫鏈接呈現再界面上：
在可視化地圖裏面有一個稍微有點難度的就是獲取數據，可以通過$.ajax({});方法獲取數據，再講數據再jsp中轉換爲js格式即可，我把一些基本的代碼發表一下。
servlet層：
package Servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import Bean.shengfen;
import Dao.Dao;
/**
* Servlet implementation class AjaxServlet
*/
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public AjaxServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("..1");
request.setCharacterEncoding("UTF-8");
Dao dao = new Dao();
java.util.List<shengfen> list = dao.Ajax();
System.out.println(list.get(0).province);
Gson gson = new Gson();
String json = gson.toJson(list);
response.setHeader("Content-Type","text/html;charset=UTF-8");
response.getWriter().write(json);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}package Servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import Dao.Dao;
/**
* Servlet implementation class AllconfirmedServlet
*/
@WebServlet("/AllconfirmedServlet")
public class AllconfirmedServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public AllconfirmedServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Dao dao = new Dao();
int allpeo = dao.addpeo();
System.out.println(allpeo);
request.getSession().setAttribute("allpeo", allpeo);
request.getRequestDispatcher("View.jsp").forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}package Servlet;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import Bean.shengfen;
import Dao.Dao;
/**
* Servlet implementation class selectServlet
*/
@WebServlet("/selectServlet")
public class selectServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public selectServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
select(request,response);
}
private void select(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Dao dao = new Dao();
java.util.List<shengfen> list = dao.selecttime();
System.out.println(list);
if(list != null) {
request.setAttribute("list", list);
request.getRequestDispatcher("View.jsp").forward(request, response);
}else {
request.setAttribute("message", "數據獲取失敗！");
request.getRequestDispatcher("View.jsp").forward(request, response);
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
package Servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import Bean.shengfen;
import Dao.Dao;
/**
* Servlet implementation class timeServlet
*/
@WebServlet("/timeServlet")
public class timeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public timeServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Dao dao = new Dao();
String time = dao.list();
request.getSession().setAttribute("time", time);
request.getRequestDispatcher("View.jsp").forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
Dao層：
package Dao;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import Bean.shengfen;
import DBUtil.DBUtil;
public class Dao {
static int id = 1;
public List<shengfen> selecttime() {
String sql="select * from world_map_copy1 ";
System.out.println(sql);
Connection conn = DBUtil.getConn();
Statement stat = null;
List<shengfen> list = new ArrayList<>();
ResultSet rs = null;
shengfen sf =null;
try {
stat = conn.createStatement();
rs = stat.executeQuery(sql);
while(rs.next()) {
String Province = rs.getString("provinceName");
int Confirmed_num = rs.getInt("confirmedCount");
int Cured_num = rs.getInt("curedCount");
int Dead_num = rs.getInt("deadCount");
String time = rs.getString("time");
sf = new shengfen(Province,id,Confirmed_num,Cured_num,Dead_num,time);
id++;
list.add(sf);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
id = 1;
return list;
}
public List<shengfen> Ajax() {
String sql="select * from world_map_copy1";
System.out.println(sql);
Connection conn = DBUtil.getConn();
Statement stat = null;
List<shengfen> list = new ArrayList<>();
ResultSet rs = null;
shengfen sf =null;
try {
stat = conn.createStatement();
rs = stat.executeQuery(sql);
while(rs.next()) {
String Province = rs.getString("provinceName");
int Confirmed_num = rs.getInt("confirmedCount");
int Cured_num = rs.getInt("curedCount");
int Dead_num = rs.getInt("deadCount");
sf = new shengfen(Province,id,Confirmed_num,Cured_num,Dead_num,null);
id++;
list.add(sf);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
id = 1;
return list;
}
public int addpeo() {
String sql="select sum(currentConfirmedCount) from world_map_copy1 ";
System.out.println(sql);
Connection conn = DBUtil.getConn();
Statement stat = null;
ResultSet rs = null;
int i = 0;
try {
stat = conn.createStatement();
rs = stat.executeQuery(sql);
while(rs.next()) {
i = rs.getInt("sum(currentConfirmedCount)");
}
System.out.println(i);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return i;
}
public String list() {
String sql="select * from world_map_copy1";
Connection conn = DBUtil.getConn();
Statement stat = null;
ResultSet rs = null;
String time = null;
try {
stat = conn.createStatement();
rs = stat.executeQuery(sql);
while(rs.next()) {
time = rs.getString("time");
}
System.out.println(time);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return time;
}
}
Bean層：
package Bean;
public class shengfen {
public String province;
public int id;
public int confirmed_num;
public int cured_num;
public int dead_num;
public String time;
public String getTime() {
return time;
}
public void setTime(String time) {
this.time = time;
}
public int getDead_num() {
return dead_num;
}
public void setDead_num(int dead_num) {
dead_num = dead_num;
}
public String getProvince() {
return province;
}
public void setProvince(String province) {
this.province = province;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public int getConfirmed_num() {
return confirmed_num;
}
public void setConfirmed_num(int confirmed_num) {
this.confirmed_num = confirmed_num;
}
public int getCured_num() {
return cured_num;
}
public void setCured_num(int cured_num) {
this.cured_num = cured_num;
}
public shengfen(String province, int id, int confirmed_num, int cured_num, int dead_num, String time) {
super();
this.province = province;
this.id = id;
this.confirmed_num = confirmed_num;
this.cured_num = cured_num;
this.dead_num = dead_num;
this.time = time;
}
}
jsp頁面：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--聲明文檔兼容模式，表示使用IE瀏覽器的最新模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--設置視口的寬度(值爲設備的理想寬度)，頁面初始縮放值<理想寬度/可見寬度>-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
<title>世界疫情查詢</title>
<!-- 引入Bootstrap核心樣式文件 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 引入jQuery核心js文件 -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- 引入BootStrap核心js文件 -->
<script src="js/bootstrap.min.js"></script>
<title>Insert title here</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<style type="text/css">
.father{
float: left;
margin: 5px;
margin-left: 5px;
}
.table{
float: left;
margin:2px;
margin-left: 1px;
overflow:scroll;
}
.echart{
float: left;
margin:1px;
}
#one{
margin:2px;
margin-left: 1px;
}
.listtable{
overflow:scroll;
}
</style>
<title>疫情圖</title>
</head>
<body style="background-color: #000000">
<div id="father1" class="father" style="width: 250px;height:700px;background-color: #4B4B4B;">
<div id="one" class="all" style="width: 245px;height:90px;background-color: #4B4B4Bborder: 1px solid red;">
<label for="userid" style="font-size: 28px;color: red;" >總確診人數：<%=session.getAttribute("allpeo")%></label>
</div>
<div id="one" class="listtable" style="width: 245px;height:500px;background-color: #4B4B4B;">
<table class="table" >
<c:forEach items="${list}" var="item" >
<tr>
<td><label for="userid" style="font-size: 18px;color: red;" >${item.province} ${item.confirmed_num}</label></td>
</tr>
</c:forEach>
</table>
</div>
<div id="one" class="time" style="width: 245px;height:90px;background-color: #4B4B4B;">
<label for="userid" style="font-size: 28px;color: red;" ><%=session.getAttribute("time")%></label>
</div>
</div>
<div id="father2" class="father" style="width:720px;height:700px;background-color: #4B4B4B">
<script src="js/echarts.js"></script>
<script src="js/world(1).js"></script>
<script type="text/javascript">
var mess;
$(function(){
$.ajax({
url : "AjaxServlet",
async : false,
type : "POST",
success : function(data) {
mess = data;
},
error : function() {
alert("請求失敗");
},
dataType : "json"
});
var myChart = echarts.init(document.getElementById('father2'));
var mydata = new Array(0);
for(var i = 0;i<mess.length;i++){
var d = {};
d["name"] = mess[i].province;
d["value"] = mess[i].confirmed_num;
d["heal"] = mess[i].cured_num;
d["dead"] = mess[i].dead_num;
mydata.push(d);
}
option = {
title: {
sublink: 'http://esa.un.org/wpp/Excel-Data/population.htm',
left: 'center',
top: 'top'
},
tooltip: {
formatter : function(params) {
return params.name + '<br/>' + '確診人數 : '
+ params.value + '<br/>' + '死亡人數 : '
+ params['data'].dead + '<br/>' + '治癒人數 : '
+ params['data'].heal ;
}//數據格式化
},
visualMap : {
min : 0,
max : 500,
inRange : {
color : ['#CC6633', '#ffaa85', '#bc1a19','#990000' ]
//取值範圍的顏色
},
pieces:[
{gt:5000},
{gt:1000,lte:4999},
{gte:500,lte:999},
{gte:1,lte:499},
{value:0,label:'0',color:'#ffffff'},
],
show : true
//圖注
},
series: [
{
name: '世界疫情',
type: 'map',
mapType: 'world',
roam: true,
itemStyle:{
emphasis:{label:{show:true}}
},
data:mydata,
nameMap:{
"Canada": "加拿大",
"Turkmenistan": "土庫曼斯坦",
"Saint Helena": "聖赫勒拿",
"Lao PDR": "老撾",
"Lithuania": "立陶宛",
"Cambodia": "柬埔寨",
"Ethiopia": "埃塞俄比亞",
"Faeroe Is.": "法羅羣島",
"Swaziland": "斯威士蘭",
"Palestine": "巴勒斯坦",
"Belize": "伯利茲",
"Argentina": "阿根廷",
"Bolivia": "玻利維亞",
"Cameroon": "喀麥隆",
"Burkina Faso": "布基納法索",
"Aland": "奧蘭羣島",
"Bahrain": "巴林",
"Saudi Arabia": "沙特阿拉伯",
"Fr. Polynesia": "法屬波利尼西亞",
"Cape Verde": "佛得角",
"W. Sahara": "西撒哈拉",
"Slovenia": "斯洛文尼亞",
"Guatemala": "危地馬拉",
"Guinea": "幾內亞",
"Dem. Rep. Congo": "剛果（金）",
"Germany": "德國",
"Spain": "西班牙",
"Liberia": "利比里亞",
"Netherlands": "荷蘭",
"Jamaica": "牙買加",
"Solomon Is.": "所羅門羣島",
"Oman": "阿曼",
"Tanzania": "坦桑尼亞",
"Costa Rica": "哥斯達黎加",
"Isle of Man": "曼島",
"Gabon": "加蓬",
"Niue": "紐埃",
"Bahamas": "巴哈馬",
"New Zealand": "新西蘭",
"Yemen": "也門",
"Jersey": "澤西島",
"Pakistan": "巴基斯坦",
"Albania": "阿爾巴尼亞",
"Samoa": "薩摩亞",
"Czech Rep.": "捷克",
"United Arab Emirates": "阿拉伯聯合酋長國",
"Guam": "關島",
"India": "印度",
"Azerbaijan": "阿塞拜疆",
"N. Mariana Is.": "北马里亞納羣島",
"Lesotho": "萊索托",
"Kenya": "肯尼亞",
"Belarus": "白俄羅斯",
"Tajikistan": "塔吉克斯坦",
"Turkey": "土耳其",
"Afghanistan": "阿富汗",
"Bangladesh": "孟加拉國",
"Mauritania": "毛里塔尼亞",
"Dem. Rep. Korea": "朝鮮",
"Saint Lucia": "聖盧西亞",
"Br. Indian Ocean Ter.": "英屬印度洋領地",
"Mongolia": "蒙古",
"France": "法國",
"Cura?ao": "庫拉索島",
"S. Sudan": "南蘇丹",
"Rwanda": "盧旺達",
"Slovakia": "斯洛伐克",
"Somalia": "索馬里",
"Peru": "祕魯",
"Vanuatu": "瓦努阿圖",
"Norway": "挪威",
"Malawi": "馬拉維",
"Benin": "貝寧",
"St. Vin. and Gren.": "聖文森特和格林納丁斯",
"Korea": "韓國",
"Singapore": "新加坡",
"Montenegro": "黑山共和國",
"Cayman Is.": "開曼羣島",
"Togo": "多哥",
"China": "中國",
"Heard I. and McDonald Is.": "赫德島和麥克唐納羣島",
"Armenia": "亞美尼亞",
"Falkland Is.": "馬爾維納斯羣島（福克蘭）",
"Ukraine": "烏克蘭",
"Ghana": "加納",
"Tonga": "湯加",
"Finland": "芬蘭",
"Libya": "利比亞",
"Dominican Rep.": "多米尼加",
"Indonesia": "印度尼西亞",
"Mauritius": "毛里求斯",
"Eq. Guinea": "赤道幾內亞",
"Sweden": "瑞典",
"Vietnam": "越南",
"Mali": "馬裏",
"Russia": "俄羅斯",
"Bulgaria": "保加利亞",
"United States": "美國",
"Romania": "羅馬尼亞",
"Angola": "安哥拉",
"Chad": "乍得",
"South Africa": "南非",
"Fiji": "斐濟",
"Liechtenstein": "列支敦士登",
"Malaysia": "馬來西亞",
"Austria": "奧地利",
"Mozambique": "莫桑比克",
"Uganda": "烏干達",
"Japan": "日本",
"Niger": "尼日爾",
"Brazil": "巴西",
"Kuwait": "科威特",
"Panama": "巴拿馬",
"Guyana": "圭亞那",
"Madagascar": "馬達加斯加",
"Luxembourg": "盧森堡",
"American Samoa": "美屬薩摩亞",
"Andorra": "安道爾",
"Ireland": "愛爾蘭",
"Italy": "意大利",
"Nigeria": "尼日利亞",
"Turks and Caicos Is.": "特克斯和凱科斯羣島",
"Ecuador": "厄瓜多爾",
"U.S. Virgin Is.": "美屬維爾京羣島",
"Brunei": "文萊",
"Australia": "澳大利亞",
"Iran": "伊朗",
"Algeria": "阿爾及利亞",
"El Salvador": "薩爾瓦多",
"C?te d'Ivoire": "科特迪瓦",
"Chile": "智利",
"Puerto Rico": "波多黎各",
"Belgium": "比利時",
"Thailand": "泰國",
"Haiti": "海地",
"Iraq": "伊拉克",
"S?o Tomé and Principe": "聖多美和普林西比",
"Sierra Leone": "塞拉利昂",
"Georgia": "格魯吉亞",
"Denmark": "丹麥",
"Philippines": "菲律賓",
"S. Geo. and S. Sandw. Is.": "南喬治亞島和南桑威奇羣島",
"Moldova": "摩爾多瓦",
"Morocco": "摩洛哥",
"Namibia": "納米比亞",
"Malta": "馬耳他",
"Guinea-Bissau": "幾內亞比紹",
"Kiribati": "基里巴斯",
"Switzerland": "瑞士",
"Grenada": "格林納達",
"Seychelles": "塞舌爾",
"Portugal": "葡萄牙",
"Estonia": "愛沙尼亞",
"Uruguay": "烏拉圭",
"Antigua and Barb.": "安提瓜和巴布達",
"Lebanon": "黎巴嫩",
"Uzbekistan": "烏茲別克斯坦",
"Tunisia": "突尼斯",
"Djibouti": "吉布提",
"Greenland": "格陵蘭",
"Timor-Leste": "東帝汶",
"Dominica": "多米尼克",
"Colombia": "哥倫比亞",
"Burundi": "布隆迪",
"Bosnia and Herz.": "波斯尼亞和黑塞哥維那",
"Cyprus": "塞浦路斯",
"Barbados": "巴巴多斯",
"Qatar": "卡塔爾",
"Palau": "帕勞",
"Bhutan": "不丹",
"Sudan": "蘇丹",
"Nepal": "尼泊爾",
"Micronesia": "密克羅尼西亞",
"Bermuda": "百慕大",
"Suriname": "蘇里南",
"Venezuela": "委內瑞拉",
"Israel": "以色列",
"St. Pierre and Miquelon": "聖皮埃爾和密克隆羣島",
"Central African Rep.": "中非",
"Iceland": "冰島",
"Zambia": "贊比亞",
"Senegal": "塞內加爾",
"Papua New Guinea": "巴布亞新幾內亞",
"Trinidad and Tobago": "特立尼達和多巴哥",
"Zimbabwe": "津巴布韋",
"Jordan": "約旦",
"Gambia": "岡比亞",
"Kazakhstan": "哈薩克斯坦",
"Poland": "波蘭",
"Eritrea": "厄立特里亞",
"Kyrgyzstan": "吉爾吉斯斯坦",
"Montserrat": "蒙特塞拉特",
"New Caledonia": "新喀里多尼亞",
"Macedonia": "馬其頓",
"Paraguay": "巴拉圭",
"Latvia": "拉脫維亞",
"Hungary": "匈牙利",
"Syria": "敘利亞",
"Honduras": "洪都拉斯",
"Myanmar": "緬甸",
"Mexico": "墨西哥",
"Egypt": "埃及",
"Nicaragua": "尼加拉瓜",
"Cuba": "古巴",
"Serbia": "塞爾維亞",
"Comoros": "科摩羅",
"United Kingdom": "英國",
"Fr. S. Antarctic Lands": "南極洲",
"Congo": "剛果（布）",
"Greece": "希臘",
"Sri Lanka": "斯里蘭卡",
"Croatia": "克羅地亞",
"Botswana": "博茨瓦納",
"Siachen Glacier": "錫亞琴冰川地區"
}
}
]
};
myChart.setOption(option);
});
</script>
</div>
<div id="father3" class="father" style="width: 480px;height:700px;background-color: #4B4B4B;">
<div class="table" style="width:235px;height:500px;background-color: #4B4B4B;">
<table class="table" style="color: #4B4B4B";>
<tr>
<label for="userid" style="font-size: 18px;color: red;" >死亡人數</label>
</tr>
<c:forEach items="${list}" var="item" >
<tr>
<td><label for="userid" style="font-size: 18px;color: red;" >${item.province} ${item.dead_num}</label></td>
</tr>
</c:forEach>
</table>
</div>
<div class="table" style="width:235px;height:500px;background-color: #4B4B4B;">
<table class="table" >
<label for="userid" style="font-size: 18px;color: red;" >治癒人數</label>
<c:forEach items="${list}" var="item" >
<tr>
<td><label for="userid" style="font-size: 18px;color: red;" >${item.province} ${item.cured_num}</label></td>
</tr>
</c:forEach>
</table>
</div>
<div id="main" class="echart" style="width:470px;height:190px;background-color: #4B4B4B;">
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
var arr = new Array();
var index = 0;
<c:forEach items="${list}" var="item">
arr[index++] = ${item.confirmed_num};
</c:forEach>
// 指定圖表的配置項和數據
var option = {
title: {
text: '疫情統計'
},
tooltip: {
show: true
},
legend: {
data:['患者數']
},
xAxis : [
{
type : 'category',
axisLabel:{
interval:0,//橫軸信息全部顯示
rotate:40,//-30度角傾斜顯示
},
data : [
<c:forEach items="${list}" var="item">
["${item.province}"],
</c:forEach>
]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'患者數',
type:'bar',
data: arr
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</div>
</div>
</body>
</html>數據呈現的有點亂，還需要繼續努力，縮小與別人之間的差距。