时间戳

首页 > 技术文章 > 疫情地图第二阶段

疫情地图第二阶段

dd110343 2020-03-07 22:20 原文

（一）全国疫情可视化地图以及数据的下钻

首先要实现的是全国数据的统计，通过获取选取的时间，从数据库中找到全国各省的数据，其中对数据库中的各省的名字进行了处理

因为china.js中只能是与省份名字相匹配，找到后用json数组储存起来，并返还给servlet,servlet再返回给调用它的结果，有了数据的json结果

接下来就是对map的构建，现将json格式转化为js格式，然后用datas数组保存起来。并最后给图表赋值。

相关代码如下：

dao层

 

public String getchina(String date)
    {
        JSONArray json =new JSONArray();
        String sql="select * from info where Date like  '"+date+"%'";
        Connection con=null;
        Statement state=null;
        ResultSet rs=null;
        con=DBUtil.getConn();
        int flag=0;
        try {
            state=con.createStatement();
            rs=state.executeQuery(sql);
            while(rs.next())
            {
                JSONObject ob=new JSONObject();
                String name=rs.getString("Province");
                String city=rs.getString("City");
                String confirmed=rs.getString("Confirmed_num");
                String cure=rs.getString("Cured_num");
                String dead=rs.getString("Dead_num");
                String code=rs.getString("Code");
                String newname="";
                if(city.equals("")) {
                    if(name.length()==2)
                    {
                        newname+=name;
                    }
                    if(name.length()==3) {
                        newname+=name.substring(0,2);
                    }
                    if(name.matches("内蒙古.*"))
                    {
                        newname+="内蒙古";
                    }
                    if(name.matches("宁夏.*"))
                    {
                        newname+="宁夏";
                    }
                    if(name.matches("新疆.*"))
                    {
                        newname+="新疆";
                    }
                    if(name.matches("广西.*"))
                    {
                        newname+="广西";
                    }
                    if(name.matches("黑龙江.*"))
                    {
                        newname+="黑龙江";
                    }
                    if(name.matches("西藏.*"))
                    {
                        newname+="西藏";
                    }
                }
                ob.put("name", newname);
                if(!confirmed.equals("")) {
                ob.put("confirmed",Integer.valueOf(confirmed));
                }
                else
                {
                    ob.put("confirmed",0);
                }
                if(!cure.equals("")) {
                ob.put("cure",Integer.valueOf(cure));
                }else {
                    ob.put("cure",0);
                }
                if(!dead.equals("")) {
                ob.put("dead",Integer.valueOf(dead));
                }else {
                    ob.put("dead",0);
                }
                ob.put("code",code);
                json.add(ob);
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        DBUtil.close(rs, state, con);
        return json.toString();
    }
View Code

 

servlet层：

et;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.TreeMap;

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 java.util.List;
import java.util.TreeMap;
 
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import Dao.predao;


/**
 * Servlet implementation class listmap
 */
@WebServlet("/listmap")
public class listmap extends HttpServlet {
    private static final long serialVersionUID = 1L;
       predao dao=new predao();
    /**
     * @see HttpServlet#HttpServlet()
     */
    public listmap() {
        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.setContentType("text/html;charset=UTF-8");
        String date=request.getParameter("date");
        response.getWriter().write(dao.getchina(date));
    }

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

}
View Code

实现省份的数据传输后，就要实现数据的下钻：

数据下钻也就是设置一个点击事件，点击后将点击的省份名字以及Code和查询的日期传给一个函数，由该函数来实现数据的调用

通过名字找到对应的省份json，然后获取该省份的数据并创建地图，之后通过后台来获取该省份的数据，将省份的数据与json里的数据进行比较，将数据库里有的该省份下的市的数据存储起来，代码如下：

var citynamedata,datasize;
    var data;
    if( name in provinces ){
        
        $.getJSON('city/'+provinces[name]+'.json', function(data){
            echarts.registerMap(name, data);
            citynamedata=data;  //data.features[i].properties.name
            datasize=data.features.length;
        });
        
        $.post(
            'getcity',
            {'date':date,'code':code},
            function(result){
                json=JSON.parse(result);
                size=json.length;
                
                data=new Array();
                
                for(i=0;i<size;i++)
                    for(j=0;j<datasize;j++)
                        if(citynamedata.features[j].properties.name.indexOf(json[i].name)!=-1)
                            data.push({
                                value:json[i].confirmed,
                                name:citynamedata.features[j].properties.name,
                            });
View Code

 

然后对地图进行设置，设置时对应的mapType: name等于自定义的省份的名字。

dao层：

public String getcity(String date,String code)
    {
        JSONArray json =new JSONArray();
        String sql="select * from info where Date like  '"+date+"%' and Code like '"+code+"%'";
        Connection con=null;
        Statement state=null;
        ResultSet rs=null;
        con=DBUtil.getConn();
        try {
            state=con.createStatement();
            rs=state.executeQuery(sql);
            while(rs.next())
            {
                JSONObject ob=new JSONObject();
                ob.put("name", rs.getString("City"));
                String confirmed=rs.getString("Confirmed_num");
                if(!confirmed.equals("")) {
                    ob.put("confirmed",Integer.valueOf(confirmed));
                }else {
                    ob.put("confirmed",0);
                    }
                String cure=rs.getString("Cured_num");
                if(!cure.equals("")) {
                    ob.put("cure", cure);
                }else {
                    ob.put("cure", 0);
                }
                String dead=rs.getString("Dead_num");
                if(!dead.equals("")) {
                ob.put("dead", dead);
                }else {
                    ob.put("dead", 0);
                }
                json.add(ob);
            }
        } catch (SQLException e) {
            // TODO 自动生成的 catch 块
            e.printStackTrace();
        }
        DBUtil.close(rs, state, con);
        return json.toString();
    }
View Code

servlet层：

et;

import java.io.IOException;
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 Dao.predao;

/**
 * Servlet implementation class getcity
 */
@WebServlet("/getcity")
public class getcity extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public getcity() {
        super();
        // TODO Auto-generated constructor stub
    }
View Code

map.jsp

uage="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@page import="java.util.TreeMap" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 
   <title>echarts中国地图数据</title>
   <script type="text/javascript" src="js/echarts.min.js" ></script>
   <script type="text/javascript" src="js/china.js" ></script>
 <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.js"></script>
<title>Insert title here</title>
</head>
<body>
<div align="center">
    <span>请输入日期：</span><input type="date" name="date">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="btn btn-primary">查询</button>
</div>
<div id="main" style="height:800px;padding-top: 20px"></div>
<script type="text/javascript">
var provinces = {
        //23个省
        "台湾": "taiwan",
        "河北": "hebei",
        "山西": "shan1xi",
        "辽宁": "liaoning",
        "吉林": "jilin",
        "黑龙江": "heilongjiang",
        "江苏": "jiangsu",
        "浙江": "zhejiang",
        "安徽": "anhui",
        "福建": "fujian",
        "江西": "jiangxi",
        "山东": "shandong",
        "河南": "henan",
        "湖北": "hubei",
        "湖南": "hunan",
        "广东": "guangdong",
        "海南": "hainan",
        "四川": "sichuan",
        "贵州": "guizhou",
        "云南": "yunnan",
        "陕西": "shan3xi",
        "甘肃": "gansu",
        "青海": "qinghai",
        //5个自治区
        "新疆": "xinjiang",
        "广西": "guangxi",
        "内蒙古": "neimenggu",
        "宁夏": "ningxia",
        "西藏": "xizang",
        //4个直辖市
        "北京": "beijing",
        "天津": "tianjin",
        "上海": "shanghai",
        "重庆": "chongqing",
        //2个特别行政区
        "香港": "hongkong",
        "澳门": "macau"
    };
var myChart = echarts.init(document.getElementById('main'));

function getchina(result)
{
var datas;
 myChart.showLoading({
        text: '正在努力的读取数据中...',    //loading话术
    });
    
    var json=JSON.parse(result);
    var size=json.length;
    datas=new Array();
    
    for(i=0;i<size;i++){
        //alert(json[i].name);
        datas.push({
            value:(json[i].confirmed+json[i].cure+json[i].dead),
            name:json[i].name,
        });
    }
    myChart.hideLoading();
        
    var option = {
            title : {
                text: '全国各省疫情数量',
                subtext: '总数量',
                x:'center'
            },
            tooltip : {
                formatter : function(params){
                    index=params.dataIndex;
                    tip="<p>"+params.name+"</p><p>确诊人数:"+json[index].confirmed+"</p><p>治愈人数:"+json[index].cure+"</p><p>死亡人数:"+json[index].dead+"</p>";
                       return tip;
                }
            },
         
            visualMap: {
                type: 'piecewise',
                pieces: [
                  { min: 1000, max: 1000000, label: '大于等于1000人', color: '#372a28' },
                  { min: 500, max: 999, label: '确诊500-999人', color: '#4e160f' },
                  { min: 150, max: 499, label: '确诊150-499人', color: '#974236' },
                  { min: 50, max: 149, label: '确诊50-149人', color: '#ee7263' },
                  { min: 1, max: 49, label: '确诊1-49人', color: '#f5bba7' },
                ],
                color: ['#E0022B', '#E09107', '#A3E00B']
              },
            series : [
                {
                    name: '疫情统计',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    itemStyle:{
                        normal:{label:{show:true}},
                        emphasis:{label:{show:true}}
                    },
                    data:datas
                }
            ]
    }
        myChart.setOption(option);
        myChart.hideLoading();
    myChart.on('click',function(params){
        returnCityMap($('input[name=date]').val(),json[params.dataIndex].code.substr(0,2),params.name);
    })
}

function returnCityMap(date,code,name)
{
myChart.showLoading();
    //alert(name);
    var citynamedata,datasize;
    var data;
    if( name in provinces ){
        
        $.getJSON('city/'+provinces[name]+'.json', function(data){
            echarts.registerMap(name, data);
            citynamedata=data;  //data.features[i].properties.name
            datasize=data.features.length;
        });
        
        $.post(
            'getcity',
            {'date':date,'code':code},
            function(result){
                json=JSON.parse(result);
                size=json.length;
                
                data=new Array();
                
                for(i=0;i<size;i++)
                    for(j=0;j<datasize;j++)
                        if(citynamedata.features[j].properties.name.indexOf(json[i].name)!=-1)
                            data.push({
                                value:json[i].confirmed,
                                name:citynamedata.features[j].properties.name,
                            });
                
                
                city_option={
                        title: {  
                            text: '疫情分布', 
                            x:'center'
                        },  
                        tooltip:{
                            formatter : function(params){
                                index=params.dataIndex;
                                tip="<p>"+params.name+"</p><p>确诊人数:"+json[index].confirmed+"</p><p>治愈人数:"+json[index].cure+"</p><p>死亡人数:"+json[index].dead+"</p>";
                                   return tip;
                            }
                            
                        },
                        visualMap: {
                            type: 'piecewise',
                            pieces: [
                              { min: 1000, max: 1000000, label: '大于等于1000人', color: '#372a28' },
                              { min: 500, max: 999, label: '确诊500-999人', color: '#4e160f' },
                              { min: 150, max: 499, label: '确诊150-499人', color: '#974236' },
                              { min: 50, max: 149, label: '确诊50-149人', color: '#ee7263' },
                              { min: 1, max: 49, label: '确诊1-49人', color: '#f5bba7' },
                            ],
                            color: ['#E0022B', '#E09107', '#A3E00B']
                          },
                        //配置属性
                        series: [{  
                             
                            type: 'map',  
                            mapType: name,
                            data: data,
                            roam: false,
                            itemStyle:{
                                normal:{label:{show:true}},
                                emphasis:{label:{show:true}}
                            },
                            /*label: {  
                                normal: {  
                                    show: true  //省份名称  
                                },  
                                emphasis: {  
                                    show: false
                                }  
                            }*/
                            
                        }] 
                }
                
                myChart.setOption(city_option);
                
                myChart.hideLoading();
            }
        )
    }
}


$('button').click(function(){

    var date=$('input[name=date]').val();
    
    $.post(
            'listmap',
            {'date':$('input[name=date]').val()},
            function(result){
                
                getchina(result);
                
            }
View Code

实现过程有一个小bug，第一个图他所对应的数据颜色显示是正常的，而当进行数据挖掘时显示的数据颜色是有些误差的！！！原因可能是在一个jsp页面进行的跳转，可能沿用的是省份的颜色，导致地区的颜色和省份的颜色几乎一样。

推荐阅读