pafz3r62f
/
pnebl9fp6
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

项目基本完成

Browse Source
master
yangxudongll 5 years ago
parent 954cc69cef
commit 74e0253f26
5 changed files with 59 additions and 724 deletions
Show Stats Download Patch File Download Diff File

BIN
数据分析和可视化/新冠疫情/__pycache__/models.cpython-36.pyc
View File

Binary file not shown.

643
数据分析和可视化/新冠疫情/static/js/index.js
Unescape View File

@ -1,643 +0,0 @@
$(document).ready(function () {
$.ajax({
url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5", //请求的服务端地址
type: "post",
dataType: "JSONP",
error:function(requests){
alert(requests);
},
success: function (data) {
var tojson = $.parseJSON(data.data);
console.log(tojson);
$("#nowtime").html(tojson.lastUpdateTime); //时间
$(".num1").html(tojson.chinaTotal.confirm); //确诊病例
$(".add_num1").html(tojson.chinaAdd.confirm); //新增确诊病例
$(".num2").html(tojson.chinaTotal.suspect); //疑似病例
$(".add_num2").html(tojson.chinaAdd.suspect); //新增疑似病例
$(".num3").html(tojson.chinaTotal.dead); //死亡人数
$(".add_num3").html(tojson.chinaAdd.dead); //新增死亡人数
$(".num4").html(tojson.chinaTotal.heal); //治愈人数
$(".add_num4").html(tojson.chinaAdd.heal); //新增治愈人数
var chinaData = tojson.areaTree[0].children;
// 地图
var map_echarts = echarts.init(document.getElementById('map_echarts'));
var dataList = [];
for (var j = 0; j < chinaData.length; j++) {
var jsonobj = {};
jsonobj.name = chinaData[j].name;
jsonobj.value = chinaData[j].total.confirm;
dataList.push(jsonobj);
}
var nhbd = {
name: '南海半岛',
value: 0
};
dataList.push(nhbd);
var map_option = {
tooltip: {
triggerOn: "click",
formatter: function (e, t, n) {
return .5 == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
}
},
visualMap: {
min: 0,
max: 100000,
left: 10,
bottom: 40,
itemWidth: 5, //图元的宽
itemHeight: 5, //图元的高
itemGap: 5, //两个图元之间的间隔距离
textStyle: {
fontSize: 9, //图元字体大小
},
pieces: [{
gt: 1000,
label: "> 1000",
color: "#7f1100"
}, {
gte: 500,
lte: 1000,
label: "500 - 1000",
color: "#ff5428"
}, {
gte: 150,
lt: 500,
label: "150 - 500",
color: "#ff8c71"
}, {
gt: 20,
lt: 150,
label: "20 - 150",
color: "#ffd768"
}, {
gt: 0,
lt: 20,
label: "0 - 20",
color: "rgb(253,235,207)"
}],
show: true
},
geo: {
map: "china",
roam: !1, //是否开启鼠标缩放和平移漫游
scaleLimit: { //滚轮缩放的极限控制
min: 1,
max: 2
},
zoom: 1.2, //当前视角的缩放比例。
top: 40,
label: {
show: !0,
fontSize: "7", //地图上文字的大小
color: "rgba(0,0,0,0.7)", //文字的颜色
position: ['0', '50%'],
align: "center",
verticalAlign: "middle",
distance: '2'
},
itemStyle: {
normal: {
//shadowBlur: 50,
//shadowColor: 'rgba(0, 0, 0, 0.2)',
borderColor: "rgba(0, 0, 0, 0.2)"
},
emphasis: {
areaColor: "#f2d5ad",
shadowOffsetX: 0,
shadowOffsetY: 0,
borderWidth: 0
}
}
},
series: [{
name: "确诊病例",
type: 'map',
mapType: 'china',
geoIndex: 0,
data: dataList
}]
};
map_echarts.setOption(map_option);
// 全国疫情新增确诊/新增疑似趋势图
var addData10 = tojson.chinaDayAddList;
console.log(addData10);
var xData10 = [];
var yData11 = [];
var yData12 = [];
/*
for (j = 0; j < addData10.length; j++) {
xData10.push(addData10[j].date);
yData11.push(addData10[j].confirm);
yData12.push(addData10[j].suspect);
}
*/
var echarts1 = echarts.init(document.getElementById('echarts1'));
var echarts1_option = {
title: {
top: '0',
left: 'left',
text: '全国疫情新增确诊/新增疑似趋势图',
textStyle: {
align: 'left',
color: '#000',
fontWeight: '500',
fontSize: 13,
}
},
backgroundColor: '#fff',
legend: {
right: '0',
top: '20px',
itemWidth: 10,
itemHeight: 5,
itemGap: 15,
textStyle: {
color: '#333',
fontSize: 10,
},
icon: 'roundRect',
data: ['新增确诊', '新增疑似']
},
grid: {
right: '0',
bottom: '0',
left: '0',
top: '50px',
containLabel: true
},
xAxis: [{
type: 'category',
data: xData10,
axisLine: { //坐标轴轴线相关设置
lineStyle: {
color: "#aaa"
}
},
axisTick: { //坐标轴刻度相关设置
show: true,
lineStyle: {
color: '#aaa',
width: 1,
},
length: 3,
},
axisLabel: { //坐标轴刻度标签的相关设置
show: true,
// interval:1,
textStyle: {
color: "#aaa",
fontSize: 9,
},
rotate: 30
}
}],
yAxis: [{
type: 'value',
position: 'left',
interval: 1000,
max: 6000,
axisLine: { //坐标轴轴线相关设置
show: false
},
axisTick: { //坐标轴刻度相关设置
show: false
},
axisLabel: { //坐标轴刻度标签的相关设置
show: true,
color: "#aaa",
fontSize: 9
},
splitLine: { //坐标轴在 grid 区域中的分隔线
lineStyle: {
color: "#eee",
}
}
}, ],
series: [{
name: '新增确诊',
type: 'line',
yAxisIndex: 0,
symbolSize: 4,
itemStyle: {
normal: {
color: 'rgb(255,215,104)',
}
},
data: yData11
},
{
name: '新增疑似',
type: 'line',
yAxisIndex: 0,
symbolSize: 4,
itemStyle: {
normal: {
color: 'rgb(127,17,0)',
}
},
data: yData12
}
]
};
echarts1.setOption(echarts1_option);
// 全国疫情累计确诊/疑似趋势图
var addData20 = tojson.chinaDayList;
var xData20 = [];
var yData21 = [];
var yData22 = [];
/*
for (var k = 0; k < addData20.length; k++) {
xData20.push(addData20[k].date);
yData21.push(addData20[k].confirm);
yData22.push(addData20[k].suspect);
}
*/
var echarts2 = echarts.init(document.getElementById('echarts2'));
var echarts2_option = {
title: {
top: '0',
left: 'left',
text: '全国疫情累计确诊/疑似趋势图',
textStyle: {
align: 'left',
color: '#000',
fontWeight: '500',
fontSize: 13,
}
},
backgroundColor: '#fff',
legend: {
right: '0',
top: '20px',
itemWidth: 10,
itemHeight: 5,
itemGap: 15,
textStyle: {
color: '#333',
fontSize: 10,
},
icon: 'roundRect',
data: ['累计确诊', '累计疑似']
},
grid: {
right: '0',
bottom: '0',
left: '0',
top: '50px',
containLabel: true
},
xAxis: [{
type: 'category',
data: xData20,
axisLine: { //坐标轴轴线相关设置
lineStyle: {
color: "#aaa"
}
},
axisTick: { //坐标轴刻度相关设置
show: true,
lineStyle: {
color: '#aaa',
width: 1,
},
length: 3,
},
axisLabel: { //坐标轴刻度标签的相关设置
show: true,
// interval:1,
textStyle: {
color: "#aaa",
fontSize: 9,
},
rotate: 30
}
}],
yAxis: [{
type: 'value',
position: 'left',
interval: 6000,
max: 48000,
axisLine: { //坐标轴轴线相关设置
show: false
},
axisTick: { //坐标轴刻度相关设置
show: false
},
axisLabel: { //坐标轴刻度标签的相关设置
show: true,
color: "#aaa",
fontSize: 9
},
splitLine: { //坐标轴在 grid 区域中的分隔线
lineStyle: {
color: "#eee",
}
}
}, ],
series: [{
name: '累计确诊',
type: 'line',
yAxisIndex: 0,
symbolSize: 4,
itemStyle: {
normal: {
color: 'rgb(255,215,104)',
}
},
data: yData21
},
{
name: '累计疑似',
type: 'line',
yAxisIndex: 0,
symbolSize: 4,
itemStyle: {
normal: {
color: 'rgb(127,17,0)',
}
},
data: yData22
}
]
};
echarts2.setOption(echarts2_option);
// 全国疫情累计死亡/治愈趋势图
var addData30 = tojson.chinaDayList;
var xData30 = [];
var yData31 = [];
var yData32 = [];
/*
for (var m = 0; m < addData30.length; m++) {
xData30.push(addData30[m].date);
yData31.push(addData30[m].dead);
yData32.push(addData30[m].heal);
}
*/
var echarts3 = echarts.init(document.getElementById('echarts3'));
var echarts3_option = {
title: {
top: '0',
left: 'left',
text: '全国疫情累计死亡/治愈趋势图',
textStyle: {
align: 'left',
color: '#000',
fontWeight: '500',
fontSize: 13,
}
},
backgroundColor: '#fff',
legend: {
right: '0',
top: '20px',
itemWidth: 10,
itemHeight: 5,
itemGap: 15,
textStyle: {
color: '#333',
fontSize: 10,
},
icon: 'roundRect',
data: ['累计死亡', '累计治愈']
},
grid: {
right: '0',
bottom: '0',
left: '0',
top: '50px',
containLabel: true
},
xAxis: [{
type: 'category',
data: xData30,
axisLine: { //坐标轴轴线相关设置
lineStyle: {
color: "#aaa"
}
},
axisTick: { //坐标轴刻度相关设置
show: true,
lineStyle: {
color: '#aaa',
width: 1,
},
length: 3,
},
axisLabel: { //坐标轴刻度标签的相关设置
show: true,
// interval:1,
textStyle: {
color: "#aaa",
fontSize: 9,
},
rotate: 30
}
}],
yAxis: [{
type: 'value',
position: 'left',
interval: 600,
max: 6000,
axisLine: { //坐标轴轴线相关设置
show: false
},
axisTick: { //坐标轴刻度相关设置
show: false
},
axisLabel: { //坐标轴刻度标签的相关设置
show: true,
color: "#aaa",
fontSize: 9
},
splitLine: { //坐标轴在 grid 区域中的分隔线
lineStyle: {
color: "#eee",
}
}
}, ],
series: [{
name: '累计死亡',
type: 'line',
yAxisIndex: 0,
symbolSize: 4,
itemStyle: {
normal: {
color: 'rgb(180,192,213)',
}
},
data: yData31
},
{
name: '累计治愈',
type: 'line',
yAxisIndex: 0,
symbolSize: 4,
itemStyle: {
normal: {
color: 'rgb(102,204,153)',
}
},
data: yData32
}
]
};
echarts3.setOption(echarts3_option);
// china 表格
$(".china.table_pro .content").html(eachchina(chinaData));
var china_line_first = $('.china.table_pro .content li.c_line .line_first');
china_line_first.on('click', function () {
$(this).next().slideToggle(500);
$(this).find('img').toggleClass('rotate');
});
// world 表格
tojson.areaTree.shift();
var worldData = tojson.areaTree;
$(".world.table_pro .content").html(eachworld(worldData));
},
error: function () {
console.log('请求数据出错');
}
});
$.ajax({
url: "https://view.inews.qq.com/g2/getOnsInfo?name=wuwei_ww_time_line", //请求的服务端地址
type: "post",
dataType: "JSONP",
success: function (data) {
var ssdata = JSON.parse(data.data);
// console.log(ssdata);
var newestdata = ssdata.reverse().slice(0, 20); //20条数据
var newswrap = $(".dongtai .main .cbp_tmtimeline");
newswrap.html(eachnews(newestdata));
},
error: function () {
console.log('请求数据出错');
}
});
});
function eachchina(obj) {
var str = '';
if (obj.constructor == Array) {
for (var i = 0, len = obj.length; i < len; i++) {
str += `<li class="c_line">
<div class="line_first">
<span class="c_area">
<img src="images/arrow.png">`;
str += `<div style="display:inline-block;margin-left:0.1rem;">` + obj[i].name + `</div>`;
str += `</span>`;
str += `<span class="c_confirm">` + obj[i].total.confirm + `</span>`;
str += `<span class="c_dead">` + obj[i].total.dead + `</span>`;
str += `<span class="c_heal">` + obj[i].total.heal + `</span>`;
str += `</div>`;
if (obj[i].children) {
str += `<div class="line_hide">`;
for (var j = 0; j < obj[i].children.length; j++) {
var thefirstchildren = obj[i].children[j];
str += `<div class="hide_content">`;
str += `<span class="c_area">` + thefirstchildren.name + `</span>`;
str += `<span class="c_confirm">` + thefirstchildren.total.confirm + `</span>`;
str += `<span class="c_dead">` + thefirstchildren.total.dead + `</span>`;
str += `<span class="c_heal">` + thefirstchildren.total.heal + `</span>`;
str += `</div>`;
}
str += `</div>`;
}
str += `</li>`;
}
return str;
}
}
function eachworld(obj) {
var str = '';
if (obj.constructor == Array) {
for (var i = 0, len = obj.length; i < len; i++) {
str += `<li class="c_line">
<div class="line_first">`;
str += `<span class="c_area" style="text-align:center;">` + obj[i].name + `</span>`;
str += `<span class="c_confirm">` + obj[i].total.confirm + `</span>`;
str += `<span class="c_dead">` + obj[i].total.dead + `</span>`;
str += `<span class="c_heal">` + obj[i].total.heal + `</span>`;
str += `</div>`;
str += `</li>`;
}
return str;
}
}
function eachnews(obj) {
var str = '';
if (obj.constructor == Array) {
for (var i = 0, len = obj.length; i < len; i++) {
var thetime = obj[i].time.split(" ");
if (obj[i].time != "") {
str += `<li>
<div class="cbp_tmtime">`;
str += `<span>` + thetime[0] + `</span>`;
str += `<span>` + thetime[1] + `</span>`;
str += `</div>
<div class="cbp_tmlabel">`;
str += `<h2>` + obj[i].title + `</h2>`;
str += `<p style="font-size: 0.25rem;padding:10px 0 0 0;">` + obj[i].desc + `</p>`;
str += `</div>`;
str += `</li>`;
}
}
return str;
}
}
var ospan = document.querySelectorAll('.middle middle_con');
console.log(ospan.length);
var num_op = 0;
var tabs_list = document.querySelectorAll('.middle_con .wrap div.tabs_content .tabs_lists');
console.log(tabs_list.length);
console.log('+++++++++++++++++++++++++++++++++++');
/*tabs_list[0].style.display = 'block';*/
for (var i = 0; i < ospan.length; i++) {
console.log('----------------------------------------------');
console.log(ospan.length);
ospan[i].index = i;
//一级标题：滑入事件
ospan[i].onclick = function () {
//一级标题：style变化
ospan[num_op].className = '';
this.className = 'sty';
//二级内容：block变化
tabs_list[num_op].style.display = '';
tabs_list[this.index].style.display = 'block';
num_op = this.index;
}
}

20
数据分析和可视化/新冠疫情/static/js/update.js
Unescape View File

@ -1,20 +0,0 @@
console.log('----------------------------update');
function eachchina(province,confirmed,curconfirm,died) {
var str = '';
if (province.length!=0) {
for (var i = 0, len = province.length; i < len; i++) {
str += `<li class="c_line">
<div class="line_first">
<span class="c_area">
<img src="images/arrow.png">`;
str += `<div style="display:inline-block;margin-left:0.1rem;">` + province[i] + `</div>`;
str += `</span>`;
str += `<span class="c_confirm">` + confirmed[i] + `</span>`;
str += `<span class="c_dead">` + curconfirm[i] + `</span>`;
str += `<span class="c_heal">` + died[i] + `</span>`;
str += `</div>`;
str += `</li>`;
}
return str;
}
}

110
数据分析和可视化/新冠疫情/templates/foreign.html
Unescape View File

@ -10,7 +10,7 @@
<meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0'> <meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0'>
<!--当前页面的三要素--> <!--当前页面的三要素-->
<title>国外实时疫情</title> <title>实时疫情</title>
<meta name="description" content="关键词、关键字"> <meta name="description" content="关键词、关键字">
<meta name="keywords" content="描述"> <meta name="keywords" content="描述">
@ -24,16 +24,14 @@
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script> </script>
<script src={{url_for('static',filename='js/update.js')}}></script>
<script <script
src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"> src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js">
</script> </script>
<script src={{url_for('static',filename='js/china.js')}}></script> <script src={{url_for('static',filename='js/china.js')}}></script>
<script type='text/javascript' src='{{ url_for("static",filename="js/echarts.js")}}'></script> <script type='text/javascript' src='{{ url_for("static",filename="js/echarts.js")}}'></script>
<script type='text/javascript' src='{{ url_for("static",filename="js/china.js")}}'></script> <script type='text/javascript' src='{{ url_for("static",filename="js/china.js")}}'></script>
<script type='text/javascript' src='{{ url_for("static",filename="js/world.js")}}'></script>
<script type="text/javascript",src=" {{url_for('static',filename='js/jquery-3.2.1.js')}}"></script> <script type="text/javascript",src=" {{url_for('static',filename='js/jquery-3.2.1.js')}}"></script>
<script src="{{url_for('static',filename='js/world.js')}}">
</script>
@ -73,16 +71,13 @@
<div class="tabs_content"> <div class="tabs_content">
<!-- 国内疫情 --> <!-- 国内疫情 -->
<div class="tabs_list dongtai">
</div>
<!-- 国外疫情 -->
<div class="tabs_list gailan"> <div class="tabs_list gailan">
<!-- gl_tips --> <!-- gl_tips -->
<p class="gl_tips">截止<span id="nowtime">2020-02-02 11:52</span>统计</p> <p class="gl_tips">截止<span id="nowtime">2020-02-02 11:52</span>全国数据统计</p>
<!-- detail4 --> <!-- detail4 -->
<div class="detail4"> <div class="detail4">
<div class="list4"> <div class="list4">
<p class="color1">较昨日<span class="add_num1"></span></p> <p class="color1">较昨日<span class="add_num1">110</span></p>
<p class="num num1 color1">0</p> <p class="num num1 color1">0</p>
<div class="text">确诊病例</div> <div class="text">确诊病例</div>
</div> </div>
@ -107,11 +102,12 @@
<div class="map t_common"> <div class="map t_common">
<div class="map_tit tit_common"> <div class="map_tit tit_common">
<!-- <span class="tit_icon"></span> --> <!-- <span class="tit_icon"></span> -->
<span class="tit_con">&nbsp;&nbsp;累计确诊</span> <span class="tit_con">&nbsp;&nbsp;全球累计确诊</span>
</div> </div>
<div class="map_con" id="map_echarts" style="width:100%;height:600px;"> <div class="map_con" id="map_echarts" style="width:100%;height:300px;">
</div> </div>
</div> </div>
<p><br> </p>
<div class="map t_common"> <div class="map t_common">
<div class="map_tit tit_common"> <div class="map_tit tit_common">
<span class="tit_con">当前确诊人数最多的10个国家</span> <span class="tit_con">当前确诊人数最多的10个国家</span>
@ -119,26 +115,26 @@
</div> </div>
</div> </div>
<div id="echarts1" style="width:100%;height:4rem;margin-bottom:0.4rem;"></div> <div id="echarts1" style="width:100%;height:4rem;margin-bottom:0.4rem;"></div>
<p><br> </p>
<div class="map t_common"> <div class="map t_common">
<div class="map_tit tit_common"> <div class="map_tit tit_common">
<span class="tit_con">全球累计新增确诊</span> <span class="tit_con">全球确诊人数变化</span>
<div class="map_con" id="confirmedRelative" style="width:100%;height:400px;"></div> <div class="map_con" id="asymptomaticLoc" style="width:100%;height:300px;"></div>
</div> </div>
</div> </div>
<div id="echarts2" style="width:100%;height:4rem;margin-bottom:0.4rem;"></div> <div id="echarts2" style="width:100%;height:4rem;margin-bottom:0.4rem;"></div>
<p><br> </p>
<!-- table --> <!-- table -->
<!-- 全国表格 --> <!-- 全国表格 -->
<div class="china table_t t_common"> <div class="china table_t t_common">
<div class="tit_common"> <div class="tit_common">
<!-- <span class="tit_icon"></span> --> <!-- <span class="tit_icon"></span> -->
<span class="tit_con">&nbsp;&nbsp;全球各国数据统计</span> <span class="tit_con">&nbsp;&nbsp;全球数据统计</span>
</div> </div>
</div> </div>
<div class="china table_pro"> <div class="china table_pro">
<div class="title"> <div class="title">
<span class="t_area">地区</span> <span class="t_area">国家</span>
<span class="t_confirm">累计确诊</span> <span class="t_confirm">累计确诊</span>
<span class="t_dead">新增</span> <span class="t_dead">新增</span>
<span class="t_heal">死亡</span> <span class="t_heal">死亡</span>
@ -148,6 +144,14 @@
</div> </div>
</div> </div>
<!-- 国外疫情 -->
<div class="tabs_list dongtai">
<div class="main">
<ul class="cbp_tmtimeline">
<!-- 这里是最新动态 -->
</ul>
</div>
</div>
<!-- 防护知识 --> <!-- 防护知识 -->
<div class="tabs_list fhzs"> <div class="tabs_list fhzs">
@ -163,12 +167,9 @@
//在国内，国外疫情，防护知识间切换 //在国内，国外疫情，防护知识间切换
var ospan = document.querySelectorAll('.middle_con .wrap .tabs .tabs_wrap span'); var ospan = document.querySelectorAll('.middle_con .wrap .tabs .tabs_wrap span');
var num_op = 0; var num_op = 0;
var tabs_list = document.querySelectorAll('.middle_con .wrap .tabs_content .tabs_list'); var tabs_list = document.querySelectorAll('.middle_con .wrap .tabs_content .tabs_list');
tabs_list[0].style.display = 'block'; tabs_list[0].style.display = 'block';
for (var i = 0; i < ospan.length; i++) { for (var i = 0; i < ospan.length; i++) {
ospan[i].index = i; ospan[i].index = i;
@ -187,8 +188,7 @@ for (var i = 0; i < ospan.length; i++) {
}; };
//绘制全世界疫情地图 //绘制全球疫情地图
var dataList=[]
var myChart = echarts.init(document.getElementById('map_echarts')); var myChart = echarts.init(document.getElementById('map_echarts'));
option = { option = {
title: { title: {
@ -428,33 +428,10 @@ dataRange:{
}; };
//表格填充 //绘制前10个确诊人数最多的国家
function eachchina(province,confirmed,curconfirm,died) {
var str = '';
if (province.length!=0) {
for (var i = 0, len = province.length; i < len; i++) {
str += `<li class="c_line">
<div class="line_first">
<span class="c_area">
<img src="{{url_for('static',filename='images/arrow.png')}}">`;
str += `<div style="display:inline-block;margin-left:0.1rem;">` + province[i] + `</div>`;
str += `</span>`;
str += `<span class="c_confirm">` + confirmed[i] + `</span>`;
str += `<span class="c_dead">` + curconfirm[i] + `</span>`;
str += `<span class="c_heal">` + died[i] + `</span>`;
str += `</div>`;
str += `</li>`;
}
return str;
}
}
//绘制世界top10确诊国家
var top10chart=echarts.init(document.getElementById('top10chart')); var top10chart=echarts.init(document.getElementById('top10chart'));
var top10option={ var top10option={
title:{ title:{
text:'确诊top10',
left:'20px',
}, },
tooltip:{ tooltip:{
@ -494,8 +471,8 @@ var top10option={
] ]
}; };
//绘制累计新增和 //绘制全球确诊人数增长曲线
var totalAdd=echarts.init(document.getElementById('confirmedRelative')); var totalAdd=echarts.init(document.getElementById('asymptomaticLoc'));
Addoption={ Addoption={
title:{ title:{
@ -553,17 +530,36 @@ Addoption={
}; };
function eachchina(province,confirmed,curconfirm,died) {
var str = '';
if (province.length!=0) {
for (var i = 0, len = province.length; i < len; i++) {
str += `<li class="c_line">
<div class="line_first">
<span class="c_area">
<img src="{{url_for('static',filename='images/arrow.png')}}">`;
str += `<div style="display:inline-block;margin-left:0.1rem;">` + province[i] + `</div>`;
str += `</span>`;
str += `<span class="c_confirm">` + confirmed[i] + `</span>`;
str += `<span class="c_dead">` + curconfirm[i] + `</span>`;
str += `<span class="c_heal">` + died[i] + `</span>`;
str += `</div>`;
str += `</li>`;
}
return str;
}
}
$.ajax({ $.ajax({
cache:false, cache:false,
type:'POST', type:'POST',
async:false, async:false,
url:'/globalInfo', url:'/globalInfo',
data:[],
error:function(request){ error:function(request){
alert('false'); alert('false');
}, },
success:function(results){ success:function(results){
$("#nowtime").html(results.updateTime); $("#nowtime").html(results.updateTime);
$(".num1").html(results.TotalConfirmed); //确诊病例 $(".num1").html(results.TotalConfirmed); //确诊病例
$(".add_num1").html(results.TotalcurConfirmRelative);//新增 $(".add_num1").html(results.TotalcurConfirmRelative);//新增
$(".num2").html(results.TotalCurConfirm); //现存确诊 $(".num2").html(results.TotalCurConfirm); //现存确诊
@ -586,27 +582,29 @@ $.ajax({
top10confirmed=results.top10confirmed; top10confirmed=results.top10confirmed;
top10curconfirm=results.top10curconfirm; top10curconfirm=results.top10curconfirm;
top10country=results.top10country; top10country=results.top10country;
for(i=0;i<10;i++){ for(i=0;i<10;i++){
top10option.xAxis.data.push(top10country[i]); top10option.xAxis.data.push(top10country[i]);
top10option.series[0].data.push(top10confirmed[i]); top10option.series[0].data.push(top10confirmed[i]);
top10option.series[1].data.push(top10curconfirm[i]); top10option.series[1].data.push(top10curconfirm[i]);
} }
newAddconfirmed=results.newAddconfirmed; newAddconfirmed=results.newAddconfirmed;
newAddTime=results.newAddTime; newAddTime=results.newAddTime;
for(i=0;i<newAddconfirmed.length;i++){ for(i=0;i<newAddTime.length;i++){
Addoption.xAxis.data.push(newAddTime[i]); Addoption.xAxis.data.push(newAddTime[i]);
Addoption.series[0].data.push(newAddconfirmed[i]); Addoption.series[0].data.push(newAddconfirmed[i]);
} }
myChart.setOption(option);
top10chart.setOption(top10option);
totalAdd.setOption(Addoption);
} }
});
myChart.setOption(option);
top10chart.setOption(top10option);
totalAdd.setOption(Addoption);
});
</script> </script>

10
数据分析和可视化/新冠疫情/templates/index.html
Unescape View File

@ -112,12 +112,14 @@
<div class="map_con" id="map_echarts" style="width:100%;height:300px;"> <div class="map_con" id="map_echarts" style="width:100%;height:300px;">
</div> </div>
</div> </div>
<p><br> </p>
<div class="map t_common"> <div class="map t_common">
<div class="map_tit tit_common"> <div class="map_tit tit_common">
<span class="tit_con">当前确诊人数最多的5个省份</span> <span class="tit_con">当前确诊人数最多的5个省份</span>
<div class="map_con" id="top5chart" style="width:100%;height:300px;"></div> <div class="map_con" id="top5chart" style="width:100%;height:300px;"></div>
</div> </div>
</div> </div>
<p><br> </p>
<div id="echarts1" style="width:100%;height:4rem;margin-bottom:0.4rem;"></div> <div id="echarts1" style="width:100%;height:4rem;margin-bottom:0.4rem;"></div>
<div class="map t_common"> <div class="map t_common">
@ -126,6 +128,7 @@
<div class="map_con" id="asymptomaticLoc" style="width:100%;height:300px;"></div> <div class="map_con" id="asymptomaticLoc" style="width:100%;height:300px;"></div>
</div> </div>
</div> </div>
<p><br> </p>
<div id="echarts2" style="width:100%;height:4rem;margin-bottom:0.4rem;"></div> <div id="echarts2" style="width:100%;height:4rem;margin-bottom:0.4rem;"></div>
<!-- table --> <!-- table -->
@ -280,9 +283,7 @@ for (var i = 0; i < ospan.length; i++) {
var top5chart=echarts.init(document.getElementById("top5chart")); var top5chart=echarts.init(document.getElementById("top5chart"));
top5option={ top5option={
title:{ title:{
text:'确诊人数最多5个省份',
subtext:'',
left:'center',
}, },
tooltip:{ tooltip:{
trigger:'item', trigger:'item',
@ -314,8 +315,7 @@ top5option={
var asymptomatic=echarts.init(document.getElementById("asymptomaticLoc")); var asymptomatic=echarts.init(document.getElementById("asymptomaticLoc"));
sympoption={ sympoption={
title:{ title:{
text:"无症状感染者分布",
left:'center',
}, },
xAxis:{ xAxis:{
type:'category', type:'category',

Write Preview
Loading…
Cancel
Save