疫情统计可视化地图+数据下钻 - 小橘猫xjm

xjmm

疫情统计可视化地图+数据下钻

要求：

 

 

 

 思路：

    使用 echart.min.js 和 china.js 工具；

    在界面使用ajax请求的数据，使用 Gson 工具将 list 转换成 json 格式的数据，返回给界面；

 

dao:

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

import com.mysql.jdbc.Statement;
//import com.sun.org.apache.xpath.internal.operations.And;

public class dao {

    public List<information> search(String data){
        int num=0;
        List<information>list=new ArrayList<information>();
    Connection con=null;
    java.sql.Statement psts=null;
     ResultSet rs=null;
    try {
        con=db.getCon();
        String sql="select * from info1 where Date =\'"+data+"\'";
        System.out.print(sql);
        psts=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");
             
             information data1=new information(id,date,province,city,confirmed_num,yisi_num,cured_num,dead_num);
             list.add(data1);
            
        }
    } catch (SQLException e) {
        e.printStackTrace();
    }
    return list;
}
    
    public static List searchPro(String data,String province) {
        int num=0;
        List<information>list=new ArrayList<information>();
    Connection con=null;
    java.sql.Statement psts=null;
     ResultSet rs=null;
    try {
        con=db.getCon();
        String sql="select * from info1 where Date =\'"+data+"\' and Province =\'"+province+"\'";
        System.out.print(sql);
        psts=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");
             
             information pro=new information(id,date,province,city,confirmed_num,yisi_num,cured_num,dead_num);
             list.add(pro);    
        }
    } 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<information>list=dataDao.searchPro("2020-02-08 02:28:59","湖北省");
        int size=list.size();
        System.out.print(size);
        
    }
}
View Code

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 javax.sound.midi.MidiDevice.Info;

import com.google.gson.Gson;

/**
 * Servlet implementation class InfoServlet
 */
@WebServlet("/InfoServlet")
public class InfoServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public InfoServlet() {
        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.setCharacterEncoding("UTF-8");
        
        String dataString=request.getParameter("time");
        
        List<information>list=new ArrayList<information>();
        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);
        }
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }


}
infoServlet 
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.google.gson.Gson;

/**
 * Servlet implementation class proServlet
 */
@WebServlet("/proServlet")
public class proServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public proServlet() {
        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
        //response.getWriter().append("Served at: ").append(request.getContextPath());
        
        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";
            List<information> list = dao.searchPro(time,province);
            List<province> data = new ArrayList<province>();
            for(int i=1; i<list.size();i++) {
                province city = new province();
                city.setName(list.get(i).getCity());
                city.setValue(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";
            List<information> list = dao.searchPro(time,province);
            List<province> data = new ArrayList<province>();
            for(int i=1; i<list.size();i++) {
                province city = new province();
                city.setName(list.get(i).getCity());
                city.setValue(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("province_map.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);
    }

}
proServlet

jsp:

全国地图界面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html style="height: 100%">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<base>
<title>疫情地图</title>
<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>
<script type="text/javascript" src="province-json"></script>
</head>

<body style="height: 100%; margin: 0">
    <div class="row" style="background-color: silver; height: 50px;text-align:center;line-height: 50px">
                               查询的日期 <input type="text" name="time" id="time" placeholder="yyyy-MM-dd hh:mm:ss"> 
                   <input type="button" value="查询" onclick="tu()">
    </div>
    <div id="main" style="height: 100%"></div>
</body>
<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>
<script type="text/javascript">
    function randomData() {
        return Math.round(Math.random() * 500);
    }
    var dt;
    var mydata1 = new Array(0);
    function tu() {
        time = $("#time").val();
        //alert(time.substring(0, 2));
        $.ajax({
            url : "InfoServlet",//处理页面地址，表示ajax要用哪个页面处理
            async : true,
            type : "POST",//传值方式
            data : {
                "time" : time
            },
            success : function(data) {
                dt = data;
                for (var i = 0; i < 33; i++) {
                    var d = {
                        
                    };
                    
                    d["name"] = dt[i].province;//.substring(0, 2);
                    d["value"] = 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);
                }
                
                //var mdata = JSON.stringify(mydata1);
                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,
                        text : [ \'多\', \'少\' ],//取值范围的文字
                        realtime : false,
                        calculable : true,
                        inRange : {
                            color : [ \' #7EBFF0\', \'#ffff33\', \'#AA4400\' ]//取值范围的颜色
                        },
                        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实例
                var myChart = echarts.init(document.getElementById(\'main\'));
                myChart.on(\'click\', function (params) {
                    alert(params.name);
                    /* var url = "servlet2?province=" + params.name; */
                    var url = "proServlet?method=city&province=" + params.name+"&time="+time;
                    window.location.href = url;
                    /* alert(params.name +"\n" 
                            + \'确诊人数 : \'+ params.value  +"\n" 
                            + \'死亡人数 : \'+ params[\'data\'].dead_num  +"\n" 
                            + \'治愈人数 : \'+ params[\'data\'].cured_num  +"\n" 
                            + \'疑似患者人数 : \'+ params[\'data\'].yisi_num); */
                            
                });
                //使用制定的配置项和数据显示图表
                myChart.setOption(optionMap);
            },
            error : function() {
                alert("请求失败");
            },
            dataType : "json"
        });
    }
</script>
</html>
map1.jsp

省地图界面：

<%@ 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("province-json/"+ 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 : [ \' #7EBFF0\', \'#ffff33\', \'#AA4400\' ]//取值范围的颜色
            },
            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:"proServlet?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["name"] = data[i].name+\'市\';
            c["value"] = data[i].value;
            mydata1.push(c);
        }
        
        myChart.setOption({        //加载数据图表
            series: [{
                data: mydata1
            }]
        });
    },
    error:function(){
        alert("请求失败");
    },
    
});




</script>


</body>
</html>
province_map

 

结果：

 

 

 

分类：

技术点：

相关文章：

  • 2022-12-23
  • 2021-12-18
  • 2022-01-21
  • 2022-12-23
  • 2021-12-03
  • 2021-12-02
  • 2021-12-02
猜你喜欢
  • 2021-12-02
  • 2021-12-28
  • 2022-12-23
  • 2021-12-02
  • 2021-12-27
  • 2021-12-02
  • 2021-12-02
相关资源
相似解决方案
热门标签
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