• 世界疫情可视化图表


    一、题目要求:

    仿照约翰·霍普金斯大学制作全球疫情发布图

    二、步骤分析:

    1、爬取数据

    2、设计页面布局

    3、实现具体功能,包括全球确诊人数、死亡人数、痊愈人数,随日期变化的全球确诊人数图表,全球疫情地图显示。

    三、具体实现:

    1、在数据库建表world_map(MySQL)

    2、使用python爬取疫情数据

    import json
    
    import numpy as np
    import pymysql
    import requests
    from bs4 import BeautifulSoup
    import datetime
    
    url = 'https://ncov.dxy.cn/ncovh5/view/pneumonia?from=timeline&isappinstalled=0'  # 请求地址
    headers = {
        'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36'}  # 创建头部信息
    response = requests.get(url, headers=headers)  # 发送网络请求
    content = response.content.decode('utf-8')
    soup = BeautifulSoup(content, 'html.parser')
    
    # 世界确诊getAreaStat
    listB = soup.find_all(name='script', attrs={"id": "getListByCountryTypeService2true"})
    
    world_messages = str(listB)[95:-21]
    
    print(world_messages)
    world_messages_json = json.loads(world_messages)
    worldList = []
    now_time = datetime.datetime.now().strftime('%Y-%m-%d')
    
    for k in range(len(world_messages_json)):
        worldvalue = (now_time,
                      world_messages_json[k].get('countryType'), world_messages_json[k].get('continents'),
                      world_messages_json[k].get('provinceId'), world_messages_json[k].get('provinceName'),
                      world_messages_json[k].get('provinceShortName'), world_messages_json[k].get('cityName'),
                      world_messages_json[k].get('currentConfirmedCount'), world_messages_json[k].get('confirmedCount'),
                      world_messages_json[k].get('suspectedCount'), world_messages_json[k].get('curedCount'),
                      world_messages_json[k].get('deadCount'), world_messages_json[k].get('locationId'),
                      world_messages_json[k].get('countryShortCode'),)
        worldList.append(worldvalue)
    
    db = pymysql.connect("localhost", "root", "123456", "yiqing", charset='utf8')
    cursor = db.cursor()
    
    sql_world = "INSERT INTO world_map values (%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s)"
    
    worldTuple = tuple(worldList)
    print(worldTuple)
    
    try:
        cursor.executemany(sql_world, worldTuple)
        db.commit()
    except:
        print('执行失败,进入回调2')
        db.rollback()
    
    db.close()
    world

    3、实现显示治愈人数、死亡人数、确诊人数功能,方法一样。(在最后提供完整的jsp代码)

    package servlet;
    
    import java.io.IOException;
    import java.util.Date;
    import java.text.SimpleDateFormat;
    import java.util.ArrayList;
    
    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;
    
    import dao.Dao;
    import entity.World;
    
    /**
     * Servlet implementation class Getconfirmed
     */
    @WebServlet("/Getconfirmed")
    public class Getconfirmed extends HttpServlet {
        private static final long serialVersionUID = 1L;
    
        /**
         * @see HttpServlet#HttpServlet()
         */
        public Getconfirmed() {
            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
            Dao dao=new Dao();
            request.setCharacterEncoding("utf-8");
            Date now = new Date(); 
            SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//设置日期格式
            String Time = dateFormat.format(now);//格式化然后放入字符串中
            String data=Time.substring(0,10);
            ArrayList<World> list=dao.getconfirmed(data);
            Gson gson = new Gson();        
            response.setContentType("text/html;charset=utf-8");
            String json = gson.toJson(list);
            response.getWriter().write(json);
            System.out.println(json);
        }
    
        /**
         * @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);
        }
    
    }
    Getconfirmed.java
    package servlet;
    
    import java.io.IOException;
    import java.text.SimpleDateFormat;
    import java.util.ArrayList;
    import java.util.Date;
    
    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;
    
    import dao.Dao;
    import entity.World;
    
    /**
     * Servlet implementation class Getcured
     */
    @WebServlet("/Getcured")
    public class Getcured extends HttpServlet {
        private static final long serialVersionUID = 1L;
    
        /**
         * @see HttpServlet#HttpServlet()
         */
        public Getcured() {
            super();
            // TODO Auto-generated constructor stub
        }
    
        /**
         * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
         */
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            Dao dao =new Dao();
            request.setCharacterEncoding("utf-8");
            Date now = new Date(); 
            SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//设置日期格式
            String Time = dateFormat.format(now);//格式化然后放入字符串中
            String data=Time.substring(0,10);
            ArrayList<World> list=dao.getcured(data);
            Gson gson = new Gson();        
            response.setContentType("text/html;charset=utf-8");
            String json = gson.toJson(list);
            response.getWriter().write(json);
            System.out.println(json);
        }
    
        /**
         * @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);
        }
    
    }
    Getcured.java
    package servlet;
    
    import java.io.IOException;
    import java.text.SimpleDateFormat;
    import java.util.ArrayList;
    import java.util.Date;
    
    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;
    
    import dao.Dao;
    import entity.World;
    
    /**
     * Servlet implementation class GetDead
     */
    @WebServlet("/GetDead")
    public class GetDead extends HttpServlet {
        private static final long serialVersionUID = 1L;
    
        /**
         * @see HttpServlet#HttpServlet()
         */
        public GetDead() {
            super();
            // TODO Auto-generated constructor stub
        }
    
        /**
         * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
         */
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            Dao dao=new Dao();
            request.setCharacterEncoding("utf-8");
            Date now = new Date(); 
            SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//设置日期格式
            String Time = dateFormat.format(now);//格式化然后放入字符串中
            String data=Time.substring(0,10);
            ArrayList<World> list=dao.getdead(data);
            Gson gson = new Gson();        
            response.setContentType("text/html;charset=utf-8");
            String json = gson.toJson(list);
            response.getWriter().write(json);
            System.out.println(json);
        }
    
        /**
         * @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);
        }
    
    }
    GetDead.java
    public ArrayList<World> getconfirmed(String time) {
            String sql="select * from world_map where now_time like '"+time+"%' ";
            System.out.println(time);
            Connection con=null;
            Statement state=null;
            ResultSet rs=null;
            con=DBUtil.getConn();
            World bean=null;
            ArrayList<World> list=new ArrayList<World>();
            try {
                state=con.createStatement();
                rs=state.executeQuery(sql);
                while(rs.next())
                {
                    bean=new World();
                    bean.setProvinceName(rs.getString("provinceName"));
                    bean.setConfirmedCount(rs.getString("confirmedCount"));
                    bean.setSuspectedCount(rs.getString("suspectedCount"));
                    bean.setCuredCount(rs.getString("curedCount"));
                    bean.setDeadCount(rs.getString("deadCount"));
                    //System.out.println(bean.getName()+" "+bean.getConfirmed());
                    list.add(bean);
                }
            } catch (SQLException e) {
                // TODO 自动生成的 catch 块
                e.printStackTrace();
            }
            DBUtil.close(rs, state, con);
            return list;    
        }
    
        public ArrayList<World> getdead(String time) {
            String sql="select * from world_map where now_time like '"+time+"%' ";
            System.out.println(time);
            Connection con=null;
            Statement state=null;
            ResultSet rs=null;
            con=DBUtil.getConn();
            World bean=null;
            ArrayList<World> list=new ArrayList<World>();
            try {
                state=con.createStatement();
                rs=state.executeQuery(sql);
                while(rs.next())
                {
                    bean=new World();
                    bean.setProvinceName(rs.getString("provinceName"));
                    bean.setConfirmedCount(rs.getString("confirmedCount"));
                    bean.setSuspectedCount(rs.getString("suspectedCount"));
                    bean.setCuredCount(rs.getString("curedCount"));
                    bean.setDeadCount(rs.getString("deadCount"));
                    //System.out.println(bean.getName()+" "+bean.getConfirmed());
                    list.add(bean);
                }
            } catch (SQLException e) {
                // TODO 自动生成的 catch 块
                e.printStackTrace();
            }
            DBUtil.close(rs, state, con);
            return list;    
        }
    
        public ArrayList<World> getcured(String time) {
            String sql="select * from world_map where now_time like '"+time+"%'  ";
            System.out.println(time);
            Connection con=null;
            Statement state=null;
            ResultSet rs=null;
            con=DBUtil.getConn();
            World bean=null;
            ArrayList<World> list=new ArrayList<World>();
            try {
                state=con.createStatement();
                rs=state.executeQuery(sql);
                while(rs.next())
                {
                    bean=new World();
                    bean.setProvinceName(rs.getString("provinceName"));
                    bean.setConfirmedCount(rs.getString("confirmedCount"));
                    bean.setSuspectedCount(rs.getString("suspectedCount"));
                    bean.setCuredCount(rs.getString("curedCount"));
                    bean.setDeadCount(rs.getString("deadCount"));
                    //System.out.println(bean.getCuredCount());
                    list.add(bean);
                }
            } catch (SQLException e) {
                // TODO 自动生成的 catch 块
                e.printStackTrace();
            }
            DBUtil.close(rs, state, con);
            return list;    
        }
    Dao.java

    4、实现随日期变化的全球确诊人数图表

    package servlet;
    
    import java.io.IOException;
    import java.util.ArrayList;
    
    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;
    
    import dao.Dao;
    import entity.World;
    
    /**
     * Servlet implementation class Dataconfirmed
     */
    @WebServlet("/Dataconfirmed")
    public class Dataconfirmed extends HttpServlet {
        private static final long serialVersionUID = 1L;
           
        /**
         * @see HttpServlet#HttpServlet()
         */
        public Dataconfirmed() {
            super();
            // TODO Auto-generated constructor stub
        }
    
        /**
         * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
         */
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            Dao dao =new Dao();
            request.setCharacterEncoding("utf-8");
            ArrayList<World> list=dao.dataconfirmed();
            Gson gson = new Gson();        
            response.setContentType("text/html;charset=utf-8");
            String json = gson.toJson(list);
            response.getWriter().write(json);
            //System.out.println("日期变化曲线!");
            System.out.println(json);
        }
    
        /**
         * @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);
        }
    
    }
    Dataconfirmed.java
        public ArrayList<World> dataconfirmed() {
            String sql="select * from world_map ";
            Connection con=null;
            Statement state=null;
            ResultSet rs=null;
            con=DBUtil.getConn();
            World bean=null;
            int sum=0;
            int ans=0;
            String data=null;
            ArrayList<World> list=new ArrayList<World>();
            try {
                state=con.createStatement();
                rs=state.executeQuery(sql);
                while(rs.next())
                {
                    sum++;
                    bean=new World();
                    bean.setProvinceName(rs.getString("now_time"));
                    if(sum==1)
                        data=bean.getProvinceName();
                    bean.setConfirmedCount(rs.getString("confirmedCount"));
                    if(data.equals(bean.getProvinceName()))
                        ans+=Integer.parseInt(bean.getConfirmedCount());
                    else
                    {
                        String timeString=data.substring(0,10);
                        World bean2=new World();
                        bean2.setProvinceName(timeString);
                        bean2.setConfirmedCount(String.valueOf(ans));
                        sum=1;
                        ans=0;
                        ans+=Integer.parseInt(bean.getConfirmedCount());
                        data=bean.getProvinceName();
                        list.add(bean2);
                    }
                }
                bean.setProvinceName(data.substring(0,10));
                bean.setConfirmedCount(String.valueOf(ans));
                list.add(bean);
            } catch (SQLException e) {
                // TODO 自动生成的 catch 块
                e.printStackTrace();
            }
            DBUtil.close(rs, state, con);
            return list;    
        }
    Dao.java

    5、实现全球疫情地图显示

    package servlet;
    
    import java.io.IOException;
    import java.text.SimpleDateFormat;
    import java.util.ArrayList;
    import java.util.Date;
    
    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;
    
    import dao.Dao;
    import entity.World;
    
    /**
     * Servlet implementation class Allworld
     */
    @WebServlet("/Allworld")
    public class Allworld extends HttpServlet {
        private static final long serialVersionUID = 1L;
    
        /**
         * @see HttpServlet#HttpServlet()
         */
        public Allworld() {
            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");
            Dao dao = new Dao();
            Date now = new Date(); 
            SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//设置日期格式
            String Time = dateFormat.format(now);//格式化然后放入字符串中
            String data=Time.substring(0,10);
            ArrayList<World> list=dao.allworld(data);
            Gson gson = new Gson();        
            response.setContentType("text/html;charset=utf-8");
            String json = gson.toJson(list);
            response.getWriter().write(json);
            //System.out.println(json);
        }
    
        /**
         * @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);
        }
    
    }
    Allworld.java
    public ArrayList<World> allworld(String time) {
            String sql="select * from world_map where now_time like '"+time+"%' ";
            System.out.println(time);
            Connection con=null;
            Statement state=null;
            ResultSet rs=null;
            boolean flag=false;
            con=DBUtil.getConn();
            World bean=null;
            ArrayList<World> list=new ArrayList<World>();
            try {
                state=con.createStatement();
                rs=state.executeQuery(sql);
                while(rs.next())
                {
                    bean=new World();
                    bean.setProvinceName(rs.getString("provinceName"));
                    bean.setConfirmedCount(rs.getString("confirmedCount"));
                    bean.setSuspectedCount(rs.getString("suspectedCount"));
                    bean.setCuredCount(rs.getString("curedCount"));
                    bean.setDeadCount(rs.getString("deadCount"));
                    //System.out.println(bean.getName()+" "+bean.getConfirmed());
                    list.add(bean);
                }
            } catch (SQLException e) {
                // TODO 自动生成的 catch 块
                e.printStackTrace();
            }
            DBUtil.close(rs, state, con);
            return list;    
        }
    Dao.java

    6、jsp页面显示

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@page import="java.util.Date"%>
    <%@page import="java.text.SimpleDateFormat"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="chart/echarts.min.js"></script>
    <script type="text/javascript"
        src="https://www.echartsjs.com/examples/vendors/echarts/map/js/world.js?_v_=1584687926098"></script>
    </head>
    <style>
    #title {
        background-color: black;
        border: solid 1px;
        font-family: "楷体";
        text-align: center;
        font-color: white;
        height: 80px;
        width: 1200px;
        float: left;
    }
    
    #time {
        background-color: black;
        border: solid 1px;
        font-family: "楷体";
        text-align: center;
        font-color: #333;
        width: 250px;
        height: 80px;
        float: left;
    }
    
    #left {
        background-color: black;
        overflow-x: auto;
        overflow-y: auto;
        border: solid 1px;
        font-family: "楷体";
        text-align: center;
        font-color: #333;
        width: 250px;
        height: 800px;
        float: left;
    }
    
    #right {
        background-color: black;
        border: solid 1px;
        font-family: "楷体";
        text-align: center;
        font-color: #333;
        width: 350px;
        height: 450px;
        float: left;
    }
    
    #right1 {
        background-color: black;
        overflow-x: auto;
        overflow-y: auto;
        border: solid 1px;
        font-family: "楷体";
        text-align: center;
        font-color: #333;
        width: 175px;
        height: 450px;
        float: left;
    }
    
    #right2 {
        background-color: black;
        overflow-x: auto;
        overflow-y: auto;
        border: solid 1px;
        font-family: "楷体";
        text-align: center;
        font-color: #333;
        width: 170px;
        height: 450px;
        float: right;
    }
    
    #mid {
        background-color: black;
        border: solid 1px;
        font-family: "楷体";
        text-align: center;
        font-color: #333;
        width: 850px;
        height: 800px;
        float: left;
    }
    
    #line {
        background-color: #5c5c5c;
        border: solid 1px;
        width: 350px;
        height: 350px;
        float: left;
    }
    </style>
    <body onload="onload()">
        <%
            
        %>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="title">
            <h2 style="color: white">全球疫情可视化展示</h2>
        </div>
        <div id="time">
            <h2 id="showtime" style="color: white">time</h2>
        </div>
        <div id="left"></div>
        <div id="mid"></div>
        <div id="right">
            <div id="right1">死亡人数</div>
            <div id="right2">治愈人数</div>
        </div>
        <div id="line">柱状图</div>
        <script type="text/javascript">
            function onload() {
    
                setInterval(
                        "document.getElementById('showtime').innerHTML=new Date().toLocaleString();",
                        1000);
                $.post("Getconfirmed", function(data) {
                    var sum = 0;
                    for (var i = 0; i < data.length; i++)
                        sum += parseInt(data[i].confirmedCount);
                    var htmltext = "<h style='color: white;'>全球确诊人数为:"
                            + "<span style='color: red;font-size:50px'>" + sum
                            + "</span></h>";
                    htmltext += "<table>"
                    for (var i = 0; i < data.length; i++)
                        htmltext += "<tr><td>" + "<span style='color: white;'>"
                                + data[i].provinceName
                                + "</span></td><td><span style='color: red;'>"
                                + data[i].confirmedCount + "</span></td></tr>";
                    htmltext += "</table>";
                    $("#left").html(htmltext);
    
                }, "json");
                $.post("GetDead", function(data) {
                    var sum = 0;
                    for (var i = 0; i < data.length; i++)
                        sum += parseInt(data[i].deadCount);
                    var htmltext = "<h style='color: white;'>全球死亡人数为:"
                            + "<span style='color: red;font-size:50px'>" + sum
                            + "</span></h>";
                    htmltext += "<table>"
                    for (var i = 0; i < data.length; i++)
                        htmltext += "<tr><td>" + "<span style='color: white;'>"
                                + data[i].provinceName
                                + "</span></td><td><span style='color: red;'>"
                                + data[i].deadCount + "</span></td></tr>";
                    htmltext += "</table>";
                    $("#right1").html(htmltext);
    
                }, "json");
                $.post("Getcured", function(data) {
                    var sum = 0;
                    for (var i = 0; i < data.length; i++)
                        sum += parseInt(data[i].curedCount);
                    var htmltext = "<h style='color: white;'>全球治愈人数为:"
                            + "<span style='color: green;font-size:50px'>" + sum
                            + "</span></h>";
                    htmltext += "<table>"
                    for (var i = 0; i < data.length; i++)
                        htmltext += "<tr><td>" + "<span style='color: white;'>"
                                + data[i].provinceName
                                + "</span></td><td><span style='color: green;'>"
                                + data[i].curedCount + "</span></td></tr>";
                    htmltext += "</table>";
                    $("#right2").html(htmltext);
    
                }, "json");
                //处理随日期变化的全球确诊人数图
                var myChart1 = echarts.init(document.getElementById('line'));
                myChart1.setOption({
                    title : {
                        text : '确诊人数变化'
                    },
    
                    tooltip : {},
                    grid : {
                        left : '4%',
                        right : '4%',
                        bottom : '3%',
                        //是否显示刻度标签
                        containLabel : true
                    },
                    legend : {
                        data : [ '确诊数' ]
                    },
                    xAxis : {
                        data : [],
                        axisLabel : {
                            //横坐标全部显示                     
                            interval : 0,
                            //横坐标倾斜45度    
                            rotate : -45,
                        },
                    },
                    yAxis : {},
                    series : [ {
                        name : '确诊数',
                        type : 'line',
                        data : []
                    } ]
                })
                var cname = [];
                var value = [];
                //处理这段时间疫情总数变化趋势
                $.ajax({
                    url : "Dataconfirmed",
                    type : "POST",
                    dataType : "JSON",
                    async : true,
                    success : function(data) {
                        for (var i = 0; i < data.length; i++) {
                            cname[i] = data[i].provinceName;
                            value[i] = parseInt(data[i].confirmedCount);
                        }
                        myChart1.setOption({
                            xAxis : {
                                //放横坐标的数组
                                data : cname,
                            },
                            series : [ {
                                name : '确诊数',
                                //每个横坐标对应的数值
                                data : value
                            } ]
                        });
                    }
                });
    
                //处理世界疫情地图
                $.ajax({
                    url : "Allworld",
                    type : "POST",
                    dataType : "JSON",
                    async : true,
                    success : function(data) {//表示处理成功之后做什么,后面跟一个匿名函数。回调函数,表示处理页面处理完数据以后执行这个函数。data表示处理页面返回的值,用形参接收。
                        var mydata = new Array(0);
    
                        for (var i = 0; i < data.length; i++) {
                            var d = {
    
                            };
                            d["name"] = data[i].provinceName;//.substring(0, 2);
                            d["value"] = data[i].confirmedCount;
                            d["Yisi_num"] = data[i].suspectedCount;
                            d["Cured_num"] = data[i].curedCount;
                            d["Dead_num"] = data[i].deadCount;
                            mydata.push(d);
                        }
                        //初始化echarts实例
                        var myChart = echarts.init(document.getElementById('mid'));
                        // 指定图表的配置项和数据
                        var option = {
                            tooltip : {
                                trigger : 'item',
                                formatter : function(params) {
                                    return params.name + '<br/>' + '确诊人数 : '
                                            + params.value + '<br/>' + '死亡人数 : '
                                            + params['data'].Dead_num + '<br/>'
                                            + '治愈人数 : ' + params['data'].Cured_num
                                            + '<br/>' + '疑似患者人数 : '
                                            + params['data'].Yisi_num;
                                }//数据格式化
                            },
                            title : {
                                text : '世界疫情图',
                                left : 'center'
                            },
    
                            legend : {
                                orient : 'vertical',
                                left : 'left',
                                data : [ '世界疫情图' ]
                            },
                            visualMap : {
                                type : 'piecewise',
                                pieces : [ {
                                    min : 70000,
                                    max : 50000000,
                                    label : '确诊70000人以上',
                                    color : 'red'
                                }, {
                                    min : 10000,
                                    max : 69999,
                                    label : '确诊10000-69999人',
                                    color : 'blue'
                                }, {
                                    min : 5000,
                                    max : 9999,
                                    label : '确诊5000-9999人',
                                    color : 'purple'
                                }, {
                                    min : 1500,
                                    max : 4999,
                                    label : '确诊1500-4999人',
                                    color : 'yellow'
                                }, {
                                    min : 500,
                                    max : 1499,
                                    label : '确诊500-1499人',
                                    color : 'gold'
                                }, {
                                    min : 0,
                                    max : 499,
                                    label : '确诊1-499人',
                                    color : 'green'
                                }, ],
                                color : [ '#E0022B', '#E09107', '#A3E00B' ]
                            },
                            toolbox : {
                                show : true,
                                orient : 'vertical',
                                left : 'right',
                                top : 'center',
                                feature : {
                                    mark : {
                                        show : true
                                    },
                                    dataView : {
                                        show : true,
                                        readOnly : false
                                    },
                                    restore : {
                                        show : true
                                    },
                                    saveAsImage : {
                                        show : true
                                    }
                                }
                            },
                            roamController : {
                                show : true,
                                left : 'right',
                                mapTypeControl : {
                                    'world' : true
                                }
                            },
                            series : [ {
                                name : '确诊数',
                                type : 'map',
                                mapType : 'world',
    
                                nameMap : {
                                    "Canada" : "加拿大",
                                    "Turkmenistan" : "土库曼斯坦",
                                    "Saint Helena" : "圣赫勒拿",
                                    "Lao PDR" : "老挝",
                                    "Lithuania" : "立陶宛",
                                    "Cambodia" : "柬埔寨",
                                    "Ethiopia" : "埃塞俄比亚",
                                    "Faeroe Is." : "法罗群岛",
                                    "Swaziland" : "斯威士兰",
                                    "Palestine" : "巴勒斯坦",
                                    "Belize" : "伯利兹",
                                    "Argentina" : "阿根廷",
                                    "Bolivia" : "玻利维亚",
                                    "Cameroon" : "喀麦隆",
                                    "Burkina Faso" : "布基纳法索",
                                    "Aland" : "奥兰群岛",
                                    "Bahrain" : "巴林",
                                    "Saudi Arabia" : "沙特阿拉伯",
                                    "Fr. Polynesia" : "法属波利尼西亚",
                                    "Cape Verde" : "佛得角",
                                    "W. Sahara" : "西撒哈拉",
                                    "Slovenia" : "斯洛文尼亚",
                                    "Guatemala" : "危地马拉",
                                    "Guinea" : "几内亚",
                                    "Dem. Rep. Congo" : "刚果(金)",
                                    "Germany" : "德国",
                                    "Spain" : "西班牙",
                                    "Liberia" : "利比里亚",
                                    "Netherlands" : "荷兰",
                                    "Jamaica" : "牙买加",
                                    "Solomon Is." : "所罗门群岛",
                                    "Oman" : "阿曼",
                                    "Tanzania" : "坦桑尼亚",
                                    "Costa Rica" : "哥斯达黎加",
                                    "Isle of Man" : "曼岛",
                                    "Gabon" : "加蓬",
                                    "Niue" : "纽埃",
                                    "Bahamas" : "巴哈马",
                                    "New Zealand" : "新西兰",
                                    "Yemen" : "也门",
                                    "Jersey" : "泽西岛",
                                    "Pakistan" : "巴基斯坦",
                                    "Albania" : "阿尔巴尼亚",
                                    "Samoa" : "萨摩亚",
                                    "Czech Rep." : "捷克",
                                    "United Arab Emirates" : "阿拉伯联合酋长国",
                                    "Guam" : "关岛",
                                    "India" : "印度",
                                    "Azerbaijan" : "阿塞拜疆",
                                    "N. Mariana Is." : "北马里亚纳群岛",
                                    "Lesotho" : "莱索托",
                                    "Kenya" : "肯尼亚",
                                    "Belarus" : "白俄罗斯",
                                    "Tajikistan" : "塔吉克斯坦",
                                    "Turkey" : "土耳其",
                                    "Afghanistan" : "阿富汗",
                                    "Bangladesh" : "孟加拉国",
                                    "Mauritania" : "毛里塔尼亚",
                                    "Dem. Rep. Korea" : "朝鲜",
                                    "Saint Lucia" : "圣卢西亚",
                                    "Br. Indian Ocean Ter." : "英属印度洋领地",
                                    "Mongolia" : "蒙古",
                                    "France" : "法国",
                                    "Cura?ao" : "库拉索岛",
                                    "S. Sudan" : "南苏丹",
                                    "Rwanda" : "卢旺达",
                                    "Slovakia" : "斯洛伐克",
                                    "Somalia" : "索马里",
                                    "Peru" : "秘鲁",
                                    "Vanuatu" : "瓦努阿图",
                                    "Norway" : "挪威",
                                    "Malawi" : "马拉维",
                                    "Benin" : "贝宁",
                                    "St. Vin. and Gren." : "圣文森特和格林纳丁斯",
                                    "Korea" : "韩国",
                                    "Singapore" : "新加坡",
                                    "Montenegro" : "黑山共和国",
                                    "Cayman Is." : "开曼群岛",
                                    "Togo" : "多哥",
                                    "China" : "中国",
                                    "Heard I. and McDonald Is." : "赫德岛和麦克唐纳群岛",
                                    "Armenia" : "亚美尼亚",
                                    "Falkland Is." : "马尔维纳斯群岛(福克兰)",
                                    "Ukraine" : "乌克兰",
                                    "Ghana" : "加纳",
                                    "Tonga" : "汤加",
                                    "Finland" : "芬兰",
                                    "Libya" : "利比亚",
                                    "Dominican Rep." : "多米尼加",
                                    "Indonesia" : "印度尼西亚",
                                    "Mauritius" : "毛里求斯",
                                    "Eq. Guinea" : "赤道几内亚",
                                    "Sweden" : "瑞典",
                                    "Vietnam" : "越南",
                                    "Mali" : "马里",
                                    "Russia" : "俄罗斯",
                                    "Bulgaria" : "保加利亚",
                                    "United States" : "美国",
                                    "Romania" : "罗马尼亚",
                                    "Angola" : "安哥拉",
                                    "Chad" : "乍得",
                                    "South Africa" : "南非",
                                    "Fiji" : "斐济",
                                    "Liechtenstein" : "列支敦士登",
                                    "Malaysia" : "马来西亚",
                                    "Austria" : "奥地利",
                                    "Mozambique" : "莫桑比克",
                                    "Uganda" : "乌干达",
                                    "Japan" : "日本",
                                    "Niger" : "尼日尔",
                                    "Brazil" : "巴西",
                                    "Kuwait" : "科威特",
                                    "Panama" : "巴拿马",
                                    "Guyana" : "圭亚那",
                                    "Madagascar" : "马达加斯加",
                                    "Luxembourg" : "卢森堡",
                                    "American Samoa" : "美属萨摩亚",
                                    "Andorra" : "安道尔",
                                    "Ireland" : "爱尔兰",
                                    "Italy" : "意大利",
                                    "Nigeria" : "尼日利亚",
                                    "Turks and Caicos Is." : "特克斯和凯科斯群岛",
                                    "Ecuador" : "厄瓜多尔",
                                    "U.S. Virgin Is." : "美属维尔京群岛",
                                    "Brunei" : "文莱",
                                    "Australia" : "澳大利亚",
                                    "Iran" : "伊朗",
                                    "Algeria" : "阿尔及利亚",
                                    "El Salvador" : "萨尔瓦多",
                                    "C?te d'Ivoire" : "科特迪瓦",
                                    "Chile" : "智利",
                                    "Puerto Rico" : "波多黎各",
                                    "Belgium" : "比利时",
                                    "Thailand" : "泰国",
                                    "Haiti" : "海地",
                                    "Iraq" : "伊拉克",
                                    "S?o Tomé and Principe" : "圣多美和普林西比",
                                    "Sierra Leone" : "塞拉利昂",
                                    "Georgia" : "格鲁吉亚",
                                    "Denmark" : "丹麦",
                                    "Philippines" : "菲律宾",
                                    "S. Geo. and S. Sandw. Is." : "南乔治亚岛和南桑威奇群岛",
                                    "Moldova" : "摩尔多瓦",
                                    "Morocco" : "摩洛哥",
                                    "Namibia" : "纳米比亚",
                                    "Malta" : "马耳他",
                                    "Guinea-Bissau" : "几内亚比绍",
                                    "Kiribati" : "基里巴斯",
                                    "Switzerland" : "瑞士",
                                    "Grenada" : "格林纳达",
                                    "Seychelles" : "塞舌尔",
                                    "Portugal" : "葡萄牙",
                                    "Estonia" : "爱沙尼亚",
                                    "Uruguay" : "乌拉圭",
                                    "Antigua and Barb." : "安提瓜和巴布达",
                                    "Lebanon" : "黎巴嫩",
                                    "Uzbekistan" : "乌兹别克斯坦",
                                    "Tunisia" : "突尼斯",
                                    "Djibouti" : "吉布提",
                                    "Greenland" : "格陵兰",
                                    "Timor-Leste" : "东帝汶",
                                    "Dominica" : "多米尼克",
                                    "Colombia" : "哥伦比亚",
                                    "Burundi" : "布隆迪",
                                    "Bosnia and Herz." : "波斯尼亚和黑塞哥维那",
                                    "Cyprus" : "塞浦路斯",
                                    "Barbados" : "巴巴多斯",
                                    "Qatar" : "卡塔尔",
                                    "Palau" : "帕劳",
                                    "Bhutan" : "不丹",
                                    "Sudan" : "苏丹",
                                    "Nepal" : "尼泊尔",
                                    "Micronesia" : "密克罗尼西亚",
                                    "Bermuda" : "百慕大",
                                    "Suriname" : "苏里南",
                                    "Venezuela" : "委内瑞拉",
                                    "Israel" : "以色列",
                                    "St. Pierre and Miquelon" : "圣皮埃尔和密克隆群岛",
                                    "Central African Rep." : "中非",
                                    "Iceland" : "冰岛",
                                    "Zambia" : "赞比亚",
                                    "Senegal" : "塞内加尔",
                                    "Papua New Guinea" : "巴布亚新几内亚",
                                    "Trinidad and Tobago" : "特立尼达和多巴哥",
                                    "Zimbabwe" : "津巴布韦",
                                    "Jordan" : "约旦",
                                    "Gambia" : "冈比亚",
                                    "Kazakhstan" : "哈萨克斯坦",
                                    "Poland" : "波兰",
                                    "Eritrea" : "厄立特里亚",
                                    "Kyrgyzstan" : "吉尔吉斯斯坦",
                                    "Montserrat" : "蒙特塞拉特",
                                    "New Caledonia" : "新喀里多尼亚",
                                    "Macedonia" : "马其顿",
                                    "Paraguay" : "巴拉圭",
                                    "Latvia" : "拉脱维亚",
                                    "Hungary" : "匈牙利",
                                    "Syria" : "叙利亚",
                                    "Honduras" : "洪都拉斯",
                                    "Myanmar" : "缅甸",
                                    "Mexico" : "墨西哥",
                                    "Egypt" : "埃及",
                                    "Nicaragua" : "尼加拉瓜",
                                    "Cuba" : "古巴",
                                    "Serbia" : "塞尔维亚",
                                    "Comoros" : "科摩罗",
                                    "United Kingdom" : "英国",
                                    "Fr. S. Antarctic Lands" : "南极洲",
                                    "Congo" : "刚果(布)",
                                    "Greece" : "希腊",
                                    "Sri Lanka" : "斯里兰卡",
                                    "Croatia" : "克罗地亚",
                                    "Botswana" : "博茨瓦纳",
                                    "Siachen Glacier" : "锡亚琴冰川地区"
                                },
                                roam : false,
                                label : {
                                    show : false,
                                    color : 'blue'
                                },
                                data : mydata
                            } ]
                        };
    
                        //使用指定的配置项和数据显示图表
                        myChart.setOption(option);
    
                    },
                    error : function() {//处理页面出错以后执行的函数。
    
                    }
                });
            }
        </script>
    </body>
    </html>
    world.jsp

  • 相关阅读:
    报错:/usr/lib/gcc/x86_64-linux-gnu/5/include/avx512vlintrin.h(11269): error: argument of type "void *" is incompatible with parameter of type "long long *"
    docker跨平台
    [转载]启发式算法 (Heuristic Algorithms)
    linux软链接的创建、修改和删除
    使用docker部署tomcat|tomcat基础使用第二篇
    Tomat服务器学习
    使用秘钥登录AWS
    Maven基础
    [转载]什么是消融实验
    [转载]基于机器学习的专业级摄影照片处理器
  • 原文地址:https://www.cnblogs.com/MoooJL/p/12638946.html
Copyright © 2020-2023  润新知