全国疫情图表展示以及实现数据的下钻

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

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

因为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层：

package servlet;

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)
                    for(j=0;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层：

package servlet;

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
    }

    /**
     * @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");
        String code=request.getParameter("code");
        predao dao=new predao();
        response.getWriter().write(dao.getcity(date,code));
    }

    /**
     * @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

 

map.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@page import="java.util.TreeMap" %>




 
   
   
   
 
    
    
    
    




    请输入日期：      class="btn btn-primary">查询

View Code

 

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