全国疫情统计可视化地图（3）

第三阶段是数据下钻，要求点击省可以下钻到各个地市的数据显示。

1：首先，要显示相应的地图需要导入相应的js 上一篇文章中分享的链接同样包含各个省份的js  链接: https://pan.baidu.com/s/1MFt-0LqAUQXzpiI1qy-Q0w 提取码: q7y4。点击省可以跳转到地市，所以需要在 myChart.on中加一个跳转的语句。语句中加上时间和省份，用于查找。

myChart.on(‘click‘, function (params) {
var url = "HebeiData.jsp?province="+params.name+"&time="+time;
window.location.href =url;
});

省级地图的绘制和前一阶段绘制过程相同。但是！有一个坑是 series属性配置中mapType 是汉字 如河北地图应为  mapType : ‘河北‘ 地图总是显示不出来的原因正在这，删删改改了好久，看了hebei.js的代码才发现，坑在这里。每个省份点击都可以进入到相应省份的数据。我以河北为例显示。若想全都显示的话，只需将所有省份的js导入，然后把mapType的值 设为 province即可。

<%@ 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/hebei.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>
<%String Date=request.getParameter("time");
  request.setAttribute("time",Date);
  String province=request.getParameter("province");
  request.setAttribute("province",province); 

%>
<div>

</div>
  <div id="main">

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

    function randomValue() {
        return Math.round(Math.random()*1000);
    }
    var dt;
    var mydata = new Array(0);

    var time = "${time}";
    var province = "${province}";
    alert(province);
        $.ajax({
            url : "CityServlet",
            async : true,
            type : "POST",
            data : {
                "Province" : province,
                "time" : time,

            },
            dataType : "json",
            success : function(json) {

                for (var i = 1; i < json.length; i++) {
                    var d = {};

                    d["name"] = json[i].City+‘市‘;
                    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;

                    mydata.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: 50,
                        left: ‘left‘,
                        top: ‘bottom‘,
                        text: [‘高‘,‘低‘],//取值范围的文字
                        inRange: {
                            color: [‘#e0ffff‘, ‘#006edd‘]//取值范围的颜色
                        },
                        show:true//图注
                    },

                    //配置属性
                    series : [ {
                        type : ‘map‘,
                        mapType : ‘河北‘,
                        label : {
                            show : true
                        },
                        data : mydata,

                    } ]
                };

        //使用制定的配置项和数据显示图表
        myChart.setOption(optionMap);
        myChart.on(‘click‘, function (params) {
            alert(params.name);
        });

        alert("成功！");
            },
            error : function() {
                alert("请求失败");
            },
       });

  /*  setTimeout(function () {
        myChart.setOption({
            series : [
                {
                    name: ‘信息量‘,
                    type: ‘map‘,
                    geoIndex: 0,
                    data:dataList
                }
            ]
        });
    },1000)*/

</script>

</body>
</html>

HeBeiData.jsp

2：以为要点击相应省份显示相应的地图数据，所以dao层查询的时候。加上按照省份查询。

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 List<Data> list(String Date,String Province) { // 查询所有信息

        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 info1 where Province =?";

        try {

            PreparedStatement pst = conn.prepareStatement(sql);

            pst.setString(1,Province);

            ResultSet rs = pst.executeQuery();

            Data data = null;
            int index=1;
            while (rs.next()) {

                int id= rs.getInt("id");;

                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&&City!=null) {
                    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

3：Servlet传值和前篇类似，将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 com.dao.Dao;
import com.google.gson.Gson;
import com.bean.*;

@WebServlet("/CityServlet")
public class CityServlet 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 Province=req.getParameter("Province");
                                String Date=req.getParameter("time");
        Dao dao = new Dao();
        List<Data> list=null;
        System.out.println(Date);
        list=dao.list(Date,Province);

                               Gson gson = new Gson();
                               String json = gson.toJson(list);
                               System.out.println(json);
                               resp.getWriter().write(json);
    }

}

CityServlet

下面是运行截图：

原文地址：https://www.cnblogs.com/wendi/p/12430111.html

时间： 2024-11-04 22:22:11

全国疫情统计可视化地图（3）的相关文章

全国疫情统计可视化地图（2）

第二阶段的要求是通过地图展示全国疫情的情况. 1:首先要下载中国地图的插件 china.js  ,由于目前Echarts官网已经不提供地图的下载.下面是echarts.min.js  china.js和各个省份地图的js的资源,方便大家下载. 链接: https://pan.baidu.com/s/1MFt-0LqAUQXzpiI1qy-Q0w 提取码: q7y4 2: 要将数据库中数据传进地图去,自然要书写相应的bean目录.dao层以及servlet.bean目录的话不用多说,和之前的代码一

课堂练习-全国疫情统计可视化地图

1 第一阶段目标:导入全国疫情数据库payiqing.sql(MySQL数据库).可以按照时期查询各个省市的疫情统计表格.以折线图或柱状图展示某天的全国各省的确诊人数. 1.首先完成数据库的导入,然后编写数据库代码.建立DBUtil.java.实现相关数据的查询,并转化为json,以供Echart柱状图获取数据使用. package dbutil; import java.sql.Connection; import java.sql.Date; import java.sql.DriverMa

全国疫情统计可视化地图（第一阶段）

DBUtil.java package com.helloechart; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; public class DBUtil { public static String db_url = "jdbc:mysql://loca

全国疫情统计可视化（图表）

题目描述           问题分析 使用Echarts处理柱形图 源码 前台的目录结构 构建路径 后台的路径 后台的代码 1 package com.pjh.DBUtils; 2 3 import java.sql.Connection; 4 import java.sql.DriverManager; 5 import java.sql.PreparedStatement; 6 import java.sql.ResultSet; 7 import java.sql.SQLExceptio

全国疫情统计地图可视化(1)

写在前面 该思路借鉴了王正帅同学和张凯鑫同学的博客(地址:https://www.cnblogs.com/20183544-wangzhengshuai/p/12405503.html和 https://www.cnblogs.com/wuren-best/p/12404361.html),并在其基础上进行了修改和改进. 题目要求: 在全国地图上使用不同的颜色代表大概确诊人数区间,颜色的深浅表示疫情的严重程度,可以直观了解高危区域: 鼠标移到每个省份会高亮显示.点击鼠标会显示该省具体疫情情况.点

结对第一次—某次疫情统计可视化（原型设计）

https://w7if3z.axshare.com/#id=mx82vm&p=page_1 原文地址:https://www.cnblogs.com/hylog/p/12370065.html

号外号外：9月21号关于Speed-BI 《全国人口统计数据分析》开讲了

引言:如何快速分析纷繁复杂的数据?如何快速做出老板满意的报表?如何快速将Speed-BI云平台运用到实际场景中? 本课程将通过各行各业案例背景,将Speed-BI云平台运用到实际场景中,通过熟练使用云平台可视化技巧,将枯燥的数字灵活化.可动化:通过统计图表的应用,将灵活可动的图表多样化.专业化,全方位多视角观察.分析案例相关数据,达到报表目的清晰.界面简洁.可分析维度多.反馈性强等目标,操作过程从数据整理至报表生成一步到位,主要涉及分析意图挖掘.指标判断选择.适用图表选择.多维度选择.报表快速生

利用django打造自己的工作流平台(二):疫情统计系统

相关文章: 利用django打造自己的工作流平台(一):从EXCEL到流程化运作 本文是“利用django打造自己的工作流平台”系列文章的第二篇,在自己开发的工作流平台中添加了一个用于排查统计可能受感染人员的项目,可用于公司.部门对员工以及各行政单位对辖区内的人员进行受感染情况的跟踪和统计,为疫情防控贡献一点力量.演示试用地址[点击此处],两个试用账号/密码为:testuser1/testuser1, testuser2/testuser2. 对人员的排查流程如下图1所示: 图1.可能受感染人员

疫情有望好转，新增指标持续下降｜2月12日全国疫情播报

#永洪科技今日疫情播报#最新数据显示:截至2月12日9:00,我国共确诊44631例,疑似21675例,治愈4635例 ,死亡1114例.(注:国家卫建委12日暂未发布最新数据,数据来源参考各省市卫健委总和)整体来看,疫情在向好的趋势发展,湖北地区新增确诊病例继续出现下降,全国不含湖北地区新增确诊也连续几天下滑,青海连续5日无新增病例,西藏地区尚在医学观察的人数为0.但需要注意的是,贵州与其周边地区相比,确诊人数较少,但治愈率最低,死亡与治愈与当地的医疗环境有很大关系,贵州的疫情依然需要重视.疫