全国疫情统计可视化——阶段二三

hhjing

太难了，弄了好几天的全国疫情统计可视化，今天终于完工了，在全国疫情统计可视化博客的基础上，完成了全国疫情统计可视化+数据下钻，可以点击省，显示各省的详细数据信息。我观摩了很多大佬的博客，在大佬们博客上，我学习到了很多，包括思想和知识，自我感受阶段二和阶段三比阶段一有很大的难度。实属不易呀呀呀。真切实地的感受到了基本功的重要性。不然太多的bug容易被忽视呀。

课题要求：

 

 

项目思路：

1.在servlet中对获得的数据进行格式化转化（利用Gson将封装的信息转换成json的形式）

2.学习echarts的相关事件，在折线的基础上学习点击事件，并且利用里面的tooltip相关知识点，完成显示框和并悬停显示详细信息

3.在阶段二的基础上，使用ajax直接从数据库中获取各省份下的各个市的有关疫情的数据

 

项目结构：

 

 

相关源码：

 

Dao.java:

 

package com.dao;

import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import com.bean.Bean;
import com.db.DB;
import com.sun.corba.se.pept.transport.Connection;




public class Dao {
    
    //阶段一按着时间段进行查询
    public List<Bean> CheckTime1(String firsttime,String lasttime){
        
        java.sql.Connection con=null;
        PreparedStatement psts=null;
        ResultSet rs=null;
        String tablename="info";
        System.out.println("-------");
        DB db=new DB();
        
        try {
        con=db.getCon();
        //String sql="select * from info where Date between \'"+firsttime+"\' and \'"+lasttime+"\'";
        String sql="select * from info where Date between \'"+firsttime+"\' and \'"+lasttime+"\'";

        psts=con.prepareStatement(sql);
        //psts.setString(1,firsttime);
        //psts.setString(2, lasttime);
        rs=psts.executeQuery();
        List<Bean> list=new ArrayList<Bean>();
        while(rs.next()){

             String date=rs.getString("Date");
             String province=rs.getString("Province");
             String city=rs.getString("city");
             String confirmed_num=rs.getString("Confirmed_num");
             String cured_num=rs.getString("Cured_num");
             String dead_num=rs.getString("Dead_num");
             
             Bean data=new Bean(date,province,city,confirmed_num,cured_num,dead_num);
             list.add(data);
        }
        return list;
    }catch (SQLException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
        return null;
  }
    
    
    //阶段二按着时间点进行查询
    public List<Bean> search(String data){
        int num=0;
        DB db=new DB();
        List<Bean>list=new ArrayList<Bean>();
    Connection con=null;
    java.sql.Statement psts=null;
     ResultSet rs=null;
    try {
        con=(Connection) db.getCon();
        String sql="select * from info1 where Date =\'"+data+"\'";
        System.out.print(sql);
        psts=((java.sql.Connection) con).createStatement();
        rs=psts.executeQuery(sql);
        while(rs.next()){
           // String id=rs.getString("Id");
            String date=rs.getString("Date");
             String province=rs.getString("Province");
             String city=rs.getString("City");
             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");
             
             Bean data1=new Bean(date,province,city,confirmed_num,cured_num,dead_num);
             list.add(data1);
             System.out.println("第二阶段dao");
            
        }
    } catch (SQLException e) {
        e.printStackTrace();
    }
    return list;
}
    //阶段三
     public static List searchPro(String data,String province) {
            int num=0;
            List<Bean>list=new ArrayList<Bean>();
        Connection con=null;
        java.sql.Statement psts=null;
         ResultSet rs=null;
         DB db=new DB();
        try {
            con=(Connection) db.getCon();
            String sql="select * from info1 where Date =\'"+data+"\' and Province =\'"+province+"\'";
            System.out.print(sql);
            psts=((java.sql.Connection) con).createStatement();
            rs=psts.executeQuery(sql);
            while(rs.next()){
               // String id=rs.getString("Id");
                String date=rs.getString("Date");
                String city=rs.getString("City");
                 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");
                 
                Bean pro=new Bean(date,province,city,confirmed_num,cured_num,dead_num);
                 list.add(pro);    
                 
                 System.out.println("第三阶段dao");
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return list;
            
        }
    
    
     public static void main(String[] args) {
            Dao dataDao=new Dao();
            //List<information>list=dataDao.search("2020-02-08 02:28:59");
            List<Bean>list=dataDao.searchPro("2020-02-08 02:28:59","湖北省");
            int size=list.size();
            System.out.print(size);
            
        }
     
}
Dao.java

 

BeanServlet.java:

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.bean.Bean;
import com.dao.Dao;
import com.google.gson.Gson;

/**
 * Servlet implementation class InfoServlet
 */
@WebServlet("/InfoServlet")
public class BeanServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public BeanServlet() {
        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");
        response.setCharacterEncoding("UTF-8");
        
        String dataString=request.getParameter("time");
        
        List<Bean>list=new ArrayList<Bean>();
        Dao dataDao=new Dao();
        list=dataDao.search(dataString);
        if(list!=null) {
            Gson gson = new Gson();
            String json = gson.toJson(list);
            System.out.println(json);
            response.getWriter().write(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);
    }

}
BeanServlet

CityServlet.java:

package com.servlet;

import java.io.IOException;
import java.sql.SQLException;
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.bean.Bean;
import com.bean.City;
import com.dao.Dao;
import com.google.gson.Gson;

/**
 * Servlet implementation class proServlet
 */
@WebServlet("/proServlet")
public class CityServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public CityServlet() {
        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");
            response.setCharacterEncoding("UTF-8");
            String method = request.getParameter("method");
            if(method.equals("d")) {
                try {
                    d(request, response);
                } catch (SQLException e) {
                    e.printStackTrace();
                }
                }else if(method.equals("city")) {
                    try {
                        city(request, response);
                    } catch (SQLException e) {
                        e.printStackTrace();
                    }
                }
        }
            /**
             * @param request
             * @param response
             */
            private void d(HttpServletRequest request, HttpServletResponse response)throws SQLException, ServletException, IOException {
                // TODO Auto-generated method stub
                String province = request.getParameter("province");
                String time = "2020-02-12 10:14:15";
                Dao dao=new Dao();
                List<Bean> list = dao.searchPro(time,province);
                List<City> data = new ArrayList<City>();
                for(int i=1; i<list.size();i++) {
                    City city = new City();
                    city.setProvince(list.get(i).getCity());
                    city.setConfirmed_num(list.get(i).getConfirmed_num());
                    data.add(city);
                }
                Gson gson = new Gson();
                String json = gson.toJson(data);
                System.out.println(json);
                response.getWriter().write(json);
            }

            /**
             * @param request
             * @param response
             */
            private void city(HttpServletRequest request, HttpServletResponse response)throws SQLException, ServletException, IOException {
                // TODO Auto-generated method stub
                String province = request.getParameter("province");
                String time = "2020-02-12 10:14:15";
                Dao dao=new Dao();
                List<Bean> list = dao.searchPro(time,province);
                List<City> data = new ArrayList<City>();
                for(int i=1; i<list.size();i++) {
                    City city = new City();
                    city.setProvince(list.get(i).getCity());
                    city.setConfirmed_num(list.get(i).getConfirmed_num());
                    data.add(city);
                }
                Gson gson = new Gson();
                String json = gson.toJson(data);
                System.out.println(json);
                request.setAttribute("list", json);
                request.setAttribute("province", province);
                request.getRequestDispatcher("show_province.jsp").forward(request, response);
            }

      
    /**
     * @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);
    }

}
CityServlet

show_china.html:

show_china
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPEhtml><htmlstyle="height:100%"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/><base><title>全国疫情地图</title><scriptsrc="js/jquery-1.12.3.min.js"type="text/javascript"></script><scripttype="text/javascript"src="js/echarts.min.js"></script><scripttype="text/javascript"src="js/china.js"></script><scripttype="text/javascript"src="province-json"></script></head><bodystyle="height:100%;margin:0"><divclass="row"style="background-color:silver;height:50px;text-align:center;line-height:50px">查询的日期<inputtype="text"name="time"id="time"placeholder="yyyy-MM-ddhh:mm:ss"><inputtype="button"value="查询"onclick="tu()"></div><divid="main"style="height:100%"></div></body><style>*{margin:0;padding:0}html,body{width:100%;height:100%;}#main{width:600px;height:450px;margin:20pxauto;border:1pxsolid#ddd;}/*默认长宽比0.75*/</style><scripttype="text/javascript">functionrandomData(){returnMath.round(Math.random()*500);}vardt;varmydata1=newArray(0);functiontu(){time=$("#time").val();//alert(time.substring(0,2));$.ajax({url:"BeanServlet",//处理页面地址，表示ajax要用哪个页面处理async:true,type:"POST",//传值方式data:{"time":time},success:function(data){dt=data;for(vari=0;i<33;i++){vard={};d["province"]=dt[i].province;//.substring(0,2);d["confirmed_num"]=dt[i].confirmed_num;//d["yisi_num"]=dt[i].yisi_num;d["cured_num"]=dt[i].cured_num;d["dead_num"]=dt[i].dead_num;mydata1.push(d);}//varmdata=JSON.stringify(mydata1);varoptionMap={backgroundColor:\'#FFFFFF\',title:{text:\'全国疫情地图\',subtext:\'\',x:\'center\'},tooltip:{formatter:function(params){returnparams.province+\'<br/>\'+\'确诊人数:\'+params.confirmed_num+\'<br/>\'+\'死亡人数:\'+params[\'data\'].dead_num+\'<br/>\'+\'治愈人数:\'+params[\'data\'].cured_num;}//数据格式化},//左侧小导航图标visualMap:{min:0,max:35000,text:[\'多\',\'少\'],//取值范围的文字realtime:false,calculable:true,inRange:{color:[\'#f5bba7\',\'#974236\',\'#372a28\']//取值范围的颜色},show:true//图注},//配置属性series:[{type:\'map\',mapType:\'china\',roam:false,//不开启缩放和平移zoom:1.23,//视角缩放比例label:{show:true,fontSize:\'10\',color:\'rgba(0,0,0,0.7)\'},itemStyle:{//外边框(底层地图)的一些属性borderColor:\'rgba(0,0,0,0.2)\',/*borderWidth:6,shadowBlur:10,shadowColor:\'rgba(0,0,0,0.2)\',*/},emphasis:{itemStyle:{//高亮时点的颜色areaColor:\'#F3B329\',//鼠标选择区域颜色shadowOffsetX:0,shadowOffsetY:0,shadowBlur:20,borderWidth:0,shadowColor:\'rgba(0,0,0,0.5)\'},},data:mydata1,nameMap:{\'南海诸岛\':\'南海诸岛\',\'北京\':\'北京市\',\'天津\':\'天津市\',\'上海\':\'上海市\',\'重庆\':\'重庆市\',\'河北\':\'河北省\',\'河南\':\'河南省\',\'云南\':\'云南省\',\'辽宁\':\'辽宁省\',\'黑龙江\':\'黑龙江省\',\'湖南\':\'湖南省\',\'安徽\':\'安徽省\',\'山东\':\'山东省\',\'新疆\':\'新疆维吾尔自治区\',\'江苏\':\'江苏省\',\'浙江\':\'浙江省\',\'江西\':\'江西省\',\'湖北\':\'湖北省\',\'广西\':\'广西壮族自治区\',\'甘肃\':\'甘肃省\',\'山西\':\'山西省\',\'内蒙古\':"内蒙古自治区",\'陕西\':\'陕西省\',\'吉林\':\'吉林省\',\'福建\':\'福建省\',\'贵州\':\'贵州省\',\'广东\':\'广东省\',\'青海\':\'青海省\',\'西藏\':\'西藏自治区\',\'四川\':\'四川省\',\'宁夏\':\'宁夏回族自治区\',\'海南\':\'海南省\',\'台湾\':\'台湾\',\'香港\':\'香港\',\'澳门\':\'澳门\'}}]};//初始化echarts实例varmyChart=echarts.init(document.getElementById(\'main\'));myChart.on(\'click\',function(params){alert(params.name);/*varurl="servlet2?province="+params.name;*/varurl="CityServlet?method=city&province="+params.name+"&time="+time;window.location.href=url;});//使用制定的配置项和数据显示图表myChart.setOption(optionMap);},error:function(){alert("请求失败");},dataType:"json"});}</script></html>

show_province.html:

<%@ 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">
<script src="js/jquery-1.12.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<title>Insert title here</title>
</head>
<div id="main" style="height: 100%"></div>
<style>
        *{margin:0;padding:0}
        html,body{
            width:100%;
            height:100%;
        }
        #main{
              width:600px;
              height:450px;
              margin: 20px auto;
              border:1px solid #ddd;
          }
        /*默认长宽比0.75*/
    </style>
<body>

  
<script>
//初始化echarts实例
var myChart = echarts.init(document.getElementById(\'main\'));

var province = "${province}";



$.get("mapjson/"+ province +".json", function (geoJson) {

    myChart.hideLoading();

    echarts.registerMap(province, geoJson);

    myChart.setOption(option = {
        title: {
            text: province + \'疫情地图\',
            subtext : \'\',
            x : \'center\'
        },
        tooltip: {
            trigger: \'item\',
            formatter: \'{b}<br/>{c} (确诊 / 人)\'
        },
        toolbox: {
            show: true,
            orient: \'vertical\',
            left: \'right\',
            top: \'center\',
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        visualMap: {
            min: 0,
            max: 50000,
            text : [ \'多\', \'少\' ],//取值范围的文字
            realtime : false,
            calculable : true,
            inRange : {
                color : [ \'#f5bba7\', \'#974236\', \' #372a28\' ]//取值范围的颜色
            },
            show:true//图注
        },
        series: [
            {
                name: province + \'地区疫情情况\',
                type: \'map\',
                mapType: province, // 自定义扩展图表类型
                roam: false,//不开启缩放和平移
                label: {
                    show: true,
                    fontSize:\'10\',
                    color: \'rgba(0,0,0,0.7)\'
                },
                itemStyle : {//外边框(底层地图)的一些属性
                    borderColor : \'rgba(0, 0, 0, 0.2)\',
                    /* borderWidth :6,
                    shadowBlur:10,
                    shadowColor: \'rgba(0, 0, 0, 0.2)\', */
                
                },
                                  
                emphasis: {
                   itemStyle: {
                       
                    // 高亮时点的颜色
                       areaColor: \'#F3B329\',//鼠标选择区域颜色
                       shadowOffsetX: 0,
                       shadowOffsetY: 0,
                       shadowBlur: 20,
                       borderWidth: 0,
                       shadowColor: \'rgba(0, 0 ,0, 0.5)\'
                   },
                
                }
            }
        ]
    });
});



$.ajax({
    url:"CityServlet?method=d",
    async:true,
    type:"POST",
    data:{"province":province},
    dataType:"json",
    success:function(data){
        alert(data.length);
        var mydata1 = new Array(0);
        for(var i=0;i<data.length;i++){
            var c = {};
            c["province"] = data[i].name+\'市\';
            c["confirmed_num"] = data[i].value;
            mydata1.push(c);
        }
        
        myChart.setOption({        //加载数据图表
            series: [{
                data: mydata1
            }]
        });
    },
    error:function(){
        alert("请求失败");
    },
    
});




</script>


</body>
</html>
show_province

 运行截图：

 

 

分类：

技术点：

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode