效果对比图：
原版（约翰·霍普金斯大学制作全球疫情发布图）：
仿制版：
主要技术和工具 java爬虫，mysql，echarts3，jsp
代码实现：
import java.io.IOException; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; 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 javax.servlet.http.HttpSession; //2.将删除改成类名 /** * Servlet implementation class index */ @WebServlet("/world") public class world extends HttpServlet{ private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public world() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); //声明list ArrayList<user> list = new ArrayList(); ArrayList<user> list2 = new ArrayList(); //声明缓冲区 HttpSession session = request.getSession(); String url = "jdbc:mysql://localhost:3306/yiqing1?&useSSL=false&serverTimezone=UTC&useUnicode=yes&characterEncoding=utf8"; Connection conn = null; PreparedStatement ps = null; try { Class.forName("com.mysql.cj.jdbc.Driver"); conn = DriverManager.getConnection(url, "root", "root"); } catch (ClassNotFoundException e) { response.getWriter().print("加载驱动失败"); } catch (SQLException e) { response.getWriter().print("连接数据库失败"); } int as=0; String name[] =new String [3000000]; int num[]=new int[3000000]; int q=0,z=0,d=0; for(int i=0;i<330;i++) { name[i]=""; num[i]=0; } //************************************* //在这里写!!!! Date date3 = new Date();//获得系统时间. SimpleDateFormat sdf = new SimpleDateFormat( "yyyy-MM-dd" ); String nowTime = sdf.format(date3); System.out.println(nowTime); try { Statement stmt = conn.createStatement(); //1.改sql语句 ResultSet rs = stmt.executeQuery("select * from info4 where Date = '" + nowTime + "'"); while (rs.next()) { String date=new String(rs.getString("Date")); String province=new String(rs.getString("Continents")); String city=new String(rs.getString("Province")); String quezhen=new String(rs.getString("Confirmed_num")); String zhiyu=new String(rs.getString("Cured_num")); String dead=new String(rs.getString("Dead_num")); String id2=new String(rs.getString("id")); int id = Integer.parseInt(id2); int qz = Integer.parseInt(quezhen); q=q+qz; int zy = Integer.parseInt(zhiyu); z=z+zy; int de = Integer.parseInt(dead); d=d+de; System.out.println(date+" "+province+" "+city+" "+quezhen); user use2=new user(date,province,city,quezhen,zhiyu,dead); list2.add(use2); name[as]=city; num[as]= qz; as++; } }catch (SQLException e) { response.getWriter().print("查找失败"); } String date2[] =new String [300]; String num2[]=new String[300]; int num3=0; try { Statement stmt = conn.createStatement(); //1.改sql语句 ResultSet rs = stmt.executeQuery("select * from confirm"); while (rs.next()) { String date=new String(rs.getString("Date")); String confirmed=new String(rs.getString("Confirmed_num")); date2[num3]=date; num2[num3]=confirmed; num3++; } }catch (SQLException e) { response.getWriter().print("查找失败"); } request.setAttribute("list2",list2); session.setAttribute("name",name); session.setAttribute("num",num); session.setAttribute("date2",date2); session.setAttribute("num2",num2); session.setAttribute("nowTime",nowTime); session.setAttribute("q",q); session.setAttribute("z",z); session.setAttribute("d",d); request.getRequestDispatcher( "worldmap.jsp").forward(request,response); //*************************************** } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@page import="java.text.SimpleDateFormat"%> <%@page import="java.util.*"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <link rel="stylesheet" type="text/css" href="a.css"> <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Insert title here</title> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> <script src="http://gallery.echartsjs.com/dep/echarts/map/js/world.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <style type="text/css"> .div_foot { position: absolute; height: 50px; text-align: center; line-height: 50px; 100%; } body { background:#000000 } div { float: left; } #left { 300px; height: 700px; } </style> </head> <body background="#fff"> <%String pname[] =(String[]) session.getAttribute("name");%> <%int cnum[] =(int[]) session.getAttribute("num");%> <%int q = (int)session.getAttribute("q");%> <%int z = (int)session.getAttribute("z");%> <%int d = (int)session.getAttribute("d");%> <%String date = (String)session.getAttribute("nowTime");%> <%String name[] = (String[])session.getAttribute("date2");%> <%String num[] = (String[])session.getAttribute("num2");%> <div id="left"> <div style="background-color: #1F1F1F; 300px;height: 100px;margin-top: 10px;margin-left: 10px;"> <h1 style="color: red;" align="center"> <font size="4" color="#ffffff">总确诊人数：</font><br/> <%=q%> </h1> </div> <div style="margin-top: 10px;margin-left: 5px;background-color:#1F1F1F;BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; OVERFLOW: auto; WIDTH: 300px; HEIGHT: 670px" align=center;"> <table class="table"> <c:forEach items="${list2}" var="use2"> <tr> <td> <h3 style="color: red;"> ${use2.quezhen} <font size="2" color="#DEDEDE">${use2.city }</font> </h3> </td> </tr> </c:forEach> </table> </div> <div style="background-color: #1F1F1F; 300px;height: 100px;margin-top: 5px;margin-left: 5px;"> <h1 style="color: red;" align="center"> <font size="3" color="#ffffff">更新时间：</font><br> <%=date %> </h1> </div> </div> <div style=" 1000px;height: 800px;margin-top: 10px;margin-left: 10px;" > <div id="worldMap" style=" 1000px;height:800px; background-color:#4D4D4D;border:1px solid #ccc"></div> </div> <div style=" 550px; height: 1000px;margin-top: 10px;margin-left: 10px;"> <div style="background-color: #1F1F1F; 48%;height: 8%;margin-top: 5px;"> <h1 style="color: #ffffff" align="center"> <font size="4" color="#DEDEDE">累计死亡人数：<br></font> <%=d%> </h1> </div> <div style="background-color: #1F1F1F; 48%;height: 8%;margin-top: 5px;margin-left: 10px;"> <h1 align="center"> <font size="4" color="#DEDEDE">累计治愈人数：<br></font> <font color="#32CD32"><%=z%></font> </h1> </div> <div style=" 48%; height: 50%;background-color: #1F1F1F;background-color: #1F1F1F;BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; OVERFLOW: auto;"> <table class="table" style="overflow-y:scroll;"> <c:forEach items="${list2}" var="use2"> <tr> <td> <h2 style="color: #ffffff;"> ${use2.dead }死亡 <font size="2" color="#DEDEDE">${use2.city }</font> </h2> </td> </tr> </c:forEach> </table> </div> <div style=" 48%; height: 50%;background-color: #1F1F1F;margin-left: 10px;background-color: #1F1F1F;BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; OVERFLOW: auto;"> <table class="table" style="overflow-y:scroll;"> <c:forEach items="${list2}" var="use2"> <tr> <td> <h2 style="color:#32CD32"> ${use2.zhiyu }治愈: <font size="2" color="#DEDEDE">${use2.city }</font> </h2> </td> </tr> </c:forEach> </table> </div> <div id="main" style=" 100%;height:35%;background-color: #1F1F1F;margin-top: 10px;"></div> </div> <div class="div_foot">©Dong的疫情地图</div> </body> <script> let worldChart = echarts.init(document.getElementById('worldMap')); // 国家名英文中文对比 let nameComparison = { 'Canada':'加拿大', 'Russia':'俄罗斯', 'China':'中国', 'United States':'美国', 'Singapore Rep.':'新加坡', 'Dominican Rep.':'多米尼加', 'Palestine':'巴勒斯坦', 'Bahamas':'巴哈马', 'Timor-Leste':'东帝汶', 'Afghanistan':'阿富汗', 'Guinea-Bissau':'几内亚比绍', "Côted'Ivoire":'科特迪瓦', 'Siachen Glacier':'锡亚琴冰川', "Br. Indian Ocean Ter.":'英属印度洋领土', 'Angola':'安哥拉', 'Albania':'阿尔巴尼亚', 'United Arab Emirates':'阿联酋', 'Argentina':'阿根廷', 'Armenia':'亚美尼亚', 'French Southern and Antarctic Lands':'法属南半球和南极领地', 'Australia':'澳大利亚', 'Austria':'奥地利', 'Azerbaijan':'阿塞拜疆', 'Burundi':'布隆迪', 'Belgium':'比利时', 'Benin':'贝宁', 'Burkina Faso':'布基纳法索', 'Bangladesh':'孟加拉国', 'Bulgaria':'保加利亚', 'The Bahamas':'巴哈马', 'Bosnia and Herz.':'波斯尼亚和黑塞哥维那', 'Belarus':'白俄罗斯', 'Belize':'伯利兹', 'Bermuda':'百慕大', 'Bolivia':'玻利维亚', 'Brazil':'巴西', 'Brunei':'文莱', 'Bhutan':'不丹', 'Botswana':'博茨瓦纳', 'Central African Rep.':'中非', 'Switzerland':'瑞士', 'Chile':'智利', 'Ivory Coast':'象牙海岸', 'Cameroon':'喀麦隆', 'Dem. Rep. Congo':'刚果（金）', 'Congo':'刚果（布）', 'Colombia':'哥伦比亚', 'Costa Rica':'哥斯达黎加', 'Cuba':'古巴', 'N. Cyprus':'北塞浦路斯', 'Cyprus':'塞浦路斯', 'Czech Rep.':'捷克', 'Germany':'德国', 'Djibouti':'吉布提', 'Denmark':'丹麦', 'Algeria':'阿尔及利亚', 'Ecuador':'厄瓜多尔', 'Egypt':'埃及', 'Eritrea':'厄立特里亚', 'Spain':'西班牙', 'Estonia':'爱沙尼亚', 'Ethiopia':'埃塞俄比亚', 'Finland':'芬兰', 'Fiji':'斐', 'Falkland Islands':'福克兰群岛', 'France':'法国', 'Gabon':'加蓬', 'United Kingdom':'英国', 'Georgia':'格鲁吉亚', 'Ghana':'加纳', 'Guinea':'几内亚', 'Gambia':'冈比亚', 'Guinea Bissau':'几内亚比绍', 'Eq. Guinea':'赤道几内亚', 'Greece':'希腊', 'Greenland':'格陵兰', 'Guatemala':'危地马拉', 'French Guiana':'法属圭亚那', 'Guyana':'圭亚那', 'Honduras':'洪都拉斯', 'Croatia':'克罗地亚', 'Haiti':'海地', 'Hungary':'匈牙利', 'Indonesia':'印度尼西亚', 'India':'印度', 'Ireland':'爱尔兰', 'Iran':'伊朗', 'Iraq':'伊拉克', 'Iceland':'冰岛', 'Israel':'以色列', 'Italy':'意大利', 'Jamaica':'牙买加', 'Jordan':'约旦', 'Japan':'日本', 'Kazakhstan':'哈萨克斯坦', 'Kenya':'肯尼亚', 'Kyrgyzstan':'吉尔吉斯斯坦', 'Cambodia':'柬埔寨', 'Korea':'韩国', 'Kosovo':'科索沃', 'Kuwait':'科威特', 'Lao PDR':'老挝', 'Lebanon':'黎巴嫩', 'Liberia':'利比里亚', 'Libya':'利比亚', 'Sri Lanka':'斯里兰卡', 'Lesotho':'莱索托', 'Lithuania':'立陶宛', 'Luxembourg':'卢森堡', 'Latvia':'拉脱维亚', 'Morocco':'摩洛哥', 'Moldova':'摩尔多瓦', 'Madagascar':'马达加斯加', 'Mexico':'墨西哥', 'Macedonia':'马其顿', 'Mali':'马里', 'Myanmar':'缅甸', 'Montenegro':'黑山', 'Mongolia':'蒙古', 'Mozambique':'莫桑比克', 'Mauritania':'毛里塔尼亚', 'Malawi':'马拉维', 'Malaysia':'马来西亚', 'Namibia':'纳米比亚', 'New Caledonia':'新喀里多尼亚', 'Niger':'尼日尔', 'Nigeria':'尼日利亚', 'Nicaragua':'尼加拉瓜', 'Netherlands':'荷兰', 'Norway':'挪威', 'Nepal':'尼泊尔', 'New Zealand':'新西兰', 'Oman':'阿曼', 'Pakistan':'巴基斯坦', 'Panama':'巴拿马', 'Peru':'秘鲁', 'Philippines':'菲律宾', 'Papua New Guinea':'巴布亚新几内亚', 'Poland':'波兰', 'Puerto Rico':'波多黎各', 'Dem. Rep. Korea':'朝鲜', 'Portugal':'葡萄牙', 'Paraguay':'巴拉圭', 'Qatar':'卡塔尔', 'Romania':'罗马尼亚', 'Rwanda':'卢旺达', 'W. Sahara':'西撒哈拉', 'Saudi Arabia':'沙特阿拉伯', 'Sudan':'苏丹', 'S. Sudan':'南苏丹', 'Senegal':'塞内加尔', 'Solomon Is.':'所罗门群岛', 'Sierra Leone':'塞拉利昂', 'El Salvador':'萨尔瓦多', 'Somaliland':'索马里兰', 'Somalia':'索马里', 'Serbia':'塞尔维亚', 'Suriname':'苏里南', 'Slovakia':'斯洛伐克', 'Slovenia':'斯洛文尼亚', 'Sweden':'瑞典', 'Swaziland':'斯威士兰', 'Syria':'叙利亚', 'Chad':'乍得', 'Togo':'多哥', 'Thailand':'泰国', 'Tajikistan':'塔吉克斯坦', 'Turkmenistan':'土库曼斯坦', 'East Timor':'东帝汶', 'Trinidad and Tobago':'特里尼达和多巴哥', 'Tunisia':'突尼斯', 'Turkey':'土耳其', 'Tanzania':'坦桑尼亚', 'Uganda':'乌干达', 'Ukraine':'乌克兰', 'Uruguay':'乌拉圭', 'Uzbekistan':'乌兹别克斯坦', 'Venezuela':'委内瑞拉', 'Vietnam':'越南', 'Vanuatu':'瓦努阿图', 'West Bank':'西岸', 'Yemen':'也门', 'South Africa':'南非', 'Zambia':'赞比亚', 'Zimbabwe':'津巴布韦', "Côte d'Ivoire":'科特迪瓦' }; // 数据 let dataMap = [ <% for(int i=0;i<205;i++) {%> {"name": "<%=pname[i]%>","value": <%=cnum[i]%>}, <% } %> {"name": "<%=pname[205]%>","value": <%=cnum[205]%>} ] let option = { backgroundColor: "#1F1F1F", title: { //地图显示标题 show: false, text: '', top:"30px", left: 'center', textStyle: {color: '#000'} }, visualMap: { //图列显示柱 type: 'piecewise', left:30, realtime: false, calculable : true, color: ['#A0522D','#EE5C42','#FF8247','#EEB422','#FFFF00','#FFFFFF'], pieces: [ {gte: 100000, label: '大于等于100000'}, {gte: 10000,lte: 99999, label: '大于10000'}, // (10, Infinity] {gte: 5000,lte: 9999, label: '大于5000'}, {gte: 1000, lte: 4999, label: '大于1000'}, // (1, 9] {gte: 1, lte: 999, label: '不足1000'}, {lt: 1 , label: '0'}, // (-Infinity, 1) ], }, toolbox: { //工具栏 show: false, orient: 'vertical', top:50, itemGap:20, left:30, feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, tooltip: { //提示框组件 show: true, trigger: 'item', formatter: '' }, series: [{ name:"累计确诊人数", type: 'map', mapType: 'world', roam: true, zoom: 1, mapLocation: {y: 100}, data: dataMap, //绑定数据 nameMap: nameComparison, symbolSize: 12, label: { normal: {show: false}, emphasis: {show: true} }, itemStyle: { emphasis: { borderColor: 'transparent', borderWidth: 1 } } }] }; worldChart.setOption(option); </script> <script src="js/echarts.min.js"></script> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); var option2 = { title: { text: '疫情确诊增长情况' }, tooltip: {}, legend: { data:['确诊人数'] }, xAxis: { type: 'category', axisLabel: { interval:0, rotate:10 , textStyle: { color: '#ffffff' } } , data: ["<%=name[0]%>","<%=name[1]%>","<%=name[2]%>","<%=name[3]%>","<%=name[4]%>","<%=name[5]%>" ,"<%=name[6]%>","<%=name[7]%>","<%=name[8]%>","<%=name[9]%>"] }, yAxis: { type:'value' }, series: [{ name: '确诊人数', data: [<%=num[0]%>,<%=num[1]%>,<%=num[2]%>, <%=num[3]%>,<%=num[4]%> ,<%=num[5]%> ,<%=num[6]%>,<%=num[7]%>,<%=num[8]%>,<%=num[9]%>], type: 'line', smooth: true }] }; // 指定图表的配置项和数据 // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option2); </script> </html>