正文 

当前位置： 首页 > 程序 > java教程

全国疫情统计可视化地图(代码片段)

wendi wendi     2023-04-14     763

关键词：

技术图片

 

     第二阶段的要求是通过地图展示全国疫情的情况。

   1：首先要下载中国地图的插件 china.js  ，由于目前Echarts官网已经不提供地图的下载。下面是echarts.min.js  china.js和各个省份地图的js的资源，方便大家下载。

      链接: https://pan.baidu.com/s/1MFt-0LqAUQXzpiI1qy-Q0w 提取码: q7y4

      2： 要将数据库中数据传进地图去，自然要书写相应的bean目录、dao层以及servlet。bean目录的话不用多说，和之前的代码一样。下面贴上我的代码。

               

技术图片 
package com.bean;

public class Data 
    private int id;
    private String Date;
    private String Province;
    private String City;
    private String Confirmed_num;
    private String Yisi_num;
    private String Cured_num;
    private String Dead_num;
    private String Code;

    public int getId() 
        return id;
    
    public void SetId(int id)
    
        this.id=id;
    
    public String getDate() 
        return Date;
    
    public void SetDate(String Date) 
        this.Date = Date;
    
    public String getProvince() 
        return Province;
    
    public void SetProvince(String Province) 
        this.Province = Province;
    
    public String getCity() 
        return City;
    
    public void SetCity(String City) 
        this.City = City;
    
    public String getConfirmed_num() 
        return Confirmed_num;
    
    public void SetConfirmed_num(String Confirmed_num) 
        this.Confirmed_num = Confirmed_num;
    
    public String getYisi_num() 
        return Yisi_num;
    
    public void SetYisi_num(String Yisi_num) 
        this.Yisi_num = Yisi_num;
    
    public String getCured_num() 
        return Cured_num;
    
    public void SetCured_num(String Cured_num) 
        this.Cured_num = Cured_num;
    
    public String getDead_num() 
        return Dead_num;
    
    public void SetDead_num(String Dead_num) 
        this.Dead_num = Dead_num;
    
    public String getCode() 
        return Code;
    
    public void SetCode(String Code) 
        this.Code = Code;
    
    
    public Data(int id,String Date,String Province,String City,String Confirmed_num,String Yisi_num,String Cured_num,String Dead_num,String Code) 
        this.id=id;
        this.Date = Date;
        this.Province = Province;
        this.City = City;
        this.Confirmed_num = Confirmed_num;
        this.Yisi_num = Yisi_num;
        this.Cured_num = Cured_num;
        this.Dead_num = Dead_num;
        this.Code = Code;
    
    public Data(int id,String Province,String City,String Confirmed_num,String Yisi_num,String Cured_num,String Dead_num,String Code) 
        this.id=id;
        this.Province = Province;
        this.City = City;
        this.Confirmed_num = Confirmed_num;
        this.Yisi_num = Yisi_num;
        this.Cured_num = Cured_num;
        this.Dead_num = Dead_num;
        this.Code = Code;
    
    public Data(int id,String Date,String Province,String Confirmed_num,String Cured_num,String Dead_num,String Code) 
        this.id=id;
        this.Date = Date;
        this.Province = Province;
        this.Confirmed_num = Confirmed_num;
        this.Cured_num = Cured_num;
        this.Dead_num = Dead_num;
        this.Code = Code;
    
    public Data(String Date,String Province,String Confirmed_num,String Cured_num,String Dead_num,String Code) 
        this.Date = Date;
        this.Province = Province;
        this.Confirmed_num = Confirmed_num;
        this.Cured_num = Cured_num;
        this.Dead_num = Dead_num;
        this.Code = Code;
    
    public Data(int id ,String Date,String Province,String Code) 
        this.id=id;
        this.Date = Date;
        this.Province = Province;
        this.Code = Code;
com.bean

 

然后就是数据库的连接，连接的模板都是固定的，就不发出来了。接下来是dao层的书写，按照日期查找。定义List<Data> list方法存储查找到的数据

 

 

技术图片 
package com.dao;



import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import com.bean.*;
import com.jdbc.Util;


public class Dao 
    
    public List<Data> dlist(String sDate,String eDate)  // 查询所有信息

        String begin="";
        String []s=sDate.split("-");
        for(int i=0;i<s.length;i++)
            begin+=s[i].toString();
        
        String end="";
        String []e=eDate.split("-");
        for(int i=0;i<e.length;i++)
            end+=e[i].toString();
        
        int bg=Integer.valueOf(begin);
        int ed=Integer.valueOf(end);
        
        List<Data> list = new ArrayList<Data>(); // 创建集合
        Connection conn = Util.getConn();
        String sql = "select * from info "; // SQL查询语句

        try 

            PreparedStatement pst = conn.prepareStatement(sql);

            ResultSet rs = pst.executeQuery();
            
            Data data = null;
            
            while (rs.next()) 


                int id= rs.getInt("id");;
                
                String Province = rs.getString("Province");
                
                String Confirmed_num = rs.getString("Confirmed_num");
                
                String Yisi_num = rs.getString("Yisi_num");
                
                String Cured_num = rs.getString("Cured_num");
                
                String Dead_num = rs.getString("Dead_num");
                
                String Code = rs.getString("Code");
                
                String City = rs.getString("City");
                
                String Date=rs.getString("Date");
                
                String num="";
                String date=Date.substring(0, 10);
                String []d=date.split("-");
                for(int i=0;i<d.length;i++)
                    
                        num+=d[i].toString();
                    
                int k=Integer.valueOf(num);
                
                if(k>=bg&&k<=ed) 
                    data = new Data(id,Province,City,Confirmed_num,Yisi_num,Cured_num,Dead_num,Code);
                
                list.add(data);

            

            rs.close(); // 关闭

            pst.close(); // 关闭

         catch (SQLException e1) 

            e1.printStackTrace(); // 抛出异常

        

        return list; // 返回一个集合

    
    public List<Data> list(String Date)  // 查询所有信息

        String begin="";
        String []s=Date.split("-");
        for(int i=0;i<s.length;i++)
            begin+=s[i].toString();
        int bg=Integer.valueOf(begin);
        
        List<Data> list = new ArrayList<Data>(); // 创建集合
        Connection conn = Util.getConn();
        String sql = "select * from info"; // SQL查询语句

        try 

            PreparedStatement pst = conn.prepareStatement(sql);

            ResultSet rs = pst.executeQuery();
            
            Data data = null;
            int index=1;
            while (rs.next()) 

                
                int id= rs.getInt("id");;
                
                String Province = rs.getString("Province");
                
                String Confirmed_num = rs.getString("Confirmed_num");
                
                String Yisi_num = rs.getString("Yisi_num");
                
                String Cured_num = rs.getString("Cured_num");
                
                String Dead_num = rs.getString("Dead_num");
                
                String Code = rs.getString("Code");
                
                String City = rs.getString("City");
                
                String num="";
                String date=Date.substring(0, 10);
                String []d=date.split("-");
                for(int i=0;i<d.length;i++)
                    
                        num+=d[i].toString();
                    
                int k=Integer.valueOf(num);
                
                if(k==bg&&index<=32) 
                    index++;
                    data = new Data(id,Date,Province,City,Confirmed_num,Yisi_num,Cured_num,Dead_num,Code);
                    list.add(data);
                

            

            rs.close(); // 关闭

            pst.close(); // 关闭

         catch (SQLException e1) 

            e1.printStackTrace(); // 抛出异常

        

        return list; // 返回一个集合

    



    public Data SelectAll()  // 根据ID进行查询
        String sql = "select * from info ";
        Connection conn = Util.getConn();
            Statement state = null;
            ResultSet rs = null;
            Data data = null;
            try 
                state = conn.createStatement();
                rs = state.executeQuery(sql);
                while (rs.next()) 

                    int id= rs.getInt("id");;
                    
                    String Province = rs.getString("Province");
                    
                    String Confirmed_num = rs.getString("Confirmed_num");
                    
                    String Yisi_num = rs.getString("Yisi_num");
                    
                    String Cured_num = rs.getString("Cured_num");
                    
                    String Dead_num = rs.getString("Dead_num");
                    
                    String Code = rs.getString("Code");
                    
                    String City = rs.getString("City");
                    
                    String Date=rs.getString("Date");
                    
                        data = new Data(id,Date,Province,City,Confirmed_num,Yisi_num,Cured_num,Dead_num,Code);
                
             catch (Exception e) 
                e.printStackTrace();
             finally 
                Util.close(rs, state, conn);
            
            return data;
com.dao

 

Servlet层用于接受前端传来的日期，然后传递查找到的list里的值。这里要把list转换为json类型，方便将数据传进地图中。

 

技术图片 
package com.servlet;




import java.io.IOException;
import java.util.ArrayList;
import java.util.List;



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;

import com.dao.Dao;
import com.google.gson.Gson;
import com.bean.*;


@WebServlet("/MapServlet")
public class MapServlet extends HttpServlet  // 显示全部数据



    private static final long serialVersionUID = 1L;



    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException 

        this.doPost(req, resp);

    



    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException 

        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        String Date=req.getParameter("time");
        Dao dao = new Dao();
        List<Data> list=null;
    
        list=dao.list(Date);
                                Gson gson = new Gson();
                                String json = gson.toJson(list);

                                System.out.println(json);
                                resp.getWriter().write(json);
MapServlet

 

     3：然后就是JSP页面。运用$.ajax函数，访问MapServlet，返还json数据。然后将json中的数据放进数组中去，和地图数据对接。值得注意的是，数据库中的省份名称和地图的省份名称不同，导致数据无法显示。我在这一点上卡了好久，参考了同学的博客，从新定义名称便可解决这一问题。

nameMap : 

                    ‘南海诸岛‘ : ‘南海诸岛‘,
                    ‘北京‘ : ‘北京市‘,
                    ‘天津‘ : ‘天津市‘,
                    ‘上海‘ : ‘上海市‘,
                    ‘重庆‘ : ‘重庆市‘,
                    ‘河北‘ : ‘河北省‘,
                    ‘河南‘ : ‘河南省‘,
                    ‘云南‘ : ‘云南省‘,
                    ‘辽宁‘ : ‘辽宁省‘,
                    ‘黑龙江‘ : ‘黑龙江省‘,
                    ‘湖南‘ : ‘湖南省‘,
                    ‘安徽‘ : ‘安徽省‘,
                    ‘山东‘ : ‘山东省‘,
                    ‘新疆‘ : ‘新疆维吾尔自治区‘,
                    ‘江苏‘ : ‘江苏省‘,
                    ‘浙江‘ : ‘浙江省‘,
                    ‘江西‘ : ‘江西省‘,
                    ‘湖北‘ : ‘湖北省‘,
                    ‘广西‘ : ‘广西壮族自治区‘,
                    ‘甘肃‘ : ‘甘肃省‘,
                    ‘山西‘ : ‘山西省‘,
                    ‘内蒙古‘ : "内蒙古自治区",
                    ‘陕西‘ : ‘陕西省‘,
                    ‘吉林‘ : ‘吉林省‘,
                    ‘福建‘ : ‘福建省‘,
                    ‘贵州‘ : ‘贵州省‘,
                    ‘广东‘ : ‘广东省‘,
                    ‘青海‘ : ‘青海省‘,
                    ‘西藏‘ : ‘西藏自治区‘,
                    ‘四川‘ : ‘四川省‘,
                    ‘宁夏‘ : ‘宁夏回族自治区‘,
                    ‘海南‘ : ‘海南省‘,
                    ‘台湾‘ : ‘台湾‘,
                    ‘香港‘ : ‘香港‘,
                    ‘澳门‘ : ‘澳门‘

地图中的颜色，左侧小导航图标等可以自行设置，具体可参考 https://www.echartsjs.com/examples/zh/editor.html?c=map-usa   下面是完整的代码

技术图片 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@page import="com.bean.Data" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<meta charset="UTF-8">
     <link type="text/css" rel="stylesheet" href="css/style.css">

    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/china.js"></script>
<title>显示</title>
    <style>
        *margin:0;padding:0
        html,body
            width:100%;
            height:100%;
        
        #main
              width:600px;
              height:450px;
              margin: 150px auto;
              border:1px solid #ddd;
          
        /*默认长宽比0.75*/
    </style>
</head>

<body >
<br>
<h1>疫情统计表</h1>
<br>
<br>
<br>

<div>

<span>
        日期<input class="slide-up " type="date" id="time" name="time">
        <button class="clearfix" style="display:inline-block;float: centre;width:100px;height:40px" type="button" onclick="checkfind()">查询</button>&nbsp;&nbsp;&nbsp;&nbsp;
 </span><br><br>

</div>
  <div id="main">
  
  </div>
  <script type="text/javascript">


    function randomValue() 
        return Math.round(Math.random()*1000);
    
    var dt;
    var data = new Array(0);
    function checkfind() 
        var time=document.getElementById("time").value;
        if(time=="")
        
            alert("请输入时间！");
            return ;
        
        else
            time = $("#time").val();

            $.ajax(
                url : "MapServlet",
                async : true,
                type : "POST",
                data : 
                    "time" : time
                ,
                dataType : "json",
                success : function(json) 
                    
                    
                    
                    for (var i = 0; i < json.length; i++) 
                        var d = ;
                        
                        d["name"] = json[i].Province;
                        d["value"] = json[i].Confirmed_num;
                        d["yisi_num"] = json[i].Yisi_num;
                        d["cured_num"] = json[i].Cured_num;
                        d["dead_num"] = json[i].Dead_num;
                        
                        
                        data.push(d);
                    
                    

    var myChart = echarts.init(document.getElementById(‘main‘));
    function randomValue() 
        return Math.round(Math.random()*1000);
    
    var optionMap = 
            backgroundColor : ‘#FFFFFF‘,
            title : 
                text : ‘全国疫情‘,
                subtext : ‘‘,
                x : ‘center‘
            ,
            tooltip : 
                formatter : function(params) 
                    return params.name + ‘<br/>‘ + ‘确诊人数 : ‘
                            + params.value + ‘<br/>‘ + ‘死亡人数 : ‘
                            + params[‘data‘].dead_num + ‘<br/>‘ + ‘治愈人数 : ‘
                            + params[‘data‘].cured_num + ‘<br/>‘+ ‘疑似患者人数 : ‘
                            + params[‘data‘].yisi_num;
                
            ,

            //左侧小导航图标
            visualMap: 
                min: 0,
                max: 35000,
                left: ‘left‘,
                top: ‘bottom‘,
                text: [‘高‘,‘低‘],//取值范围的文字
                inRange: 
                    color: [‘#e0ffff‘, ‘#006edd‘]//取值范围的颜色
                ,
                show:true//图注
            ,
      

            //配置属性
            series : [ 
                type : ‘map‘,
                mapType : ‘china‘,
                label : 
                    show : true
                ,
                data : data,
                nameMap : 

                    ‘南海诸岛‘ : ‘南海诸岛‘,
                    ‘北京‘ : ‘北京市‘,
                    ‘天津‘ : ‘天津市‘,
                    ‘上海‘ : ‘上海市‘,
                    ‘重庆‘ : ‘重庆市‘,
                    ‘河北‘ : ‘河北省‘,
                    ‘河南‘ : ‘河南省‘,
                    ‘云南‘ : ‘云南省‘,
                    ‘辽宁‘ : ‘辽宁省‘,
                    ‘黑龙江‘ : ‘黑龙江省‘,
                    ‘湖南‘ : ‘湖南省‘,
                    ‘安徽‘ : ‘安徽省‘,
                    ‘山东‘ : ‘山东省‘,
                    ‘新疆‘ : ‘新疆维吾尔自治区‘,
                    ‘江苏‘ : ‘江苏省‘,
                    ‘浙江‘ : ‘浙江省‘,
                    ‘江西‘ : ‘江西省‘,
                    ‘湖北‘ : ‘湖北省‘,
                    ‘广西‘ : ‘广西壮族自治区‘,
                    ‘甘肃‘ : ‘甘肃省‘,
                    ‘山西‘ : ‘山西省‘,
                    ‘内蒙古‘ : "内蒙古自治区",
                    ‘陕西‘ : ‘陕西省‘,
                    ‘吉林‘ : ‘吉林省‘,
                    ‘福建‘ : ‘福建省‘,
                    ‘贵州‘ : ‘贵州省‘,
                    ‘广东‘ : ‘广东省‘,
                    ‘青海‘ : ‘青海省‘,
                    ‘西藏‘ : ‘西藏自治区‘,
                    ‘四川‘ : ‘四川省‘,
                    ‘宁夏‘ : ‘宁夏回族自治区‘,
                    ‘海南‘ : ‘海南省‘,
                    ‘台湾‘ : ‘台湾‘,
                    ‘香港‘ : ‘香港‘,
                    ‘澳门‘ : ‘澳门‘
                

             ]
        ;

 

        //使用制定的配置项和数据显示图表
        myChart.setOption(optionMap);
        myChart.on(‘click‘, function (params) 
             var url = "HeibeiData.jsp?province="+params.name+"&time="+time;
            window.location.href =url;
        );
    alert("成功！");
                ,
                error : function() 
                    alert("请求失败");
                ,
           );
    
         
         
  /*  setTimeout(function () 
        myChart.setOption(
            series : [
                
                    name: ‘信息量‘,
                    type: ‘map‘,
                    geoIndex: 0,
                    data:dataList
                
            ]
        );
    ,1000)*/


</script>
    

</body>
</html>
ChinaData.jsp

 

 

运行效果截图：

技术图片

 

    

全国疫情统计可视化地图(代码片段)

      第三阶段是数据下钻，要求点击省可以下钻到各个地市的数据显示。  1：首先，要显示相应的地图需要导入相应的js上一篇文章中分享的链接同样包含各个省份的js 链接:https://pan.baidu.com/s/1MF... 查看详情

python根据json数据画疫情分布地图(代码片段)

...录一.基础地图使用1.掌握使用pyecharts构建基础的全国地图可视化图表二.疫情地图——国内疫情地图1.案例效果代码三.疫情地图——省级疫情地图 四.数据集 注：数据集在文章最后一.基础地图使用1.掌握使用pyecharts构建基础... 查看详情

全国疫情可视化统计(代码片段)

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><%@taglibprefix="c"uri="http://java.sun.com/jsp/jstl/core"%><%@tagliburi="http://java.sun.com/jsp/jstl/core"prefix="c"%><!DOCTYPEhtml><html><head><metacharset="utf-8"><title&... 查看详情

全国疫情防控监控平台开发

...包括疫情动态，疫情地图，实时疫情图表，疫情数据统计可视化界面，定点医院的追踪，定点医院信息管理，新闻资讯的展示，分类管理，疫情数据的上报和展示，用户登陆登出，信息及权限的管理，实时天气预报等功能。前端... 查看详情

简单几行代码实现全国疫情数据可视化（python课程设计）(代码片段)

...面我们通过python对疫情数据进行一个简单的爬取整理以及可视化。#导入模块importpandasaspdimportrequests#首先这是爬取数据和整理数据我们需要用到的第三方库，疫情数据来自腾讯新闻#实时更新：新冠肺炎疫情最新动态https://... 查看详情

使用springboot+mybatisplus+echarts+mysql从0-1完成中国疫情地图可视化动态展示(代码片段)

最近北京疫情也严重了起来,突然想到了这个动态的echarts全国疫情数据动态展示,做的不好仅供参考前言:用到的技术栈:Springboot+MybatisPlus+Echarts+Mysql1创建数据库表和新增基本的数据方便大家使用我直接导出了.直接运行即... 查看详情

用python爬取全国和全球疫情数据，并进行可视化分析(过程详细代码可运行)(代码片段)

...何爬取实时疫情数据，并且分析数据，作出数据可视化的效果。报告梗概：对中国疫情分析1.1展示各省疫情具体情况（包括各省的城市）1.2找出国内新增疫情的城市1.3展示各省这次疫情感染的总人数1.4绘制中... 查看详情

全球疫情形势动态地图展示(超帅超好玩的python动图)(代码片段)

全球疫情及疫苗接种进度可视化之一--全球疫情形势动态地图展示安装plotly库全球疫情形势定义工具函数抽取数据绘制动态图表重抽样数据抽取、整理与可视化展示抽取原始数据按周重抽样确诊病例治愈病例死亡病例全国疫情及... 查看详情

数据大屏python爬取全国及北京疫情数据实现可视化大屏(代码片段)

前言Python：print("Python祝程序员元旦快乐！")PHP：echo"PHP祝程序员元旦快乐！";JavaScript：document.write("JavaScript祝程序员元旦快乐！")Go：fmt.Printf("Go祝程 查看详情

实战篇39#如何实现世界地图的新冠肺炎疫情可视化？(代码片段)

说明【跟月影学可视化】学习笔记。世界地图新冠肺炎疫情可视化下面将实现世界地图新冠肺炎疫情可视化。数据用的是从2020年1月22日到3月19日这些天的新冠肺炎疫情进展。效果类似下图：https://covid19.who.int/步骤一：准... 查看详情

毕业设计-题目：基于大数据的疫情数据分析及可视化系统(代码片段)

...#xff0c;这里是丹成学长，今天做一个基于大数据的疫情可视化系 查看详情

全国疫情数据可视化展示（详细介绍，含完整源码）

一、全国疫情数据爬取1.数据表共有两个，分别为details和history，表结构如下：2.爬取全国疫情数据代码如下：importrequestsimportjsonimporttimeimportpymysqlimporttracebackdefget_details 查看详情

毕业设计大数据全国疫情数据分析与3d可视化-python大数据(代码片段)

...#xff0c;今天要分享的是🚩大数据全国疫情数据分析与3D可视化🥇学长这里给一个题目综合评分(每项满分5分)难度系数：2分工作量：3分创新点：4分🧿选题指导,项目分享：https://gitee.com/dancheng-senior/project-... 查看详情

毕业设计大数据全国疫情数据分析与3d可视化-python大数据(代码片段)

...#xff0c;今天要分享的是🚩大数据全国疫情数据分析与3D可视化🥇学长这里给一个题目综合评分(每项满分5分)难度系数：2分工作量：3分创新点：4分🧿选题指导,项目分享：https://gitee.com/dancheng-senior/project-... 查看详情

数据大屏python爬取全国及北京疫情数据实现可视化大屏(代码片段)

...家又收获多少？Python爬取全国及北京疫情数据、实现可视化大屏每一个企业向“云”端加速转型，他们同时利用“云”便捷、灵活、安全且前期投资少的优势，快速地实现价值，然后再扩大规模。对于我们个人来... 查看详情

实战篇39#如何实现世界地图的新冠肺炎疫情可视化？(代码片段)

说明【跟月影学可视化】学习笔记。世界地图新冠肺炎疫情可视化下面将实现世界地图新冠肺炎疫情可视化。数据用的是从2020年1月22日到3月19日这些天的新冠肺炎疫情进展。效果类似下图：https://covid19.who.int/步骤一：准... 查看详情

pythonpyecharts数据可视化模块(代码片段)

文章目录1.pyecharts模块介绍2.pyecharts模块安装3.pyecharts配置选项3.1全局配置选项3.2系列配置选项4.基础折线图的构建4.1基本使用流程4.2实现2020年美印日确诊人数对比折线图5.基础地图构建5.1基本使用流程5.2实现国内疫情地图5.3实现... 查看详情

pythonpyecharts数据可视化模块(代码片段)

文章目录1.pyecharts模块介绍2.pyecharts模块安装3.pyecharts配置选项3.1全局配置选项3.2系列配置选项4.基础折线图的构建4.1基本使用流程4.2实现2020年美印日确诊人数对比折线图5.基础地图构建5.1基本使用流程5.2实现国内疫情地图5.3实现... 查看详情