Skip to content
This repository was archived by the owner on May 5, 2023. It is now read-only.

Commit 368008d

Browse files
leafcoderleafcoder
committed
Merge branch 'develop'
2 parents 9b8a5e9 + a69c14d commit 368008d

File tree

1 file changed

+181
-138
lines changed

1 file changed

+181
-138
lines changed

‎demo/index.html‎

Lines changed: 181 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
<body>
1212
<header id="header">
1313
<h3 class="header-title">新冠肺炎（2019-nCov）疫情</h3>
14-
<div class="header-info header-info-l">数据来源：丁香园（<small>前往 <a href="https://github.com/leafcoder" target="_blank" style="color: #FFFFFF;">leafcoder/django-covid19</a></small>）</div>
15-
<div class="header-info header-info-r">数据日期：<span id="nowDate"></span></div>
14+
<div class="header-info header-info-l">数据来源：丁香园<small>（前往 <a href="https://github.com/leafcoder" target="_blank" style="color: #FFFFFF;">leafcoder/django-covid19</a>）</small></div>
15+
<div class="header-info header-info-r">时间：<span id="nowDate"></span><small>（每隔1分钟自动刷新）</small></div>
1616
</header>
1717

1818
<footer id="footer"></footer>
@@ -94,7 +94,7 @@ <h3 class="chart-title">美国疫情趋势图</h3>
9494
<div class="flex-cell flex-cell-r" style="padding-bottom:0;">
9595
<div class="chart-wrapper">
9696
<h3 class="chart-title">各国累计确诊占比</h3>
97-
<div class="chart-div" id="csrcChart">
97+
<div class="chart-div" id="countrysChart">
9898
<div class="chart-loader"><div class="loader"></div></div>
9999
</div>
100100
</div>
@@ -109,34 +109,40 @@ <h3 class="chart-title">各国累计确诊占比</h3>
109109
<script type="text/javascript" src="js/echarts-theme-shine.js"></script>
110110
<script type="text/javascript" src="js/countUp.min.js"></script>
111111
<script type="text/javascript">
112+
$.ajaxSetup({cache:false});
112113
$(function() {
113114
//获取当天日期
114-
(function() {
115+
function load_date() {
115116
const now = new Date();
116117
const year = now.getFullYear();
117118
const month = now.getMonth()+1;
118119
const day = now.getDate();
119-
$("#nowDate").html(year+"年"+month+"月"+day+"日");
120-
})();
121-
122-
//获取统计数据
123-
$.ajax({
124-
url: "http://111.231.75.86:8000/api/statistics/latest",
125-
dataType: "json"
126-
}).done(function(data) {
127-
//console.log('Data: ', data);
128-
rollNum("internationalConfirmedCount", 0, data.internationalStatistics.confirmedCount);
129-
rollNum("internationalDeadCount", 0, data.internationalStatistics.deadCount);
130-
rollNum("internationalCurrentConfirmedCount", 0, data.internationalStatistics.currentConfirmedCount);
131-
rollNum("domesticConfirmedCount", 0, data.domesticStatistics.confirmedCount);
132-
rollNum("domesticDeadCount", 0, data.domesticStatistics.deadCount);
133-
rollNum("domesticCurrentConfirmedCount", 0, data.domesticStatistics.currentConfirmedCount);
134-
}).fail(function(jqXHR, textStatus) {
135-
console.log("Ajax Error: ", textStatus);
136-
});
137-
138-
//获取排行数据
120+
const hours = now.getHours();
121+
const minutes = now.getMinutes();
122+
const seconds = now.getSeconds();
123+
$("#nowDate").html(year+"年"+month+"月"+day+"日" + " " + hours + ":" + minutes + ":" + seconds);
124+
}
139125

126+
function load_statistics() {
127+
//获取统计数据
128+
$.ajax({
129+
url: "http://111.231.75.86:8000/api/statistics/latest",
130+
dataType: "json"
131+
}).done(function(data) {
132+
//console.log('Data: ', data);
133+
rollNum("internationalConfirmedCount", 0, data.internationalStatistics.confirmedCount);
134+
rollNum("internationalDeadCount", 0, data.internationalStatistics.deadCount);
135+
rollNum("internationalCurrentConfirmedCount", 0, data.internationalStatistics.currentConfirmedCount);
136+
rollNum("domesticConfirmedCount", 0, data.domesticStatistics.confirmedCount);
137+
rollNum("domesticDeadCount", 0, data.domesticStatistics.deadCount);
138+
rollNum("domesticCurrentConfirmedCount", 0, data.domesticStatistics.currentConfirmedCount);
139+
}).fail(function(jqXHR, textStatus) {
140+
console.log("Ajax Error: ", textStatus);
141+
});
142+
}
143+
144+
145+
//获取排行数据
140146
const rankChart = echarts.init(document.getElementById("rankChart"), "shine");
141147
const rankChartOpt = {
142148
tooltip: {
@@ -211,40 +217,41 @@ <h3 class="chart-title">各国累计确诊占比</h3>
211217
};
212218
rankChart.setOption(rankChartOpt);
213219

214-
215-
$.ajax({
216-
url: "http://111.231.75.86:8000/api/countries/",
217-
dataType: "json"
218-
}).done(function() {
219-
$("#rankChart").addClass("chart-done");
220-
}).done(function(data) {
221-
var sortable = [];
222-
for (var i in data) {
223-
sortable.push([data[i], data[i].currentConfirmedCount]);
224-
}
225-
data = sortable.sort(function(a, b) {
226-
return b[1] - a[1];
227-
});
228-
data = data.slice(0, 10)
229-
const xData = [];
230-
const yData = [];
231-
for(let i in data) {
232-
xData.push(data[i][0].currentConfirmedCount);
233-
yData.push(data[i][0].countryName);
234-
}
235-
rankChart.setOption({
236-
yAxis: {
237-
data: yData
238-
},
239-
series: [{
240-
name: "现存确认排行",
241-
data: xData
242-
}]
220+
function load_country_rank_list() {
221+
$.ajax({
222+
url: "http://111.231.75.86:8000/api/countries/",
223+
dataType: "json"
224+
}).done(function() {
225+
$("#rankChart").addClass("chart-done");
226+
}).done(function(data) {
227+
var sortable = [];
228+
for (var i in data) {
229+
sortable.push([data[i], data[i].currentConfirmedCount]);
230+
}
231+
data = sortable.sort(function(a, b) {
232+
return b[1] - a[1];
233+
});
234+
data = data.slice(0, 10)
235+
const xData = [];
236+
const yData = [];
237+
for(let i in data) {
238+
xData.push(data[i][0].currentConfirmedCount);
239+
yData.push(data[i][0].countryName);
240+
}
241+
rankChart.setOption({
242+
yAxis: {
243+
data: yData
244+
},
245+
series: [{
246+
name: "现存确认排行",
247+
data: xData
248+
}]
249+
});
250+
}).fail(function(jqXHR) {
251+
console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText);
243252
});
244-
}).fail(function(jqXHR) {
245-
console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText);
246-
});
247-
253+
}
254+
248255
//获取地域分布数据
249256
const mapChart = echarts.init(document.getElementById("mapChart"), "shine");
250257
const mapChartOpt = {
@@ -296,29 +303,32 @@ <h3 class="chart-title">各国累计确诊占比</h3>
296303
}]
297304
};
298305
mapChart.setOption(mapChartOpt);
299-
$.ajax({
300-
url: "http://111.231.75.86:8000/api/provinces/",
301-
dataType: "json"
302-
}).done(function() {
303-
$("#mapChart").addClass("chart-done");
304-
}).done(function(data) {
305-
const chartData = [];
306-
for(let i in data) {
307-
chartData.push({
308-
name: data[i].provinceShortName,
309-
value: data[i].currentConfirmedCount,
310-
source: data[i]
306+
307+
function load_province_map() {
308+
$.ajax({
309+
url: "http://111.231.75.86:8000/api/provinces/",
310+
dataType: "json"
311+
}).done(function() {
312+
$("#mapChart").addClass("chart-done");
313+
}).done(function(data) {
314+
const chartData = [];
315+
for(let i in data) {
316+
chartData.push({
317+
name: data[i].provinceShortName,
318+
value: data[i].currentConfirmedCount,
319+
source: data[i]
320+
});
321+
}
322+
mapChart.setOption({
323+
series: [{
324+
name: "地域分布",
325+
data: chartData
326+
}]
311327
});
312-
}
313-
mapChart.setOption({
314-
series: [{
315-
name: "地域分布",
316-
data: chartData
317-
}]
328+
}).fail(function(jqXHR) {
329+
console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText);
318330
});
319-
}).fail(function(jqXHR) {
320-
console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText);
321-
});
331+
}
322332

323333
//获取月度股票情况数据
324334
const trendChart = echarts.init(document.getElementById("trendChart"), "shine");
@@ -424,45 +434,48 @@ <h3 class="chart-title">各国累计确诊占比</h3>
424434
}]
425435
};
426436
trendChart.setOption(trendChartOpt);
427-
$.ajax({
428-
url: "http://111.231.75.86:8000/api/countries/美国/daily/",
429-
dataType: "json"
430-
}).done(function() {
431-
$("#trendChart").addClass("chart-done");
432-
}).done(function(data) {
433-
//console.log('Data: ', data);
434-
const xData = [];
435-
const yData1 = [];
436-
const yData2 = [];
437-
const yData3 = [];
438-
for(let i in data) {
439-
xData.push(data[i].dateId);
440-
yData1.push(data[i].currentConfirmedCount);
441-
yData2.push(data[i].confirmedCount);
442-
yData3.push(data[i].deadCount);
443-
}
444-
trendChart.setOption({
445-
xAxis: {
446-
data: xData,
447-
},
448-
series: [{
449-
name: "现存确诊",
450-
data: yData1
451-
}, {
452-
name: "累计确诊",
453-
data: yData2
454-
}, {
455-
name: "死亡人数",
456-
data: yData3
457-
}]
437+
438+
function load_usa_daily_list() {
439+
$.ajax({
440+
url: "http://111.231.75.86:8000/api/countries/美国/daily/",
441+
dataType: "json"
442+
}).done(function() {
443+
$("#trendChart").addClass("chart-done");
444+
}).done(function(data) {
445+
//console.log('Data: ', data);
446+
const xData = [];
447+
const yData1 = [];
448+
const yData2 = [];
449+
const yData3 = [];
450+
for(let i in data) {
451+
xData.push(data[i].dateId);
452+
yData1.push(data[i].currentConfirmedCount);
453+
yData2.push(data[i].confirmedCount);
454+
yData3.push(data[i].deadCount);
455+
}
456+
trendChart.setOption({
457+
xAxis: {
458+
data: xData,
459+
},
460+
series: [{
461+
name: "现存确诊",
462+
data: yData1
463+
}, {
464+
name: "累计确诊",
465+
data: yData2
466+
}, {
467+
name: "死亡人数",
468+
data: yData3
469+
}]
470+
});
471+
}).fail(function(jqXHR) {
472+
console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText);
458473
});
459-
}).fail(function(jqXHR) {
460-
console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText);
461-
});
462-
463-
//获取CSRC行业分类数据
464-
const csrcChart = echarts.init(document.getElementById("csrcChart"), "shine");
465-
const csrcChartOpt = {
474+
}
475+
476+
//获取分类数据
477+
const countrysChart = echarts.init(document.getElementById("countrysChart"), "shine");
478+
const countrysChartOpt = {
466479
tooltip: {
467480
trigger: "item",
468481
formatter: "{b0}<br />累计确诊：{c0}人<br />占比：{d0}%"
@@ -488,36 +501,66 @@ <h3 class="chart-title">各国累计确诊占比</h3>
488501
radius: ["30%", "85%"]
489502
}]
490503
};
491-
csrcChart.setOption(csrcChartOpt);
492-
$.ajax({
493-
url: "http://111.231.75.86:8000/api/countries/",
494-
dataType: "json"
495-
}).done(function() {
496-
$("#csrcChart").addClass("chart-done");
497-
}).done(function(data) {
498-
const chartData = [];
499-
for(let i in data) {
500-
chartData.push({
501-
name: data[i].countryName,
502-
value: data[i].confirmedCount
504+
countrysChart.setOption(countrysChartOpt);
505+
506+
function load_countries() {
507+
$.ajax({
508+
url: "http://111.231.75.86:8000/api/countries/",
509+
dataType: "json"
510+
}).done(function() {
511+
$("#countrysChart").addClass("chart-done");
512+
}).done(function(data) {
513+
const chartData = [];
514+
for(let i in data) {
515+
chartData.push({
516+
name: data[i].countryName,
517+
value: data[i].confirmedCount
518+
});
519+
}
520+
countrysChart.setOption({
521+
series: [{
522+
name: "各国累计确诊占比",
523+
data: chartData
524+
}]
503525
});
504-
}
505-
csrcChart.setOption({
506-
series: [{
507-
name: "各国累计确诊占比",
508-
data: chartData
509-
}]
526+
}).fail(function(jqXHR) {
527+
console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText);
510528
});
511-
}).fail(function(jqXHR) {
512-
console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText);
513-
});
529+
}
514530

531+
532+
function load_page() {
533+
load_date();
534+
load_statistics();
535+
load_country_rank_list();
536+
load_province_map();
537+
load_usa_daily_list();
538+
load_countries();
539+
}
540+
541+
var _timerPie1;
542+
var seconds = new Date().getSeconds();
543+
window.setTimeout(function () {
544+
_timerPie1 = window.setInterval(function () { //数据动态展现
545+
load_page();
546+
}, 60000);
547+
load_page();
548+
}, 60000 - seconds * 1000);
549+
console.log(60000 - seconds * 1000)
550+
551+
var _timerPie2;
552+
_timerPie2 = window.setInterval(function () { //数据动态展现
553+
load_date();
554+
}, 1000);
555+
556+
load_page();
557+
515558
//浏览器窗口大小变化时，重置报表大小
516559
$(window).resize(function() {
517560
rankChart.resize();
518561
mapChart.resize();
519562
trendChart.resize();
520-
csrcChart.resize();
563+
countrysChart.resize();
521564
});
522565
});
523566

0 commit comments

Comments
 (0)