国内疫情可视化

master
yangxudongll 5 years ago
parent 982d73f6b7
commit 78f10caaca

@ -29,12 +29,13 @@ def chinasummary():
results=db.searchSummaryChina(nowtime) results=db.searchSummaryChina(nowtime)
results=results[0] results=results[0]
#获取各省份疫情数据 #获取各省份疫情数据
provinces=db. provinces=db.searchProvinceConfirmed(nowtime)
data=jsonify(curConfirm=results[1],curConfirmRelative=results[2], data=jsonify(curConfirm=results[1],curConfirmRelative=results[2],
confirmed=results[9],confirmedRelative=results[10], confirmed=results[9],confirmedRelative=results[10],
cured=results[13],curedRelative=results[14],died=results[15], cured=results[13],curedRelative=results[14],died=results[15],
diedRelative=results[16],updateTime=nowtime) diedRelative=results[16],updateTime=nowtime,area=[x[0] for x in provinces],
proconfirmed=[x[1] for x in provinces])
return data return data

@ -25,6 +25,10 @@
<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 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>
</head> </head>
@ -121,9 +125,14 @@
<!-- <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:6.5rem;"> <div class="map_con" id="map_echarts" style="width:100%;height:20rem;">
</div>
</div>
<div class="map t_common">
<div class="map_tit tit_common">
<span class="tit_con">当前确诊人数最多省份
</span>
<div class="map_con" id="maxprovince" style="width:100%;height:20rem;"></div>
</div> </div>
</div> </div>
@ -184,135 +193,6 @@
</div> </div>
<div class="tabs_list dongtai"> <div class="tabs_list dongtai">
<!-- gl_tips -->
<p class="gll_tips">截止<span id="currenttime">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>
<!-- analyze -->
<div class="analyze">
<div>
<img src="{{url_for('static',filename='images/list.png')}}" alt="" class="list_img">
<p>
<span>病毒:</span>
<span>新型冠状病毒 2019-nCoV</span>
</p>
</div>
<div>
<img src="{{url_for('static',filename='images/list.png')}}" alt="" class="list_img">
<p>
<span>传染源:</span>
<span>野生动物,可能为中华菊头蝠</span>
</p>
</div>
<div>
<img src="{{url_for('static',filename='images/list.png')}}" alt="" class="list_img">
<p>
<span>传播途径:</span>
<span>经呼吸道飞沫传播,亦可通过接触传播,存在粪-口传播可能性</span>
</p>
</div>
<div>
<img src="{{url_for('static',filename='images/list.png')}}" alt="" class="list_img">
<p>
<span>易感人群:</span>
<span>人群普遍易感。老年人及有基础疾病者感染后病情较重,儿童及婴幼儿也有发病</span>
</p>
</div>
<div>
<img src="{{url_for('static',filename='images/list.png')}}" alt="" class="list_img">
<p>
<span>潜伏期:</span>
<span>一般为 37 天,最长不超过 14 天,潜伏期内存在传染性</span>
</p>
</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_echart" style="width:100%;height:6.5rem;">
</div>
</div>
<!-- 全国疫情新增确诊/新增疑似趋势图 -->
<div id="echarts21" style="width:100%;height:4rem;margin-bottom:0.4rem;"></div>
<!-- 全国疫情累计确诊/疑似趋势图 -->
<div id="echarts22" style="width:100%;height:4rem;margin-bottom:0.4rem;"></div>
<!-- 全国疫情累计死亡/治愈趋势图 -->
<div id="echarts23" style="width:100%;height: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">
<!-- <li class="c_line">
<div class="line_first">
<span class="c_area" style="text-align:center;">全球</span>
<span class="c_confirm">20623</span>
<span class="c_dead">427</span>
<span class="c_heal">657</span>
</div>
</li> -->
</ul>
</div>
</div> </div>
<div class="tabs_list fhzs"> <div class="tabs_list fhzs">
@ -380,19 +260,51 @@ for (var i = 0; i < ospan.length; i++) {
} }
}; };
var dataList=[] var dataList=[]
var myChart = echarts.init(document.getElementById('main')); var myChart = echarts.init(document.getElementById('map_echarts'));
option = { option = {
tooltip: { tooltip: {
formatter:function(params,ticket, callback){ formatter:function(params,ticket, callback){
return params.seriesName+'<br />'+params.name+''+params.value return params.seriesName+'<br />'+params.name+''+params.value
}//数据格式化 }//数据格式化
}, },
visualMap: { visualMap: {
left: 'left', min: 0,
top: 'bottom', max: 100000,
text: ['高','低'],//取值范围的文字 left: 10,
show:true//图注 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: { geo: {
map: 'china', map: 'china',
roam: false,//不开启缩放和平移 roam: false,//不开启缩放和平移
@ -445,6 +357,12 @@ $.ajax({
$(".add_num3").html(results.diedRelative); //新增死亡人数 $(".add_num3").html(results.diedRelative); //新增死亡人数
$(".num4").html(results.cured); //治愈人数 $(".num4").html(results.cured); //治愈人数
$(".add_num4").html(results.curedRelative); //新增治愈人数 $(".add_num4").html(results.curedRelative); //新增治愈人数
cityName=results.area;
proconfirmed=results.proconfirmed;
for(i=0;i<cityName.length;i++){
option.series[0].data.push({name:cityName[i],value:proconfirmed[i]});
}
myChart.setOption(option);
} }

Loading…
Cancel
Save