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

国内疫情

Browse Source
master
yangxudongll 4 years ago
parent 5b1337602e
commit f562326552
8 changed files with 821 additions and 87 deletions
Show Stats Download Patch File Download Diff File

12
数据分析和可视化/新冠疫情/hello.py
Unescape View File

@ -6,12 +6,9 @@ app=Flask(__name__)
@app.route("/query_province_topn/",methods=['POST']) @app.route("/query_province_topn/",methods=['POST'])
def query_province_topn(): def query_province_topn():
#print(request.form.get('topnum'))
#print(request.form.get('topdate'))
db=GetFromDB() db=GetFromDB()
results=db.query_province_topn('2020-08-07',5) results=db.query_province_topn('2020-08-07',5)
data=jsonify(pub_dates=str(results[0][2]),areas=[x[0] for x in results],curcofirms=[x[1] for x in results]) data=jsonify(pub_dates=str(results[0][2]),areas=[x[0] for x in results],curcofirms=[x[1] for x in results])
return data return data
@app.route("/chinaInfo/",methods=['POST']) @app.route("/chinaInfo/",methods=['POST'])
@ -27,7 +24,6 @@ def chinasummary():
db=GetFromDB() db=GetFromDB()
nowtime=time.strftime('%Y-%m-%d',time.localtime(time.time())) nowtime=time.strftime('%Y-%m-%d',time.localtime(time.time()))
results=db.searchSummaryChina(nowtime) results=db.searchSummaryChina(nowtime)
print(results)
results=results[0] results=results[0]
#获取各省份疫情数据 #获取各省份疫情数据
provinces=db.searchProvinceConfirmed(nowtime) provinces=db.searchProvinceConfirmed(nowtime)
@ -63,5 +59,13 @@ def GlobalInfomation():
def hello(): def hello():
return render_template('index.html') return render_template('index.html')
@app.route("/foreign/")
def foreign():
return render_template('index.html')
@app.route("/fanghu/")
def hello1():
return render_template('fanghu.html')
if __name__=='__main__': if __name__=='__main__':
app.run(host='192.168.1.30') app.run(host='192.168.1.30')

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

@ -168,11 +168,6 @@ li{list-style:none;}
font-size:0.25rem; font-size:0.25rem;
} }
/* 国外疫情概览 */
.tabs_list.dongtai.gll_tips {
color:rgb(128, 133, 134);
font-size:0.25rem;
}
/* detail4 */ /* detail4 */
.tabs_list.gailan .detail4 { .tabs_list.gailan .detail4 {
@ -184,29 +179,14 @@ li{list-style:none;}
border-bottom: 1px solid #dfdddd; border-bottom: 1px solid #dfdddd;
margin-top:0.2rem; margin-top:0.2rem;
} }
.dongtai .detail4{
height:1.4rem;
display:flex;
justify-content: space-between;
align-items: center;
padding-bottom: 0.3rem;
border-bottom: 1px solid #dfdddd;
margin-top:0.2rem;
}
.tabs_list.gailan .detail4 .list4 p { .tabs_list.gailan .detail4 .list4 p {
text-align:center; text-align:center;
} }
.tabs_list.dongtai.detail4.list4 p{
text-align:center;
}
.tabs_list.gailan .detail4 .list4 .num{ .tabs_list.gailan .detail4 .list4 .num{
font-size:0.45rem; font-size:0.45rem;
} }
.tabs_list.dongtai.detail4.list4.num{
font-size:0.45rem;
}
.tabs_list.gailan .detail4 .list4 .color1 { .tabs_list.gailan .detail4 .list4 .color1 {
color:rgb(234, 51, 35); color:rgb(234, 51, 35);
@ -275,16 +255,27 @@ li{list-style:none;}
} }
.table_pro .title span.t_area{ .table_pro .title span.t_area{
width:40%; width:20%;
background:rgb(227, 231, 243); background:rgb(227, 231, 243);
} }
.table_pro .title span.t_confirm { .table_pro .title span.t_confirm {
width:20%;
background: rgb(243, 186, 176); background: rgb(243, 186, 176);
} }
.table_pro .title span.t_dead { .table_pro .title span.t_dead {
width:20%;
background: rgb(180, 192, 213); background: rgb(180, 192, 213);
} }
.table_pro .title span.t_heal { .table_pro .title span.t_heal {
width:20%;
background: rgb(102, 204, 153);
}
.table_pro .title span.t_add {
width:10%;
background: rgb(102, 104, 100);
}
.table_pro .title span.t_all {
width:10%;
background: rgb(102, 204, 153); background: rgb(102, 204, 153);
} }
.table_pro .content { .table_pro .content {

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

@ -1,2 +1 @@
console.log('--------------------------');

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

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock%}</title>
<meta charset="utf-8">
<!--如果是IE 就以标准渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 视窗——————响应式布局 -->
<meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0'>
<!--当前页面的三要素-->
<meta name="description" content="关键词、关键字">
<meta name="keywords" content="描述">
<link rel="icon" href="{{url_for('static',filename='images/favicon.ico')}}" type="image/x-icon" />
<!-- 引入CSS文件 -->
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/index.css')}}">
<!-- 公共样式 -->
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/common.css')}}">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script src={{url_for('static',filename='js/update.js')}}></script>
<script
src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.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/china.js")}}'></script>
<script type="text/javascript",src=" {{url_for('static',filename='js/jquery-3.2.1.js')}}"></script>
</head>
<body>
<div id='container' class='container'>
<div class="top">
<img src="{{url_for('static',filename='images/hImg.png')}}" alt="" width="100%" class="t_img">
</div>
<div class="middle middle_con">
<div class='wrap'>
<div class="scroll_wrap">
<div class="scroll_img">
<img src="{{url_for('static',filename='images/news.png')}}" alt="">
</div>
<div class="scroll_mar">
<marquee behavior="scroll" direction="left">
第三组生产实习
</marquee>
</div>
<div class="scroll_detail"><a href="https://voice.baidu.com/act/newpneumonia/newpneumonia/">数据来源</a></div>
</div>
<div class="tabs">
<span class="tabs_wrap">
<span class="sty">国内疫情</span>
<span >国外疫情</span>
<span>防护知识</span>
</span>
</div>
<div class="tabs_content">
{% block page%}
{% endblock %}
</div>
</div>
</div>
</div>
</div><!-- container结束 -->
{% block mainscript %}
{% endblock %}
</body>
</html>

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

@ -0,0 +1,346 @@
{% extends 'base1.html' %}
{% block title %}国内疫情{% endblock %}
{%block page%}
<!-- 国内疫情 -->
<div class="tabs_list gailan">
<!-- gl_tips -->
<p class="gl_tips">截止<span id="nowtime">2020-02-02 11:52</span>全国数据统计</p>
<!-- detail4 -->
<div class="detail4">
<div class="list4">
<p class="color1">较昨日+<span class="add_num1">110</span></p>
<p class="num num1 color1">0</p>
<div class="text">确诊病例</div>
</div>
<div class="list4">
<p class="color2">较昨日<span class="add_num2">110</span></p>
<p class="num num2 color2">0</p>
<div class="text">现存确诊</div>
</div>
<div class="list4">
<p class="color3">较昨日+<span class="add_num3">110</span></p>
<p class="num num3 color3">0</p>
<div class="text">死亡人数</div>
</div>
<div class="list4">
<p class="color4">较昨日+<span class="add_num4">110</span></p>
<p class="num num4 color4">0</p>
<div class="text">治愈人数</div>
</div>
<div class="list4">
<p class="color5">较昨日+<span class="add_num5">110</span></p>
<p class="num num5 color5">0</p>
<div class="text">疑似病例</div>
</div>
</div>
<!-- map -->
<div class="map t_common">
<div class="map_tit tit_common">
<!-- <span class="tit_icon"></span> -->
<span class="tit_con">&nbsp;&nbsp;全国累计确诊</span>
</div>
<div class="map_con" id="map_echarts" style="width:100%;height:300px;">
</div>
</div>
<div class="map t_common">
<div class="map_tit tit_common">
<span class="tit_con">当前确诊人数最多的5个省份</span>
<div class="map_con" id="top5chart" style="width:100%;height:300px;"></div>
</div>
</div>
<div id="echarts1" style="width:100%;height:4rem;margin-bottom:0.4rem;"></div>
<div class="map t_common">
<div class="map_tit tit_common">
<span class="tit_con">全国无症状感染者分布</span>
<div class="map_con" id="asymptomaticLoc" style="width:100%;height:300px;"></div>
</div>
</div>
<div id="echarts2" style="width:100%;height:4rem;margin-bottom:0.4rem;"></div>
<!-- table -->
<!-- 全国表格 -->
<div class="china table_t t_common">
<div class="tit_common">
<!-- <span class="tit_icon"></span> -->
<span class="tit_con">&nbsp;&nbsp;全国数据统计</span>
</div>
</div>
<div class="china table_pro">
<div class="title">
<span class="t_area">地区</span>
<span class="t_confirm">确诊</span>
<span class="t_dead">死亡</span>
<span class="t_heal">治愈</span>
</div>
<ul class="content">
</ul>
</div>
<!-- 全球表格 -->
<div class="world table_t t_common">
<div class="tit_common">
<!-- <span class="tit_icon"></span> -->
<span class="tit_con">&nbsp;&nbsp;海外数据统计</span>
</div>
</div>
<div class="world table_pro">
<div class="title">
<span class="t_area">地区</span>
<span class="t_confirm">确诊</span>
<span class="t_dead">死亡</span>
<span class="t_heal">治愈</span>
</div>
<ul class="content">
</ul>
</div>
</div>
<!-- 国外疫情 -->
<div class="tabs_list dongtai">
<div class="main">
<ul class="cbp_tmtimeline">
<!-- 这里是最新动态 -->
</ul>
</div>
</div>
<!-- 防护知识 -->
<div class="tabs_list fhzs">
</div>
{% endblock%}
{% block mainscript %}
<script>
//在国内，国外疫情，防护知识间切换
console.log("+++++++++++++++++++++++++++++");
var ospan = document.querySelectorAll('.middle_con .wrap .tabs .tabs_wrap span');
console.log(ospan.length);
var num_op = 0;
var tabs_list = document.querySelectorAll('.middle_con .wrap .tabs_content .tabs_list');
console.log(tabs_list.length);
tabs_list[0].style.display = 'block';
for (var ii = 0; ii < ospan.length; ii++) {
console.log(ii);
ospan[ii].index = ii;
//一级标题：滑入事件
ospan[ii].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;
console.log(ii);
if(ii==0)
window.location.href="/";
if(ii==1)
window.location.href="/foreign";
if(ii==2)
window.location.href="/fanghu";
}
};
//绘制全国疫情地图
var dataList=[]
var myChart = echarts.init(document.getElementById('map_echarts'));
option = {
tooltip: {
formatter:function(params,ticket, callback){
return params.seriesName+'<br />'+params.name+'：'+params.value
}//数据格式化
},
visualMap: {
min: 0,
max: 100000,
left: 10,
bottom: 40,
itemWidth: 5, //图元的宽
itemHeight: 5, //图元的高
itemGap: 5, //两个图元之间的间隔距离
textStyle: {
fontSize: 9, //图元字体大小
},
pieces: [{
gt: 10000,
label: "> 10000",
color: "#7f1100"
}, {
gte: 1000,
lte: 10000,
label: "1000 - 10000",
color: "#ff5428"
}, {
gte: 500,
lt: 1000,
label: "500 - 1000",
color: "#ff8c71"
}, {
gt: 100,
lt: 500,
label: "100 - 500",
color: "#ffd768"
}, {
gt: 0,
lt: 100,
label: "0 - 100",
color: "rgb(253,235,207)"
}],
show: true
},
geo: {
map: 'china',
roam: false,//不开启缩放和平移
zoom:1.23,//视角缩放比例
label: {
normal: {
show: true,
fontSize:'10',
color: 'rgba(0,0,0,0.7)'
}
},
itemStyle: {
normal:{
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis:{
areaColor: '#F3B329',//鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series : [
{
name: '确诊人数',
type: 'map',
geoIndex: 0,
data:dataList
}
]
};
//绘制前5个确诊人数最多的省份
var top5chart=echarts.init(document.getElementById("top5chart"));
top5option={
title:{
text:'确诊人数最多5个省份',
subtext:'',
left:'center',
},
tooltip:{
trigger:'item',
formatter:'{a}<br/>{b}:{c}({d}%)',
},
legend:{
orient:'vertical',
left:'left',
data:[],
},
series:[
{
name:'访问来源',
type:'pie',
radius:'55%',
center:['50%','60%'],
data:[],
emphasis:{
itemStyle:{
shadowBlur:10,
shadowOffsetX:0,
shadowColor:'rgba(0,0,0,0.5)'
}
}
}
],
};
//绘制全国无症状感染者分布
var asymptomatic=echarts.init(document.getElementById("asymptomaticLoc"));
sympoption={
title:{
text:"无症状感染者分布",
left:'center',
},
xAxis:{
type:'category',
data:[]
},
yAxis:{
type:'value',
},
series:[{
data:[],
type:'bar',
showBackground:true,
backgroundStyle:{
color:'rgb(220,220,0.8)'
}
}]
};
$.ajax({
cache:false,
type:'POST',
async:false,
url:'/chinaSummary',
error:function(request){
alert('false');
},
success:function(results){
$("#nowtime").html(results.updateTime);
$(".num1").html(results.confirmed); //确诊病例
$(".add_num1").html(results.confirmedRelative); //新增确诊病例
$(".num2").html(results.curConfirm); //疑似病例
$(".add_num2").html(results.curConfirmRelative); //新增疑似病例
$(".num3").html(results.died); //死亡人数
$(".add_num3").html(results.diedRelative); //新增死亡人数
$(".num4").html(results.cured); //治愈人数
$(".add_num4").html(results.curedRelative); //新增治愈人数
$(".num5").html(results.suspect); //治愈人数
$(".add_num5").html(results.suspectRelative); //新增治愈人数
top5option.title.subtext=results.updateTime;
cityName=results.area;
proconfirmed=results.proconfirmed;
for(i=0;i<cityName.length;i++){
option.series[0].data.push({name:cityName[i],value:proconfirmed[i]});
}
top5province=results.top5province;
top5confirmed=results.top5confirmed;
for(i=0;i<top5province.length;i++){
top5option.series[0].data.push({name:top5province[i],value:top5confirmed[i]});
top5option.legend.data.push(top5province[i]);
}
asymptomaticNum=results.asymptomacNum;
asymptomaticArea=results.asymptomaticArea;
for(i=0;i<asymptomaticNum.length;i++){
sympoption.xAxis.data.push(asymptomaticArea[i]);
sympoption.series[0].data.push(asymptomaticNum[i]);
}
myChart.setOption(option);
top5chart.setOption(top5option);
asymptomatic.setOption(sympoption);
}
});
</script>
{% endblock %}

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

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>

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

@ -0,0 +1,338 @@
{% extends 'base1.html' %}
{% block title %}国外疫情{% endblock %}
{%block page%}
<!-- 国内疫情 -->
<div class="tabs_list gailan">
<!-- gl_tips -->
<p class="gl_tips">截止<span id="nowtime">2020-02-02 11:52</span>全国数据统计</p>
<!-- detail4 -->
<div class="detail4">
<div class="list4">
<p class="color1">较昨日+<span class="add_num1">110</span></p>
<p class="num num1 color1">0</p>
<div class="text">确诊病例</div>
</div>
<div class="list4">
<p class="color2">较昨日<span class="add_num2">110</span></p>
<p class="num num2 color2">0</p>
<div class="text">现存确诊</div>
</div>
<div class="list4">
<p class="color3">较昨日+<span class="add_num3">110</span></p>
<p class="num num3 color3">0</p>
<div class="text">死亡人数</div>
</div>
<div class="list4">
<p class="color4">较昨日+<span class="add_num4">110</span></p>
<p class="num num4 color4">0</p>
<div class="text">治愈人数</div>
</div>
<div class="list4">
<p class="color5">较昨日+<span class="add_num5">110</span></p>
<p class="num num5 color5">0</p>
<div class="text">疑似病例</div>
</div>
</div>
<!-- map -->
<div class="map t_common">
<div class="map_tit tit_common">
<!-- <span class="tit_icon"></span> -->
<span class="tit_con">&nbsp;&nbsp;全国累计确诊</span>
</div>
<div class="map_con" id="map_echarts" style="width:100%;height:300px;">
</div>
</div>
<div class="map t_common">
<div class="map_tit tit_common">
<span class="tit_con">当前确诊人数最多的5个省份</span>
<div class="map_con" id="top5chart" style="width:100%;height:300px;"></div>
</div>
</div>
<div id="echarts1" style="width:100%;height:4rem;margin-bottom:0.4rem;"></div>
<div class="map t_common">
<div class="map_tit tit_common">
<span class="tit_con">全国无症状感染者分布</span>
<div class="map_con" id="asymptomaticLoc" style="width:100%;height:300px;"></div>
</div>
</div>
<div id="echarts2" style="width:100%;height:4rem;margin-bottom:0.4rem;"></div>
<!-- table -->
<!-- 全国表格 -->
<div class="china table_t t_common">
<div class="tit_common">
<!-- <span class="tit_icon"></span> -->
<span class="tit_con">&nbsp;&nbsp;全国数据统计</span>
</div>
</div>
<div class="china table_pro">
<div class="title">
<span class="t_area">地区</span>
<span class="t_confirm">确诊</span>
<span class="t_dead">死亡</span>
<span class="t_heal">治愈</span>
</div>
<ul class="content">
</ul>
</div>
<!-- 全球表格 -->
<div class="world table_t t_common">
<div class="tit_common">
<!-- <span class="tit_icon"></span> -->
<span class="tit_con">&nbsp;&nbsp;海外数据统计</span>
</div>
</div>
<div class="world table_pro">
<div class="title">
<span class="t_area">地区</span>
<span class="t_confirm">确诊</span>
<span class="t_dead">死亡</span>
<span class="t_heal">治愈</span>
</div>
<ul class="content">
</ul>
</div>
</div>
<!-- 国外疫情 -->
<div class="tabs_list dongtai">
<div class="main">
<ul class="cbp_tmtimeline">
<!-- 这里是最新动态 -->
</ul>
</div>
</div>
<!-- 防护知识 -->
<div class="tabs_list fhzs">
</div>
{% endblock%}
{% block mainscript %}
<script>
//在国内，国外疫情，防护知识间切换
console.log("+++++++++++++++++++++++++++++");
var ospan = document.querySelectorAll('.middle_con .wrap .tabs .tabs_wrap span');
console.log(ospan.length);
var num_op = 0;
var tabs_list = document.querySelectorAll('.middle_con .wrap .tabs_content .tabs_list');
console.log(tabs_list.length);
tabs_list[0].style.display = 'block';
for (var i = 0; i < ospan.length; i++) {
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;
window.location.href="/foreign";
}
};
//绘制全国疫情地图
var dataList=[]
var myChart = echarts.init(document.getElementById('map_echarts'));
option = {
tooltip: {
formatter:function(params,ticket, callback){
return params.seriesName+'<br />'+params.name+'：'+params.value
}//数据格式化
},
visualMap: {
min: 0,
max: 100000,
left: 10,
bottom: 40,
itemWidth: 5, //图元的宽
itemHeight: 5, //图元的高
itemGap: 5, //两个图元之间的间隔距离
textStyle: {
fontSize: 9, //图元字体大小
},
pieces: [{
gt: 10000,
label: "> 10000",
color: "#7f1100"
}, {
gte: 1000,
lte: 10000,
label: "1000 - 10000",
color: "#ff5428"
}, {
gte: 500,
lt: 1000,
label: "500 - 1000",
color: "#ff8c71"
}, {
gt: 100,
lt: 500,
label: "100 - 500",
color: "#ffd768"
}, {
gt: 0,
lt: 100,
label: "0 - 100",
color: "rgb(253,235,207)"
}],
show: true
},
geo: {
map: 'china',
roam: false,//不开启缩放和平移
zoom:1.23,//视角缩放比例
label: {
normal: {
show: true,
fontSize:'10',
color: 'rgba(0,0,0,0.7)'
}
},
itemStyle: {
normal:{
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis:{
areaColor: '#F3B329',//鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series : [
{
name: '确诊人数',
type: 'map',
geoIndex: 0,
data:dataList
}
]
};
//绘制前5个确诊人数最多的省份
var top5chart=echarts.init(document.getElementById("top5chart"));
top5option={
title:{
text:'确诊人数最多5个省份',
subtext:'',
left:'center',
},
tooltip:{
trigger:'item',
formatter:'{a}<br/>{b}:{c}({d}%)',
},
legend:{
orient:'vertical',
left:'left',
data:[],
},
series:[
{
name:'访问来源',
type:'pie',
radius:'55%',
center:['50%','60%'],
data:[],
emphasis:{
itemStyle:{
shadowBlur:10,
shadowOffsetX:0,
shadowColor:'rgba(0,0,0,0.5)'
}
}
}
],
};
//绘制全国无症状感染者分布
var asymptomatic=echarts.init(document.getElementById("asymptomaticLoc"));
sympoption={
title:{
text:"无症状感染者分布",
left:'center',
},
xAxis:{
type:'category',
data:[]
},
yAxis:{
type:'value',
},
series:[{
data:[],
type:'bar',
showBackground:true,
backgroundStyle:{
color:'rgb(220,220,0.8)'
}
}]
};
$.ajax({
cache:false,
type:'POST',
async:false,
url:'/chinaSummary',
error:function(request){
alert('false');
},
success:function(results){
$("#nowtime").html(results.updateTime);
$(".num1").html(results.confirmed); //确诊病例
$(".add_num1").html(results.confirmedRelative); //新增确诊病例
$(".num2").html(results.curConfirm); //疑似病例
$(".add_num2").html(results.curConfirmRelative); //新增疑似病例
$(".num3").html(results.died); //死亡人数
$(".add_num3").html(results.diedRelative); //新增死亡人数
$(".num4").html(results.cured); //治愈人数
$(".add_num4").html(results.curedRelative); //新增治愈人数
$(".num5").html(results.suspect); //治愈人数
$(".add_num5").html(results.suspectRelative); //新增治愈人数
top5option.title.subtext=results.updateTime;
cityName=results.area;
proconfirmed=results.proconfirmed;
for(i=0;i<cityName.length;i++){
option.series[0].data.push({name:cityName[i],value:proconfirmed[i]});
}
top5province=results.top5province;
top5confirmed=results.top5confirmed;
for(i=0;i<top5province.length;i++){
top5option.series[0].data.push({name:top5province[i],value:top5confirmed[i]});
top5option.legend.data.push(top5province[i]);
}
asymptomaticNum=results.asymptomacNum;
asymptomaticArea=results.asymptomaticArea;
for(i=0;i<asymptomaticNum.length;i++){
sympoption.xAxis.data.push(asymptomaticArea[i]);
sympoption.series[0].data.push(asymptomaticNum[i]);
}
myChart.setOption(option);
top5chart.setOption(top5option);
asymptomatic.setOption(sympoption);
}
});
</script>
{% endblock %}

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

@ -29,13 +29,16 @@
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/china.js")}}'></script>
<script type="text/javascript",src=" {{url_for('static',filename='js/jquery-3.2.1.js')}}"></script>
</head> </head>
<body> <body>
<div id='container' class='container'> <div id='container' class='container'>
<div class="top"> <div class="top">
@ -61,17 +64,14 @@
<div class="tabs"> <div class="tabs">
<span class="tabs_wrap"> <span class="tabs_wrap">
<span class="sty">国内疫情</span> <span class="sty">国内疫情</span>
<span>国外疫情</span> <span >国外疫情</span>
<span>防护知识</span> <span>防护知识</span>
</span> </span>
</div> </div>
<div class="tabs_content"> <div class="tabs_content">
<!-- 国内疫情 -->
<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>
@ -140,36 +140,16 @@
<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>
</div> </div>
<ul class="content"> <ul class="content">
</ul> </ul>
</div> </div>
<!-- 全球表格 -->
<div class="world table_t t_common">
<div class="tit_common">
<!-- <span class="tit_icon"></span> -->
<span class="tit_con">&nbsp;&nbsp;海外数据统计</span>
</div>
</div>
<div class="world table_pro">
<div class="title">
<span class="t_area">地区</span>
<span class="t_confirm">确诊</span>
<span class="t_dead">死亡</span>
<span class="t_heal">治愈</span>
</div>
<ul class="content">
</ul>
</div>
</div> </div>
<!-- 国外疫情 -->
<div class="tabs_list dongtai"> <div class="tabs_list dongtai">
<div class="main"> <div class="main">
<ul class="cbp_tmtimeline"> <ul class="cbp_tmtimeline">
@ -177,33 +157,9 @@
</ul> </ul>
</div> </div>
</div> </div>
<!-- 防护知识 -->
<div class="tabs_list fhzs"> <div class="tabs_list fhzs">
<div class="china table_t t_common">
<div class="tit_common">
<!-- <span class="tit_icon"></span> -->
<span class="tit_con">&nbsp;&nbsp;患者特征与防护</span>
</div>
</div>
<!-- <div class="tit tit1 tit_common">患者特征与防护</div> -->
<div class="fhhz">
</div>
<div class="fhbl">
</div>
<div class="fhnl">
</div>
<div class="china table_t t_common">
<div class="tit_common">
</div>
</div>
<!-- <div class="tit tit tit_common">节后返岗如是说</div> -->
<div class="fhfg">
</div>
</div> </div>
</div> </div>
</div> </div>
@ -214,27 +170,32 @@
<script> <script>
//在国内，国外疫情，防护知识间切换
console.log("+++++++++++++++++++++++++++++");
var ospan = document.querySelectorAll('.middle_con .wrap .tabs .tabs_wrap span'); var ospan = document.querySelectorAll('.middle_con .wrap .tabs .tabs_wrap span');
console.log(ospan.length);
var num_op = 0; var num_op = 0;
var tabs_list = document.querySelectorAll('.middle_con .wrap div.tabs_content .tabs_list'); var tabs_list = document.querySelectorAll('.middle_con .wrap .tabs_content .tabs_list');
console.log(tabs_list.length);
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;
//一级标题：滑入事件 //一级标题：滑入事件
ospan[i].onclick = function () { ospan[i].onclick = function () {
//一级标题：style变化 //一级标题：style变化
ospan[num_op].className = ''; ospan[num_op].className = '';
this.className = 'sty'; this.className = 'sty';
//二级内容：block变化 //二级内容：block变化
tabs_list[num_op].style.display = ''; tabs_list[num_op].style.display = '';
tabs_list[this.index].style.display = 'block'; tabs_list[this.index].style.display = 'block';
num_op = this.index; num_op = this.index;
window.location.href="/foreign";
} }
}; };
//绘制全国疫情地图 //绘制全国疫情地图
var dataList=[] var dataList=[]
var myChart = echarts.init(document.getElementById('map_echarts')); var myChart = echarts.init(document.getElementById('map_echarts'));
@ -445,9 +406,6 @@ $.ajax({
</script> </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/jquery-3.2.1.js')}}"></script>

Write Preview
Loading…
Cancel
Save