前言

在学了Echarts之后，也在看到官网上有很多包括地图的实例，于是想着如何创建一个能够动态更新的疫情地图，鉴于国内疫情情势总体向好，而全球的疫情并不乐观的情况下，便制作了全球的疫情地图，这篇博客的教程也是基于上一篇的Echarts学习。

所需基础知识

  1. html、css、js
  2. ajax
  3. JQuery
  4. Echarts

总体界面设计

首先便是将页面搭建起来啦，这里我选择展示的数据分别是疫情地图（中心位置），各国确诊人数饼状图（仿人民日报类型，右边位置），全球疫情趋势（左下角）以及各大洲疫情状况（左上角），这里页面设计是基于b站Echarts学习的页面设计改动的，剔除了两三个图表

  1. 创建对应文件夹，用来存放静态资源
  2. 设计地图界面，这里采用3 6 3的flex布局
  3. 页面代码书写
  4. css样式书写
  5. 右上角实时时间代码书写

html页面的代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>全球疫情地图</title>
    <!--     <link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css"> -->
    <!--     <script src="Bootstrap/js/bootstrap.min.js"></script> -->
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <header>
        <h1> 全球疫情地图 </h1>
        <div class="showTime"></div>
        <div class="index"><a href="https://pigs_on_the_horizon.gitee.io/">首页</a></div>
    </header>
    <section class="mainbox">
        <!-- 左 -->
        <div class="column">
            <div class="panel bl bar">
                <h2>各洲累计确诊分布（海外）</h2>
                <div class="chart"></div>
                <div class="panelFooter"></div>
            </div>
            <div class="panel bl line">
                <h2>全球疫情趋势（海外）</h2>
                <div class="chart"></div>
                <div class="panelFooter"></div>
            </div>
        </div>
        <!-- 中 -->
        <div class="column">
            <!-- 上模块 -->
            <div class="no">
                <div class="no-hd">
                    <ul>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <div class="no-bd">
                    <ul>
                        <li>累计确诊人数</li>
                        <li>累计治愈人数</li>
                    </ul>
                </div>
            </div>
            <!-- 地图模块 -->
            <div class="map">
                <div class="map1"></div>
                <div class="map2"></div>
                <div class="map3"></div>
                <div class="chart" id="viewDiv"></div>
                <div class="panelFooter"></div>
            </div>
        </div>
        <!-- 右 -->
        <div class="column">
            <div class="panel bl bar1">
                <h2>世界疫情确诊情况前十五</h2>
                <div class="chart"></div>
                <div class="panelFooter"></div>
            </div>
        </div>
        <div class="data">数据来源于腾讯，每小时更新一次</div>
    </section>
</body>

</html>

css样式代码如下（详细的样式代码说明可以参照另外一篇博客Echarts）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

/* 声明字体*/
@font-face {
    font-family: electronicFont;
    src: url(../font/DS-DIGIT.TTF);
}

body {
    /* 覆盖整个页面 */
    background-size: cover;
    margin: 0;
    padding: 0;
    background-color: rgba(21, 25, 101);
}

header {
    position: relative;
    background: url('../images/head_bg.png') no-repeat top center;
    height: 1.25rem;
    /* 🔺缩放比例 100% */
    background-size: 100% 100%;
}

header h1 {
    color: white;
    font-size: 0.475rem;
    /* 文字居中 */
    text-align: center;
    line-height: 1.0rem;
}

.showTime {
    position: absolute;
    top: 0;
    right: 0.375rem;
    text-align: center;
    line-height: 0.9375rem;
    color: rgba(255, 255, 255);
    font-size: 0.25rem;
}

.index a {
    position: absolute;
    top: 0;
    left: 0.375rem;
    text-align: center;
    line-height: 0.9375rem;
    color: rgba(255, 255, 255);
    font-size: 0.25rem;
    text-decoration: none;
}
.data {
    position: absolute;
    color: rgba(255, 255, 255);
    font-size: 0.2rem;
    bottom: 0;
    right: 0.1rem;
    padding-top: 0.5rem;
}

.mainbox {
    min-width: 1024px;
    max-width: 1920px;
    padding: 0.125rem 0.125rem 0;
    display: flex;
    position: relative;
    /* background-color: lightpink; */
}

.mainbox .column {
    flex: 3;
}
.column:nth-child(2) {
    flex: 6;
    margin: 0 0.125rem 0.1875rem;
    overflow: hidden;
    /* position: relative; */
}

.panel {
    position: relative;
    height: 5rem;
    /* width: 100%; */
    border: 1px solid rgba(25, 186, 139, 0.17);
    background: rgba(21, 25, 101, 0.5) url('../images/line(1).png');
    padding: 0 0.1875rem 0.5rem;
    margin-bottom: 0.3rem;
}

/* 蓝色小框 */
.bl::before {
    position: absolute;
    top: 0;
    /* 要给内容 */
    content: "";
    left: 0;
    height: 10px;
    width: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
}

.bl::after {
    position: absolute;
    top: 0;
    /* 要给内容 */
    content: "";
    right: 0;
    height: 10px;
    width: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
}

.panelFooter {
    position: absolute;
    bottom: 0;
    left: 0;
    /* background-color: pink; */
    height: 10px;
    width: 100%;
}

.panelFooter::before {
    position: absolute;
    top: 0;
    /* 要给内容 */
    content: "";
    left: 0;
    height: 10px;
    width: 10px;
    border-bottom: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
}

.panelFooter::after {
    position: absolute;
    top: 0;
    /* 要给内容 */
    content: "";
    right: 0;
    height: 10px;
    width: 10px;
    border-bottom: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
}

.panel h2 {
    height: 0.6rem;
    line-height: 0.6rem;
    margin: 0;
    color: white;
    font-size: 0.25rem;
    text-align: center;
    font-weight: 400;
}

.panel .chart {
    height: 4.5rem;
    /* margin: 0 0.1875rem; */
    /* background-color: pink; */
}

.bar1 {
    height: 10.3rem;
}

.bar1 .chart {
    height: 10.3rem;
}

.no {
    background-color: rgba(101, 132, 226, 0.1);
    padding: 0.15rem;
}

.no-hd {
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17);
}

.no-hd::before {
    position: absolute;
    top: 0;
    left: 0;
    content: " ";
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
    width: 0.375rem;
    height: 0.125rem;
}

.no-hd::after {
    position: absolute;
    bottom: 0;
    right: 0;
    content: " ";
    border-bottom: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
    width: 0.375rem;
    height: 0.125rem;
}

.no-hd ul {
    display: flex;
}

.no-hd ul li {
    position: relative;
    flex: 1;
    font-size: 0.6rem;
    height: 0.5rem;
    text-align: center;
    color: #ffeb7b;
    font-family: electronicFont;
}

.no-hd ul li:nth-child(1)::after {
    content: "";
    position: absolute;
    top: 25%;
    right: 0;
    background-color: rgba(255, 255, 255, 0.2);
    width: 1px;
    height: 50%;
}

.no-bd ul {
    display: flex;
}

.no-bd ul li {
    flex: 1;
    height: 0.5rem;
    color: rgba(255, 255, 255);
    font-size: 0.225rem;
    padding-top: 0.125rem;
    text-align: center;
}

.map {
    height: 8.95rem;
    position: relative;
    /* border: 2px solid #02a6b5; */
}

.map .chart {
    /* background-color: #151965; */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8.95rem;
    border: 1px solid rgba(25, 186, 139, 0.17);
}

@keyframes rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes rotate1 {
    from {
        transform: translate(-50%, -50%) rotate(0deg)
    }

    to {
        transform: translate(-50%, -50%) rotate(-360deg)
    }
}

@media screen and (max-width: 1024px) {
    html {
        font-size: 42px !important;
    }
}

@media screen and (min-width: 1920) {
    html {
        font-size: 80px !important;
    }
}

实时时间模块代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var formaDate = function() {
    var d = new Date()
    var year = d.getFullYear(), //多变量赋值
        month = d.getMonth() + 1, //month：从0开始
        date = d.getDate(),
        hour = d.getHours(),
        minute = d.getMinutes(),
        second = d.getSeconds();

    year = year < 10 ? '0' + year : year; //三元操作符
    month = month < 10 ? '0' + month : month;
    date = date < 10 ? '0' + date : date;
    hour = hour < 10 ? '0' + hour : hour;
    minute = minute < 10 ? '0' + minute : minute;
    second = second < 10 ? '0' + second : second;
    var a = year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
    $('.showTime').html(a); //显示时间
}
setInterval(formaDate, 1000) //设定定时器，循环运行;

成果：

image-20200720151351065

数据获取（重点）

前面的页面搭建到此就结束了，如果你想搭建自己的页面，当然可以不用去看上面那个，自己搭一个属于自己的疫情界面，我主要是因为懒且合理的疫情地图布局大多如此，所以我直接引用之前学习的地图并相应修改了下，如果想了解上面地图的详细做法，可以去看我的Echarts那篇博客，或者直接去这里学习。

在这里，数据获取，我百度了很多，其中有一个是自己搭建实时接口然后去调用其数据，教程链接新冠肺炎实时接口。这里需要有一定的爬虫基础以及其它知识，然后就可以设计出一个自己的本地疫情接口，数据来源是丁香园。本地本地，就意味着你要将这个服务的端口号映射到外网才能给其他互联网小伙伴访问（或者其他方式），所以暂时被我（还是懒）pass掉了，但是它是值得一学的

然后我就发现了一个，它里面有一些示例链接，点进去居然可以访问数据，然后我就想到，是否可以直接在前端使用ajax去调用这些数据并将其渲染到页面上。说完我便开始动手了，敲代码，分析数据格式，获取数据，飞快的敲打着键盘，并且成功了，是的，在本地是成功了，然后发布到自己的博客上发现，访问不了，what？？？，我打开了控制台，看到了红色警示语—阻止载入混合内容，好吧，这是啥我也不懂，就去百度了，发现这个关系到数据加密的问题，可以参考这篇博客，反正就是我在http后面加一个s也还是不行，然后我放弃了

我想到了这是用丁香园的数据，然后便去看了丁香园的实时疫情，但是当我打开f12时发现，丁香是直接一股脑在服务器处理好了，好滴吧，打扰了，腾讯呢，我打起了腾讯的主意，打开f12，f5以下，哇~，这也太棒了吧，腾讯把它的数据拿到前端来处理了，yes，好滴，然后这里就讲一下怎么得到腾讯的疫情数据接口

  1. 第一步，打开腾讯实时疫情网址（这不废话吗）

  2. f12一下，点击网络（network），然后再刷新一下，把你在网站上看到的某个疫情数据，确诊数，死亡数，啥的都可以通过ctri + f查找一下

    image-20200720101241595

  3. 然后，你就可以得到它数据的url啦，也记住一下它的请求方式，然后复制一下这个网址，到新标签页访问一下，粗略阅览一下是否有符合自己需求的数据，有的话就可以接下一步了

  4. 我这里一共调用了腾讯3个接口（hiahiahia~）

数据处理

到这里，疫情数据就已经获取到了，接下来就是怎么处理这些数据了，首先，我上了Echarts官网找了符合自己想要的图表，然后分别将这些图表实例引入自己的index.js文件里，然后你就要逐个分析，看每个图表所需要的数据类型分别是怎样的

南丁格尔玫瑰图、仿人民日报玫瑰图

南丁格尔玫瑰图所需要的数据格式是数组中加对象，大致如下，仿人民日报玫瑰图的格式也类似

1
2
3
4
5
6
7
8
9
10
data: [
    {value: 10, name: 'rose1'},
    {value: 5, name: 'rose2'},
    {value: 15, name: 'rose3'},
    {value: 25, name: 'rose4'},
    {value: 20, name: 'rose5'},
    {value: 35, name: 'rose6'},
    {value: 30, name: 'rose7'},
    {value: 40, name: 'rose8'}
]

这里是要制作各洲疫情状况，所以console了返回的json数据后分析了一下，所需要的各洲最新疫情确诊在data.data.FAutoContinentStatis[a]中的最后一个数组里（a为最后一个），然后就用接下来的代码去获取自己所需要的数据并push到显示在页面的数组里（请忽略定时器）

1
2
3
4
5
6
7
var a = data.data.FAutoContinentStatis.length - 1
var contines = data.data.FAutoContinentStatis[a].statis
var con = Object.keys(contines)
var sum = Object.values(contines)
for (var i = 0; i < con.length; i++) {
    count.push({ value: sum[i], name: con[i] })
}

南丁格尔玫瑰图完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var count = [];
var ajax = function() {
    $.ajax({
        // url: 'https://111.231.75.86:8000/api/countries/', //联网失败
        url: 'https://api.inews.qq.com/newsqa/v1/automation/modules/list?modules=FAutoGlobalStatis,FAutoContinentStatis,FAutoGlobalDailyList,FAutoCountryConfirmAdd',
        type: 'get',
        // data: {},
        dataType: 'json',
        success: function(data) {
            var a = data.data.FAutoContinentStatis.length - 1
            var contines = data.data.FAutoContinentStatis[a].statis
            var con = Object.keys(contines)
            var sum = Object.values(contines)
            for (var i = 0; i < con.length; i++) {
                count.push({ value: sum[i], name: con[i] })
            }
            //必须在这里在设置一遍，这里涉及到的问题不太懂，只知道如不再设置，而在ajax外赋值是没有作用的
            myChart.setOption({ //加载数据图表
                series: [{
                    data: count
                }]
            })
        }
    })
    setInterval(ajax, 3600000) //设定定时器，循环运行;
}
ajax()

仿人民日报玫瑰图完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var virus = [
    ['Country', 'Confirmed']
]
var ajax = function() {
    $.ajax({
        url: 'https://api.inews.qq.com/newsqa/v1/automation/foreign/country/ranklist',
        type: 'get',
        dataType: 'json',
        success: function(data) {
            var num = data.data
            for (var i = 0; i < 15; i++) {
                virus.push([num[i].name, num[i].confirm])
            }
            myChart.setOption({ //加载数据图表
                dataset: {
                    source: virus
                }
            })
        }
    })
    setInterval(ajax, 3600000) //设定定时器，循环运行;
}
ajax()

折线图

折线图所需要的数据格式为数组，x轴一组，y轴两组，大致如下，x轴与y轴数据必须一一对应

1
2
3
4
5
6
7
8
series: [{
    data: []
}, {
    data: []
}],
xAxis: [{
    data: []
}]

这里需要用到全球每日的疫情数据用来显示其趋势，数据处理思路同上面的南丁格尔玫瑰图，只是需要定义三个数组用来接收数据，ajax’完整代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var count = []
var count1 = []
var date = []
var ajax = function() {
    $.ajax({
        url: 'https://api.inews.qq.com/newsqa/v1/automation/modules/list?modules=FAutoGlobalStatis,FAutoContinentStatis,FAutoGlobalDailyList,FAutoCountryConfirmAdd',
        type: 'get',
        // data: {},
        dataType: 'json',
        success: function(data) {
            var qushi = data.data.FAutoGlobalDailyList
            for (var i = 0; i < qushi.length; i++) {
                count.push(qushi[i].all.confirm)
                count1.push(qushi[i].all.dead)
                date.push(qushi[i].date)
            }
            myChart.setOption({ //加载数据图表
                series: [{
                    data: count
                }, {
                    data: count1
                }],
                xAxis: [{
                    data: date
                }]
            })
        }
    })
    setInterval(ajax, 3600000) //设定定时器，循环运行;
}
ajax()

地图模块

地图模块所需要的数据格式同南丁格尔玫瑰图一致，但是内置地图模块的国家名为英文，所以需要为每个英文国家名定义中文，转化代码如下，参考地址https://blog.csdn.net/qq_27747997/article/details/89710859，并对获取到的疫情数据的国家名进行对应修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
{
    "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": "锡亚琴冰川地区"
}

引用地图样式前记得在html页面的index.js前引入world.js文件

1
<script src="js/world.js"></script>

这里，腾讯的全球数据是海外的，是的没错，就是海外的，不包括中国，我可差点没被气死（想了想，人家腾讯已经算好给你数据接口了，气啥），所以我需要再ajax一下，获取腾讯的国内数据，然后加到世界地图上去，所以这里就用到了两个ajax了，反正都差不多，代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var virus = []
var ajax = function() {
    $.ajax({
        url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5',
        type: 'get',
        // data: {},
        dataType: 'jsonp',
        success: function(data) {
            var res = data.data || "";
            res = JSON.parse(res).chinaTotal.confirm;
            virus.push({ name: '中国', value: res })
            myChart.setOption({ //加载数据图表
                series: [{
                    // 根据名字对应到相应的系列
                    data: virus
                }]
            })
        }
    });
    $.ajax({
        url: 'https://api.inews.qq.com/newsqa/v1/automation/foreign/country/ranklist',
        type: 'get',
        // data: {},
        dataType: 'json',
        success: function(data) {
            var num = data.data
            var sum = 0
            for (var i = 0; i < num.length; i++) {
                virus.push({ name: num[i].name, value: num[i].confirm })
                sum += num[i].confirm
            }
            myChart.setOption({ //加载数据图表
                series: [{
                    // 根据名字对应到相应的系列
                    data: virus
                }]
            })
        }
    })
    setInterval(ajax, 3600000) //设定定时器，循环运行;
}
ajax()

至此，图表的数据就好了，还没呢还没呢，还有全球确诊和全球治愈呢，好滴好滴

全球确诊，全球治愈

这里就只需要获取海外的疫情状况然后加上从中国获取到的数据就ok啦，（这里代码嵌套了，后面应该把代码优化下弄成promise版本的），然后就显示到li标签上啦

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$.ajax({
    url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5',
    type: 'get',
    // data: {},
    dataType: 'jsonp',
    success: function(data) {
        var res = data.data || "";
        // console.log(JSON.parse(res).chinaTotal.heal)
        var res1 = JSON.parse(res).chinaTotal.confirm;
        var res2 = JSON.parse(res).chinaTotal.heal;
        $.ajax({
            url: 'https://api.inews.qq.com/newsqa/v1/automation/modules/list?modules=FAutoGlobalStatis,FAutoContinentStatis,FAutoGlobalDailyList,FAutoCountryConfirmAdd',
            type: 'get',
            // data: {},
            dataType: 'json',
            success: function(data) {
                // console.log(data)
                var sum = data.data.FAutoGlobalStatis.confirm + res1
                var cureSum = data.data.FAutoGlobalStatis.heal + res2
                $(".no-hd li:first").text(sum)
                $(".no-hd li:nth-child(2)").text(cureSum)
            }
        })
    }
});

到这里，就做完这个小项目啦，如下图（颜色搭配可以上Echarts参考修改下），也可以点击这里看我的在线成果

image-20200720110701504

总结

这次制作这个疫情地图花费的时间如果不算上出去玩啥的，总共花了大概一天半吧，主要在数据获取分析这里花费好多时间，特别是从一个数据源获取后在线无法显示，之后换成腾讯数据源时的数据处理上，花费了大量时间，不过也好，学了不同数据源的不同数据处理方法，累并快乐着，至少在欣赏自己做出的疫情地图后，无比欣慰。反正不懂得问题我就先自己琢磨解决，自己解决了成就感也会随之而来，实在不行就去百度也可，然后做完这个真的像是在复习好多内容，前面学的html、css都在此有所复习起来吧，特别是js，很多基础知识点都抓回来了，之前学的时候懵懵，不知道用处是啥，单纯数学计算，现在就用到这些来处理数据了，慢慢（满满）收获吧。也相当于复习吧，没多少新知识点。这个八月的小项目也算提前完成了，耶✌。