疫情地图第二阶段

dd110343

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

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

因为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页面进行的跳转，可能沿用的是省份的颜色，导致地区的颜色和省份的颜色几乎一样。

分类：

技术点：

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
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