zoukankan      html  css  js  c++  java
  • 全球疫情发布图

    一、要求:

      我们有的是热情、激情、无限的动力,清明三天放假休息,为了纪念牺牲的烈士,我们集体决定仿照约翰·霍普金斯大学制作全球疫情发布图(WEB版),可以实时访问。行动起来吧。随时抽查,今天工作八小时。

     二、我的全球疫情发布图:

    预览网址:http://192.168.1.17:8080/YQ/data?method=total    (效果不太好,可以试着缩放一下浏览器。嘻嘻!)

     三、设计思路:

    1、准备数据:使用python从网页上爬取数据,并存入mysql数据库。

    1)全球数据爬取:

    import requests
    import json
    from pymysql import *
    import requests
    from retrying import retry
    headers = {"User-Agent": "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Mobile Safari/537.36"
                ,"Referer": "https://wp.m.163.com/163/page/news/virus_report/index.html?_nw_=1&_anw_=1"}
    
    
    def _parse_url(url):
        response = requests.get(url,headers=headers,timeout=3) #3秒之后返回
        return response.content.decode()
    
    
    def parse_url(url):
        try:
            html_str = _parse_url(url)
        except:
            html_str = None
        return html_str
    
    
    class yiqing:
        f = 0
    
        url="https://c.m.163.com/ug/api/wuhan/app/data/list-total?t=316765429316"
    
        def getContent_list(self,html_str):
            dict_data = json.loads(html_str)
        
            content_list = dict_data["data"]
            
            return content_list
    
        
        def saveContent_list(self,i):
            temp = 0;
            temp += 1;
            # 打开数据库连接(ip/数据库用户名/登录密码/数据库名)
            con = connect("localhost", "root", "root", "text")
            # 使用 cursor() 方法创建一个游标对象 cursor
            cursors = con.cursor()
            # 使用 execute()  方法执行 SQL 查询 返回的是你影响的行数
            if self.f ==0 :
                cursors.execute("delete from provinces")
                self.f = self.f+1
            row = cursors.execute("insert into provinces values(%s,%s,%s,%s,%s,%s,%s,%s)",
                                  (temp,i.get('name'),i.get('total').get('confirm'),
                                   i.get('total').get('suspect'),i.get('total').get('heal'),
                                   i.get('total').get('dead'),i.get('total').get('severe'),
                                   i.get('lastUpdateTime')))
            
            con.commit()#提交事务
            con.close()# 关闭数据库连接
    
            
        def run(self): #实现主要逻辑
            #请求数据
            html_str = parse_url(self.url)
            #获取数据
            content_list = self.getContent_list(html_str)
            values = content_list["areaTree"]
            for i in values:
                self.saveContent_list(i)
    
    if __name__ == '__main__':
        yq = yiqing()
        yq.run()
        print('爬取,存储成功!!')
    View Code

    2)历史数据爬取:

    import requests
    import json
    from pymysql import *
    import requests
    from retrying import retry
    headers = {"User-Agent": "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Mobile Safari/537.36"
                ,"Referer": "https://wp.m.163.com/163/page/news/virus_report/index.html?_nw_=1&_anw_=1"}
    
    
    def _parse_url(url):
        response = requests.get(url,headers=headers,timeout=3) #3秒之后返回
        return response.content.decode()
    
    
    def parse_url(url):
        try:
            html_str = _parse_url(url)
        except:
            html_str = None
        return html_str
    
    
    class yiqing:
        f = 0
    
        url="https://c.m.163.com/ug/api/wuhan/app/data/list-total?t=316765429316"
    
        def getContent_list(self,html_str):
            dict_data = json.loads(html_str)
           
            content_list = dict_data["data"]
            
            return content_list
    
        
        def saveContent_list(self,i):
            # 打开数据库连接(ip/数据库用户名/登录密码/数据库名)
            con = connect("localhost", "root", "root", "text")
            # 使用 cursor() 方法创建一个游标对象 cursor
            cursors = con.cursor()
            # 使用 execute()  方法执行 SQL 查询 返回的是你影响的行数
            
            row = cursors.execute("insert into world_(name,confirm,suspect,heal,dead,severe,lastUpdateTime) values(%s,%s,%s,%s,%s,%s,%s)",
                                  ('中国',i.get('total').get('confirm'),
                                   i.get('total').get('suspect'),i.get('total').get('heal'),
                                   i.get('total').get('dead'),i.get('total').get('severe'),
                                   i.get('date')))
            
            con.commit()#提交事务
            con.close()# 关闭数据库连接
    
            
        def run(self): #实现主要逻辑
            #请求数据
            html_str = parse_url(self.url)
            #获取数据
            content_list = self.getContent_list(html_str)
            values = content_list["chinaDayList"]
            for i in values:
                self.saveContent_list(i)
    
    if __name__ == '__main__':
        yq = yiqing()
        yq.run()
        print('爬取,存储成功!!')
    View Code

    2、先完成三个数据列表:分别降序展示全世界各国的的确诊人数、死亡人数和治愈人数(在数据库层面按照不同字段降序排列)。

    3、之后是右下方的历史数据,使用echart的折线图展示(暂时直爬取到中国的历史数据!!嘻嘻。)

    4、最后在echart的基础上使用world.js画世界地图。

    1)dao层:

    /**
         * @param province
         * @return
         * @throws SQLException 
         */
        public List<Province> getWorldData_() throws SQLException {
            QueryRunner qr = new QueryRunner(DBUtils.getDataSource());
            String sql = "select * from provinces  order by confirm desc";
            List<Province> query = qr.query(sql, new BeanListHandler<Province>(Province.class));
            return query;
        }
        
        /**
         * @param province
         * @return
         * @throws SQLException 
         */
        public List<Province> getWorldData_1() throws SQLException {
            QueryRunner qr = new QueryRunner(DBUtils.getDataSource());
            String sql = "select * from provinces  order by heal desc";
            List<Province> query = qr.query(sql, new BeanListHandler<Province>(Province.class));
            return query;
        }
        
        /**
         * @param province
         * @return
         * @throws SQLException 
         */
        public List<Province> getWorldData_2() throws SQLException {
            QueryRunner qr = new QueryRunner(DBUtils.getDataSource());
            String sql = "select * from provinces  order by dead desc";
            List<Province> query = qr.query(sql, new BeanListHandler<Province>(Province.class));
            return query;
        }
    
        /**
         * @return
         * @throws SQLException 
         */
        public List<Total> getWorldinfo() throws SQLException {
            QueryRunner qr = new QueryRunner(DBUtils.getDataSource());
            String sql = "select * from provinces  order by confirm desc";
            List<Total> query = qr.query(sql, new BeanListHandler<Total>(Total.class));
            return query;
        }
    
        /**
         * @return
         * @throws SQLException 
         */
        public List<Province> getWorldData_H() throws SQLException {
            QueryRunner qr = new QueryRunner(DBUtils.getDataSource());
            String sql = "select * from world_ ";
            List<Province> query = qr.query(sql, new BeanListHandler<Province>(Province.class));
            return query;
        }
    View Code

    2)servlet层:

    /**
         * @param request
         * @param response
         */
        private void world_dt(HttpServletRequest request, HttpServletResponse response)throws SQLException, ServletException, IOException {
            List<Province> list = dao.getWorldData_();
            Gson gson = new Gson();
            String json = gson.toJson(list);
            response.getWriter().write(json);
        }
    
        /**
         * @param request
         * @param response
         */
        private void history(HttpServletRequest request, HttpServletResponse response) throws SQLException, ServletException, IOException {
            List<Province> list = dao.getWorldData_H();
            Gson gson = new Gson();
            String json = gson.toJson(list);
            response.getWriter().write(json);
        }
    
        /**
         * @param request
         * @param response
         */
        private void total(HttpServletRequest request, HttpServletResponse response)throws SQLException, ServletException, IOException {
            List<Province> list = dao.getWorldData_();
            List<Province> list_1 = dao.getWorldData_1();
            List<Province> list_2 = dao.getWorldData_2();
            int allTotal = 0;
            int allDead = 0;
            int allHeal = 0;
            for (Province total : list) {
                allTotal += Integer.parseInt(total.getConfirm());
                allDead += Integer.parseInt(total.getDead());
                allHeal += Integer.parseInt(total.getHeal());
            }
            request.setAttribute("list", list);
            request.setAttribute("list_1", list_1);
            request.setAttribute("list_2", list_2);
            request.setAttribute("allTotal", allTotal);
            request.setAttribute("allDead", allDead);
            request.setAttribute("allHeal", allHeal);
            request.getRequestDispatcher("worldyq.jsp").forward(request, response);
        }
    View Code

    3)视图层:

    <%@ 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">
    <title>世界疫情</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/echarts.js"></script>
    <style type="text/css">
    body
    { 
        background:#000000
    }
    div
    {
        float: left;
    }
    
    #left
    {
         300px;
        height: 700px;
    }
    </style>
    </head>
    <body background="#000">
        <div id="left">
        <div style="background-color: #4B4B4B; 300px;height: 130px;margin-top: 10px;margin-left: 10px;">
            <h1 style="color: red;" align="center">
            <font size="5" color="#ffffff">总确诊人数:</font>
            ${allTotal}
            </h1>
        </div>
        <div style="margin-top: 10px;margin-left: 10px;background-color: #4B4B4B;BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; 
                SCROLLBAR-SHADOW-COLOR: #3d5054; SCROLLBAR-3DLIGHT-COLOR: #3d5054; SCROLLBAR-ARROW-COLOR: #ffd6da;SCROLLBAR-DARKSHADOW-COLOR: #85989c;
                SCROLLBAR-FACE-COLOR: #889b9f;  SCROLLBAR-HIGHLIGHT-COLOR: #c3d6da;
                OVERFLOW: auto;
                WIDTH: 300px;  HEIGHT: 580px" align=center;">
            <table class="table">
                    <c:forEach items="${list}" var="item">
                        <tr>
                            <td>
                                <h3 style="color: red;">
                                    ${item.confirm }
                                    <font size="5" color="#ffffff">${item.name }</font>
                                </h3>
                            </td>
                        </tr>
                    </c:forEach>
            </table>
        </div>
        <div style="background-color: #4B4B4B; 300px;height: 150px;margin-top: 10px;margin-left: 10px;">
            <h1 style="color: red;" align="center">
            <font size="5" color="#ffffff">更新时间:</font><br>
            ${list[0].lastUpdateTime}
            </h1>
        </div>
        
        </div>
        <div style=" 1000px;height: 800px;background-color: #4B4B4B;margin-top: 10px;margin-left: 20px;" >
            <div id="main" style=" 1000px;height:800px;border:1px solid #ccc"></div> 
        </div>
        <div style=" 550px; height: 900px;margin-top: 10px;margin-left: 10px;">
            <div style=" 49%; height: 600px;background-color: #4B4B4B;background-color: #4B4B4B;BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; 
                SCROLLBAR-SHADOW-COLOR: #3d5054; SCROLLBAR-3DLIGHT-COLOR: #3d5054; SCROLLBAR-ARROW-COLOR: #ffd6da;SCROLLBAR-DARKSHADOW-COLOR: #85989c;
                SCROLLBAR-FACE-COLOR: #889b9f;  SCROLLBAR-HIGHLIGHT-COLOR: #c3d6da;
                OVERFLOW: auto;">
                <h1 style="color: #ffffff" align="center">
                <font size="4" color="#ffffff">总死亡人数:<br></font>
                ${allDead}
                </h1>
                <table class="table" style="overflow-y:scroll;">
                    <c:forEach items="${list_2}" var="item">
                        <tr>
                            <td>
                                <h2 style="color: red;">
                                    ${item.dead }死亡<br/>
                                    <font size="3" color="#ffffff">${item.name }</font>
                                </h2>
                            </td>
                        </tr>
                    </c:forEach>
            </table>
            </div>
            <div style=" 49%; height: 600px;background-color: #4B4B4B;margin-left: 10px;background-color: #4B4B4B;BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; 
                SCROLLBAR-SHADOW-COLOR: #3d5054; SCROLLBAR-3DLIGHT-COLOR: #3d5054; SCROLLBAR-ARROW-COLOR: #ffd6da;SCROLLBAR-DARKSHADOW-COLOR: #85989c;
                SCROLLBAR-FACE-COLOR: #889b9f;  SCROLLBAR-HIGHLIGHT-COLOR: #c3d6da;
                OVERFLOW: auto;">
                <h1  align="center">
                <font size="4" color="#ffffff">总治愈人数:<br></font>
                <font color="#33CC00">${allHeal}</font>
                </h1>
            <table class="table" style="overflow-y:scroll;">
                    <c:forEach items="${list_1}" var="item">
                        <tr>
                            <td>
                                <h2 style="color:#33CC00">
                                    ${item.heal }治愈<br/>
                                    <font size="3" color="#ffffff">${item.name }</font>
                                </h2>
                            </td>
                        </tr>
                    </c:forEach>
            </table>
            </div>
            <!-- 为 ECharts 准备一个具备大小(宽高)的Dom -->
            <div id="main_1" style=" 100%; height: 250px;background-color: #4B4B4B;margin-top: 10px;"></div>
        </div>
    </body>
    <script type="text/javascript">
        var dt;
        $(function(){
            $.ajax({
                url : "data?method=history",
                async : false,
                type : "POST",
                success : function(data) {
                    dt = data;
                    //alert(dt[0].name);
                },
                error : function() {
                    alert("请求失败");
                },
                dataType : "json"
            });
        
            var myChart = echarts.init(document.getElementById('main_1'));
            //alert(dt);
            var xd = new Array(0)//长度为33
            var yd = new Array(0)//长度为33
            for (var i = 0; i < dt.length; i+=5) {
                xd.push(dt[i].lastUpdateTime);
                yd.push(dt[i].confirm);
            }
            //alert(xd);
            //alert(yd);
            // 指定图表的配置项和数据
            var option_1 = {
                title : {
                    text : '确诊人数'
                },
                tooltip : {
                    trigger : 'axis'
                },
                legend : {
                    data : [ '确诊人数' ]
                },
                grid : {
                    left : '3%',
                    right : '4%',
                    bottom : '3%',
                    containLabel : true
                },
                toolbox : {
                    feature : {
                        saveAsImage : {}
                    }
                },
                xAxis : {
                    type : 'category',
                    boundaryGap : false,
                    axisLabel : {
                        //横坐标上的文字斜着显示 文字颜色 begin 
                        interval : 0,
                        rotate : 45,
                        margin : 10,
                        textStyle : {
                            color : "#ec6869"
                        }
                    //横坐标上的文字换行显示 文字颜色end
                    },
                    data : xd
                },
                yAxis : {
                    type : 'value',
                    
                },
                series : [ {
                    name : '确诊人数',
                    type : 'line',
                    stack : '总量',
                    data : yd
                } ]
            };
    
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option_1);
        });
    </script>
    <script src="js/echarts.min.js"></script>  
    <script src="js/world.js"></script> 
    <script type="text/javascript">
    var wdt;
    $(function(){
        $.ajax({
            url : "data?method=world_dt",
            async : false,
            type : "POST",
            success : function(data) {
                wdt = data;
                //alert("1");
                //alert(dt[0].name);
            },
            error : function() {
                alert("请求失败");
            },
            dataType : "json"
        });
    
    var myChart = echarts.init(document.getElementById('main'));  
    
    var wxd = new Array(0)
    var wyd = new Array(0)
    var mydata = new Array(0);
    for (var i = 0; i < wdt.length; i++) {
        var d = {};
        
        d["name"] = wdt[i].name;
        d["value"] = wdt[i].confirm;
        d["suspect"] = wdt[i].suspect;
        d["heal"] = wdt[i].heal;
        d["dead"] = wdt[i].dead;
        d["servere"] = wdt[i].servere;
        
        mydata.push(d);
    }
    
    option = {  
        title: {  
            sublink: 'http://esa.un.org/wpp/Excel-Data/population.htm',  
            left: 'center',  
            top: 'top'  
        },  
        tooltip: {  
            formatter : function(params) {
                return params.name + '<br/>' + '确诊人数 : '
                        + params.value + '<br/>' + '死亡人数 : '
                        + params['data'].dead + '<br/>' + '治愈人数 : '
                        + params['data'].heal + '<br/>'+ '疑似患者人数 : '
                        + params['data'].suspect;
            }//数据格式化
        },      
      //左侧小导航
        visualMap : {
            min : 0,
            max : 500,
            inRange : {
                color : ['#CC6633', '#ffaa85', '#bc1a19','#990000' ]
            //取值范围的颜色
            },
            pieces:[
                {gt:5000},
                {gt:1000,lte:4999},
                {gte:500,lte:999},
                {gte:1,lte:499},
                {value:0,label:'0',color:'#ffffff'},
            ],
            show : true
        //图注
        },
        series: [  
            {  
                name: '世界疫情',  
                type: 'map',  
                mapType: 'world',  
                roam: true,  
                itemStyle:{  
                    emphasis:{label:{show:true}}  
                },  
                data: mydata,
                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": "锡亚琴冰川地区"
                  }
            }  
        ]  
    };  
    myChart.setOption(option); 
    });
    </script>
    </html>
    View Code

    四、遇到的问题:

    1、使用world.js对于的世界各国的名称是英文,而我的数据库中的国名是中文名。

    解决方法:在echart ->option ->series 中加入国名的从英文到中文的映射。

    国名映射:

    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" : "锡亚琴冰川地区"
                    }
    View Code

     2、world.js废了好大劲才找到的。

    world.js :https://pan.baidu.com/s/1XbtgJxLjk0oiXAYCdLJY4A 

    3、开始不会在echart用使用world.js(不会画世界地图)

    参考:https://blog.csdn.net/mm_hello11/article/details/82989883

  • 相关阅读:
    iOS应用崩溃日志分析
    iOS应用崩溃日志分析
    iOS 获取一个类的所有方法
    iOS 获取一个类的所有方法
    UVa 818Cutting Chains (暴力dfs+位运算+二进制法)
    UVa 1374 Power Calculus (IDA*或都打表)
    UVa 10603 Fill (暴力BFS+优先队列)
    HDU 1272 小希的迷宫 (并查集)
    HDU 1060 Leftmost Digit (数学log)
    UVa 1599 Ideal Path (两次BFS)
  • 原文地址:https://www.cnblogs.com/20183544-wangzhengshuai/p/12632435.html
Copyright © 2011-2022 走看看