全球疫情可視化展示
- 2020 年 4 月 5 日
- 筆記
今天是一個緬懷先烈的日子，因此身為軟工系的一名學生，應該為這個世界做點東西！！來紀念這次不一樣的節日
網頁鏈接：全球疫情可視化
首先將任務進行分解：一共有五塊內容（全球確診人數，可視化地圖，全球死亡人數，全球治癒人數，確診人數隨時間變化趨勢的折線圖）
1.對於人數的展示，其實可以歸為一類，只要實現了其中一個，剩餘的自然就可以實現。
通過post請求，在網頁載入時進行，將返還的數據寫成html的格式，放進我們之前設計好的div里
$.post( "getconfirmed", function(data){ var sum=0; for(var i=0;i<data.length;i++) sum+= parseInt(data[i].confirmed); var htmltext="<h style='color: white;'>全球確診人數為："+"<span style='color: red;font-size:50px'>"+sum+"</span></h>"; htmltext+="<table>" for(var i=0;i<data.length;i++) htmltext+="<tr><td>"+"<span style='color: white;'>"+data[i].name+"</span></td><td><span style='color: red;'>"+data[i].confirmed+"</span></td></tr>"; htmltext+="</table>"; $("#left").html(htmltext); }, "json" ); $.post( "getdead", function(data){ var sum=0; for(var i=0;i<data.length;i++) sum+= parseInt(data[i].dead); var htmltext="<h style='color: white;'>全球死亡人數為："+"<span style='color: red;font-size:50px'>"+sum+"</span></h>"; htmltext+="<table>" for(var i=0;i<data.length;i++) htmltext+="<tr><td>"+"<span style='color: white;'>"+data[i].name+"</span></td><td><span style='color: red;'>"+data[i].dead+"</span></td></tr>"; htmltext+="</table>"; $("#right1").html(htmltext); }, "json" ); $.post( "getcured", function(data){ var sum=0; for(var i=0;i<data.length;i++) sum+= parseInt(data[i].cured); var htmltext="<h style='color: white;'>全球治癒人數為："+"<span style='color: green;font-size:50px'>"+sum+"</span></h>"; htmltext+="<table>" for(var i=0;i<data.length;i++) htmltext+="<tr><td>"+"<span style='color: white;'>"+data[i].name+"</span></td><td><span style='color: green;'>"+data[i].cured+"</span></td></tr>"; htmltext+="</table>"; $("#right2").html(htmltext); }, "json" );
View Code
package servlet; import java.io.IOException; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; 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.World; import java.util.List; import Dao.predao; /** * Servlet implementation class getconfirmed */ @WebServlet("/getconfirmed") public class getconfirmed extends HttpServlet { private static final long serialVersionUID = 1L; predao dao=new predao(); /** * @see HttpServlet#HttpServlet() */ public getconfirmed() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub request.setCharacterEncoding("utf-8"); Date now = new Date(); SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//設置日期格式 String Time = dateFormat.format(now);//格式化然後放入字元串中 String data=Time.substring(0,10); ArrayList<World> list=dao.getconfirmed(data); Gson gson = new Gson(); response.setContentType("text/html;charset=utf-8"); String json = gson.toJson(list); response.getWriter().write(json); //System.out.println(json); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
View Code
package servlet; import java.io.IOException; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; 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.World; import Dao.predao; /** * Servlet implementation class getcured */ @WebServlet("/getcured") public class getcured extends HttpServlet { private static final long serialVersionUID = 1L; predao dao=new predao(); /** * @see HttpServlet#HttpServlet() */ public getcured() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub request.setCharacterEncoding("utf-8"); Date now = new Date(); SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//設置日期格式 String Time = dateFormat.format(now);//格式化然後放入字元串中 String data=Time.substring(0,10); ArrayList<World> list=dao.getcured(data); Gson gson = new Gson(); response.setContentType("text/html;charset=utf-8"); String json = gson.toJson(list); response.getWriter().write(json); //System.out.println(json); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
View Code
package servlet; import java.io.IOException; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; 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.World; import Dao.predao; /** * Servlet implementation class getdead */ @WebServlet("/getdead") public class getdead extends HttpServlet { private static final long serialVersionUID = 1L; predao dao=new predao(); /** * @see HttpServlet#HttpServlet() */ public getdead() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub request.setCharacterEncoding("utf-8"); Date now = new Date(); SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//設置日期格式 String Time = dateFormat.format(now);//格式化然後放入字元串中 String data=Time.substring(0,10); ArrayList<World> list=dao.getdead(data); Gson gson = new Gson(); response.setContentType("text/html;charset=utf-8"); String json = gson.toJson(list); response.getWriter().write(json); //System.out.println(json); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
View Code
public ArrayList<World> getconfirmed(String time) { String sql="select * from world_map where Date like '"+time+"%' order by confirmedCount desc"; System.out.println(time); Connection con=null; Statement state=null; ResultSet rs=null; boolean flag=false; con=DBUtil.getConn(); World bean=null; ArrayList<World> list=new ArrayList<World>(); try { state=con.createStatement(); rs=state.executeQuery(sql); while(rs.next()) { bean=new World(); bean.setName(rs.getString("provinceName")); bean.setConfirmed(rs.getString("confirmedCount")); bean.setSuspected(rs.getString("suspectedCount")); bean.setCured(rs.getString("curedCount")); bean.setDead(rs.getString("deadCount")); //System.out.println(bean.getName()+" "+bean.getConfirmed()); list.add(bean); } } catch (SQLException e) { // TODO 自動生成的 catch 塊 e.printStackTrace(); } DBUtil.close(rs, state, con); return list; } public ArrayList<World> getdead(String time) { String sql="select * from world_map where Date like '"+time+"%' order by deadCount desc"; System.out.println(time); Connection con=null; Statement state=null; ResultSet rs=null; boolean flag=false; con=DBUtil.getConn(); World bean=null; ArrayList<World> list=new ArrayList<World>(); try { state=con.createStatement(); rs=state.executeQuery(sql); while(rs.next()) { bean=new World(); bean.setName(rs.getString("provinceName")); bean.setConfirmed(rs.getString("confirmedCount")); bean.setSuspected(rs.getString("suspectedCount")); bean.setCured(rs.getString("curedCount")); bean.setDead(rs.getString("deadCount")); //System.out.println(bean.getName()+" "+bean.getConfirmed()); list.add(bean); } } catch (SQLException e) { // TODO 自動生成的 catch 塊 e.printStackTrace(); } DBUtil.close(rs, state, con); return list; } public ArrayList<World> getcured(String time) { String sql="select * from world_map where Date like '"+time+"%' order by curedCount desc"; System.out.println(time); Connection con=null; Statement state=null; ResultSet rs=null; boolean flag=false; con=DBUtil.getConn(); World bean=null; ArrayList<World> list=new ArrayList<World>(); try { state=con.createStatement(); rs=state.executeQuery(sql); while(rs.next()) { bean=new World(); bean.setName(rs.getString("provinceName")); bean.setConfirmed(rs.getString("confirmedCount")); bean.setSuspected(rs.getString("suspectedCount")); bean.setCured(rs.getString("curedCount")); bean.setDead(rs.getString("deadCount")); //System.out.println(bean.getName()+" "+bean.getConfirmed()); list.add(bean); } } catch (SQLException e) { // TODO 自動生成的 catch 塊 e.printStackTrace(); } DBUtil.close(rs, state, con); return list; }
View Code
2.可視化地圖
主要是將我們地圖中的英文名，利用map將其轉換成中文，以便和我們的資料庫進行匹配，之後就是通過ajax來獲取後端的數據，然後進行前台的可視化展示
//處理世界疫情地圖 $.ajax({ url:"allworld", type:"POST", dataType:"JSON", async:true, success:function(data){//表示處理成功之後做什麼,後面跟一個匿名函數。回調函數，表示處理頁面處理完數據以後執行這個函數。data表示處理頁面返回的值，用形參接收。 var mydata = new Array(0); for(var i=0;i<data.length;i++){ var d = { }; d["name"] = data[i].name;//.substring(0, 2); d["value"] = data[i].confirmed; d["Yisi_num"] = data[i].suspected; d["Cured_num"] = data[i].cured; d["Dead_num"] = data[i].dead; mydata.push(d); } //初始化echarts實例 var myChart = echarts.init(document.getElementById('mid')); // 指定圖表的配置項和數據 var option = { tooltip : { trigger: 'item', formatter : function(params) { return params.name + '<br/>' + '確診人數 : ' + params.value + '<br/>' + '死亡人數 : ' + params['data'].Dead_num + '<br/>' + '治癒人數 : ' + params['data'].Cured_num + '<br/>'+ '疑似患者人數 : ' + params['data'].Yisi_num; }//數據格式化 }, title: { text: '世界疫情圖', left: 'center' }, legend: { orient: 'vertical', left: 'left', data: ['世界疫情圖'] }, visualMap: { type: 'piecewise', pieces: [ { min: 70000, max: 50000000, label: '確診70000人以上', color: 'red' }, { min: 10000, max: 69999, label: '確診10000-69999人', color: 'blue' }, { min: 5000, max: 9999, label: '確診5000-9999人', color: 'purple' }, { min: 1500, max: 4999, label: '確診1500-4999人', color: 'yellow' }, { min: 500, max: 1499, label: '確診500-1499人', color: 'gold' }, { min: 0, max: 499, label: '確診1-499人', color: 'green' }, ], color: ['#E0022B', '#E09107', '#A3E00B'] }, toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, restore: { show: true }, saveAsImage: { show: true } } }, roamController: { show: true, left: 'right', mapTypeControl: { 'world': true } }, series: [ { name: '確診數', type: 'map', mapType: 'world', 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": "錫亞琴冰川地區" }, roam: false, label: { show: false, color: 'blue' }, data: mydata } ] }; //使用指定的配置項和數據顯示圖表 myChart.setOption(option); }, error:function(){//處理頁面出錯以後執行的函數。 } });
View Code
package servlet; import java.io.IOException; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; 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.World; import Dao.predao; /** * Servlet implementation class allworld */ @WebServlet("/allworld") public class allworld extends HttpServlet { private static final long serialVersionUID = 1L; predao dao=new predao(); /** * @see HttpServlet#HttpServlet() */ public allworld() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub request.setCharacterEncoding("utf-8"); Date now = new Date(); SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//設置日期格式 String Time = dateFormat.format(now);//格式化然後放入字元串中 String data=Time.substring(0,10); ArrayList<World> list=dao.allworld(data); Gson gson = new Gson(); response.setContentType("text/html;charset=utf-8"); String json = gson.toJson(list); response.getWriter().write(json); //System.out.println(json); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
View Code
public ArrayList<World> allworld(String time) { String sql="select * from world_map where Date like '"+time+"%'"; System.out.println(time); Connection con=null; Statement state=null; ResultSet rs=null; boolean flag=false; con=DBUtil.getConn(); World bean=null; ArrayList<World> list=new ArrayList<World>(); try { state=con.createStatement(); rs=state.executeQuery(sql); while(rs.next()) { bean=new World(); bean.setName(rs.getString("provinceName")); bean.setConfirmed(rs.getString("confirmedCount")); bean.setSuspected(rs.getString("suspectedCount")); bean.setCured(rs.getString("curedCount")); bean.setDead(rs.getString("deadCount")); //System.out.println(bean.getName()+" "+bean.getConfirmed()); list.add(bean); } } catch (SQLException e) { // TODO 自動生成的 catch 塊 e.printStackTrace(); } DBUtil.close(rs, state, con); return list; }
View Code
3.確診人數隨日期變化
這一步主要的就是從資料庫中分離日期，然後計算該天全球的確診總人數，之後用折線圖的形式將他表示出來。
//處理隨日期變化的全球確診人數圖 var myChart1 = echarts.init(document.getElementById('line')); myChart1.setOption({ title:{ text:'確診人數變化' }, tooltip:{}, grid: { left: '4%', right: '4%', bottom: '3%', //是否顯示刻度標籤 containLabel: true }, legend:{ data:['確診數'] }, xAxis:{ data:[], axisLabel:{ //橫坐標全部顯示 interval:0, //橫坐標傾斜45度 rotate:-45, }, }, yAxis:{}, series:[{ name:'確診數', type:'line', data:[] }] }) var cname=[]; var value=[]; //處理這段時間疫情總數變化趨勢 $.ajax({ url:"dataconfirmed", type:"POST", dataType:"JSON", async:true, success:function(data){ for(var i=0;i<data.length;i++) { cname[i]=data[i].name; value[i]=parseInt(data[i].confirmed); } myChart1.setOption({ xAxis:{ //放橫坐標的數組 data:cname, }, series:[{ name:'確診數', //每個橫坐標對應的數值 data:value }] }); } });
View Code
package servlet; import java.io.IOException; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; 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.World; import Dao.predao; /** * Servlet implementation class dataconfirmed */ @WebServlet("/dataconfirmed") public class dataconfirmed extends HttpServlet { private static final long serialVersionUID = 1L; predao dao=new predao(); /** * @see HttpServlet#HttpServlet() */ public dataconfirmed() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub request.setCharacterEncoding("utf-8"); ArrayList<World> list=dao.dataconfirmed(); Gson gson = new Gson(); response.setContentType("text/html;charset=utf-8"); String json = gson.toJson(list); response.getWriter().write(json); System.out.println("日期變化曲線！"); System.out.println(json); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
View Code
public ArrayList<World> dataconfirmed() { String sql="select * from world_map "; Connection con=null; Statement state=null; ResultSet rs=null; boolean flag=false; con=DBUtil.getConn(); World bean=null; int sum=0; int ans=0; String data=null; ArrayList<World> list=new ArrayList<World>(); try { state=con.createStatement(); rs=state.executeQuery(sql); while(rs.next()) { sum++; bean=new World(); bean.setName(rs.getString("Date")); if(sum==1) data=bean.getName(); bean.setConfirmed(rs.getString("confirmedCount")); if(data.equals(bean.getName())) ans+=Integer.parseInt(bean.getConfirmed()); else { String timeString=data.substring(0,10); World bean2=new World(); bean2.setName(timeString); bean2.setConfirmed(String.valueOf(ans)); sum=1; ans=0; ans+=Integer.parseInt(bean.getConfirmed()); data=bean.getName(); list.add(bean2); } } bean.setName(data.substring(0,10)); bean.setConfirmed(String.valueOf(ans)); list.add(bean); } catch (SQLException e) { // TODO 自動生成的 catch 塊 e.printStackTrace(); } DBUtil.close(rs, state, con); return list; }
View Code
總前端頁面程式碼：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@page import="java.util.Date" %> <%@page import="java.text.SimpleDateFormat" %> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="js/echarts.min.js" ></script> <script type="text/javascript" src="https://www.echartsjs.com/examples/vendors/echarts/map/js/world.js?_v_=1584687926098"></script> </head> <style> #title{ background-color:black; border: solid 1px; font-family:"楷體"; text-align:center; font-color:white; height:80px; width:1200px; float:left; } #time{ background-color:black; border: solid 1px; font-family:"楷體"; text-align:center; font-color:#333; width:250px; height:80px; float:left; } #left{ background-color:black; overflow-x: auto; overflow-y: auto; border: solid 1px; font-family:"楷體"; text-align:center; font-color:#333; width:250px; height:800px; float:left; } #right{ background-color:black; border: solid 1px; font-family:"楷體"; text-align:center; font-color:#333; width:350px; height:450px; float:left; } #right1{ background-color:black; overflow-x: auto; overflow-y: auto; border: solid 1px; font-family:"楷體"; text-align:center; font-color:#333; width:175px; height:450px; float:left; } #right2{ background-color:black; overflow-x: auto; overflow-y: auto; border: solid 1px; font-family:"楷體"; text-align:center; font-color:#333; width:170px; height:450px; float:right; } #mid{ background-color:black; border: solid 1px; font-family:"楷體"; text-align:center; font-color:#333; width:850px; height:800px; float:left; } #line{ background-color:#5c5c5c; border: solid 1px; width:350px; height:350px; float:left; } </style> <body onload="onload()"> <% %> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="title"> <h2 style="color:white">全球疫情可視化展示</h2> </div> <div id="time"><h2 id="showtime" style="color:white">time</h2></div> <div id="left"></div> <div id="mid"></div> <div id="right"> <div id="right1">死亡人數</div> <div id="right2">治癒人數</div> </div> <div id="line">柱狀圖</div> <script type="text/javascript"> function onload(){ setInterval("document.getElementById('showtime').innerHTML=new Date().toLocaleString();", 1000); $.post( "getconfirmed", function(data){ var sum=0; for(var i=0;i<data.length;i++) sum+= parseInt(data[i].confirmed); var htmltext="<h style='color: white;'>全球確診人數為："+"<span style='color: red;font-size:50px'>"+sum+"</span></h>"; htmltext+="<table>" for(var i=0;i<data.length;i++) htmltext+="<tr><td>"+"<span style='color: white;'>"+data[i].name+"</span></td><td><span style='color: red;'>"+data[i].confirmed+"</span></td></tr>"; htmltext+="</table>"; $("#left").html(htmltext); }, "json" ); $.post( "getdead", function(data){ var sum=0; for(var i=0;i<data.length;i++) sum+= parseInt(data[i].dead); var htmltext="<h style='color: white;'>全球死亡人數為："+"<span style='color: red;font-size:50px'>"+sum+"</span></h>"; htmltext+="<table>" for(var i=0;i<data.length;i++) htmltext+="<tr><td>"+"<span style='color: white;'>"+data[i].name+"</span></td><td><span style='color: red;'>"+data[i].dead+"</span></td></tr>"; htmltext+="</table>"; $("#right1").html(htmltext); }, "json" ); $.post( "getcured", function(data){ var sum=0; for(var i=0;i<data.length;i++) sum+= parseInt(data[i].cured); var htmltext="<h style='color: white;'>全球治癒人數為："+"<span style='color: green;font-size:50px'>"+sum+"</span></h>"; htmltext+="<table>" for(var i=0;i<data.length;i++) htmltext+="<tr><td>"+"<span style='color: white;'>"+data[i].name+"</span></td><td><span style='color: green;'>"+data[i].cured+"</span></td></tr>"; htmltext+="</table>"; $("#right2").html(htmltext); }, "json" ); //處理隨日期變化的全球確診人數圖 var myChart1 = echarts.init(document.getElementById('line')); myChart1.setOption({ title:{ text:'確診人數變化' }, tooltip:{}, grid: { left: '4%', right: '4%', bottom: '3%', //是否顯示刻度標籤 containLabel: true }, legend:{ data:['確診數'] }, xAxis:{ data:[], axisLabel:{ //橫坐標全部顯示 interval:0, //橫坐標傾斜45度 rotate:-45, }, }, yAxis:{}, series:[{ name:'確診數', type:'line', data:[] }] }) var cname=[]; var value=[]; //處理這段時間疫情總數變化趨勢 $.ajax({ url:"dataconfirmed", type:"POST", dataType:"JSON", async:true, success:function(data){ for(var i=0;i<data.length;i++) { cname[i]=data[i].name; value[i]=parseInt(data[i].confirmed); } myChart1.setOption({ xAxis:{ //放橫坐標的數組 data:cname, }, series:[{ name:'確診數', //每個橫坐標對應的數值 data:value }] }); } }); //處理世界疫情地圖 $.ajax({ url:"allworld", type:"POST", dataType:"JSON", async:true, success:function(data){//表示處理成功之後做什麼,後面跟一個匿名函數。回調函數，表示處理頁面處理完數據以後執行這個函數。data表示處理頁面返回的值，用形參接收。 var mydata = new Array(0); for(var i=0;i<data.length;i++){ var d = { }; d["name"] = data[i].name;//.substring(0, 2); d["value"] = data[i].confirmed; d["Yisi_num"] = data[i].suspected; d["Cured_num"] = data[i].cured; d["Dead_num"] = data[i].dead; mydata.push(d); } //初始化echarts實例 var myChart = echarts.init(document.getElementById('mid')); // 指定圖表的配置項和數據 var option = { tooltip : { trigger: 'item', formatter : function(params) { return params.name + '<br/>' + '確診人數 : ' + params.value + '<br/>' + '死亡人數 : ' + params['data'].Dead_num + '<br/>' + '治癒人數 : ' + params['data'].Cured_num + '<br/>'+ '疑似患者人數 : ' + params['data'].Yisi_num; }//數據格式化 }, title: { text: '世界疫情圖', left: 'center' }, legend: { orient: 'vertical', left: 'left', data: ['世界疫情圖'] }, visualMap: { type: 'piecewise', pieces: [ { min: 70000, max: 50000000, label: '確診70000人以上', color: 'red' }, { min: 10000, max: 69999, label: '確診10000-69999人', color: 'blue' }, { min: 5000, max: 9999, label: '確診5000-9999人', color: 'purple' }, { min: 1500, max: 4999, label: '確診1500-4999人', color: 'yellow' }, { min: 500, max: 1499, label: '確診500-1499人', color: 'gold' }, { min: 0, max: 499, label: '確診1-499人', color: 'green' }, ], color: ['#E0022B', '#E09107', '#A3E00B'] }, toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, restore: { show: true }, saveAsImage: { show: true } } }, roamController: { show: true, left: 'right', mapTypeControl: { 'world': true } }, series: [ { name: '確診數', type: 'map', mapType: 'world', 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": "錫亞琴冰川地區" }, roam: false, label: { show: false, color: 'blue' }, data: mydata } ] }; //使用指定的配置項和數據顯示圖表 myChart.setOption(option); }, error:function(){//處理頁面出錯以後執行的函數。 } }); } </script> </body> </html>
View Code
