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

其他 2020-03-07 18:00:56 阅读次数: 0

要求：

 

 思路：

    使用 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

结果：

猜你喜欢

转载自www.cnblogs.com/xjmm/p/12435837.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022