|
|
|
|
@ -1,21 +1,94 @@
|
|
|
|
|
{% extends 'base1.html' %}
|
|
|
|
|
{% block title %}国外疫情{% endblock %}
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
|
|
|
|
{%block page%}
|
|
|
|
|
<!--如果是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'>
|
|
|
|
|
|
|
|
|
|
<!--当前页面的三要素-->
|
|
|
|
|
<title>国外实时疫情</title>
|
|
|
|
|
<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>
|
|
|
|
|
<script src="{{url_for('static',filename='js/world.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 >国内疫情</span>
|
|
|
|
|
<span class="sty">国外疫情</span>
|
|
|
|
|
<span>防护知识</span>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="tabs_content">
|
|
|
|
|
|
|
|
|
|
<!-- 国内疫情 -->
|
|
|
|
|
<div class="tabs_list dongtai">
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 国外疫情 -->
|
|
|
|
|
<div class="tabs_list gailan">
|
|
|
|
|
<!-- 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 -->
|
|
|
|
|
<div class="detail4">
|
|
|
|
|
<div class="list4">
|
|
|
|
|
<p class="color1">较昨日+<span class="add_num1">110</span></p>
|
|
|
|
|
<p class="color1">较昨日<span class="add_num1"></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="color2">较昨日+<span class="add_num2">110</span></p>
|
|
|
|
|
<p class="num num2 color2">0</p>
|
|
|
|
|
<div class="text">现存确诊</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -29,20 +102,15 @@
|
|
|
|
|
<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"> 全国累计确诊</span>
|
|
|
|
|
<span class="tit_con"> 累计确诊</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="map_con" id="map_echarts" style="width:100%;height:300px;">
|
|
|
|
|
<div class="map_con" id="map_echarts" style="width:100%;height:600px;">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="map t_common">
|
|
|
|
|
@ -66,57 +134,32 @@
|
|
|
|
|
<div class="china table_t t_common">
|
|
|
|
|
<div class="tit_common">
|
|
|
|
|
<!-- <span class="tit_icon"></span> -->
|
|
|
|
|
<span class="tit_con"> 全国数据统计</span>
|
|
|
|
|
<span class="tit_con"> 全球各国数据统计</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"> 海外数据统计</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>
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{% endblock%}
|
|
|
|
|
</div><!-- container结束 -->
|
|
|
|
|
|
|
|
|
|
{% block mainscript %}
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
//在国内，国外疫情，防护知识间切换
|
|
|
|
|
@ -133,206 +176,344 @@ for (var i = 0; i < ospan.length; 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";
|
|
|
|
|
window.location.href="/index";
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//绘制全国疫情地图
|
|
|
|
|
//绘制全世界疫情地图
|
|
|
|
|
var dataList=[]
|
|
|
|
|
var myChart = echarts.init(document.getElementById('map_echarts'));
|
|
|
|
|
option = {
|
|
|
|
|
title: {
|
|
|
|
|
text:'世界累计确诊图',
|
|
|
|
|
subtitle:'2020-08-10',
|
|
|
|
|
left: 'center',
|
|
|
|
|
top: 'top'
|
|
|
|
|
},
|
|
|
|
|
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)'
|
|
|
|
|
}
|
|
|
|
|
trigger: 'item',
|
|
|
|
|
transitionDuration: 0.2,
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
var value = params.value;
|
|
|
|
|
return "确诊人数："+value;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
series : [
|
|
|
|
|
dataRange:{
|
|
|
|
|
x:'left',
|
|
|
|
|
y:'bottom',
|
|
|
|
|
splitList:[
|
|
|
|
|
{start:10000000,label:'>1000000',color:'#990000'},
|
|
|
|
|
{start:1000000,end:10000000,label:'1000000-1000000',color:'#FF6600'},
|
|
|
|
|
{start:100000,end:1000000,label:'100000-1000000',color:'#FF6699'},
|
|
|
|
|
{start:10000,end:100000,label:'10000-100000',color:'#FF99CC'},
|
|
|
|
|
{start:1000,end:10000,label:'1000-10000',color:'#FFCC00'},
|
|
|
|
|
{start:100,end:1000,label:'100-1000',color:'#FFFF00'},
|
|
|
|
|
{start:0,end:100,label:'0-100',color:'#FFFFCC'},
|
|
|
|
|
],
|
|
|
|
|
textStyle:{
|
|
|
|
|
color:'#3899FF'
|
|
|
|
|
},
|
|
|
|
|
selectMode:'false'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '确诊人数',
|
|
|
|
|
name: 'World Population (2010)',
|
|
|
|
|
type: 'map',
|
|
|
|
|
geoIndex: 0,
|
|
|
|
|
data:dataList
|
|
|
|
|
mapType: 'world',
|
|
|
|
|
roam: true,
|
|
|
|
|
itemStyle:{
|
|
|
|
|
emphasis:{label:{show:true}}
|
|
|
|
|
},
|
|
|
|
|
status:"true",
|
|
|
|
|
nameMap: {
|
|
|
|
|
"Afghanistan": "阿富汗",
|
|
|
|
|
"Angola": "安哥拉",
|
|
|
|
|
"Albania": "阿尔巴尼亚",
|
|
|
|
|
"Algeria": "阿尔及利亚",
|
|
|
|
|
"Argentina": "阿根廷",
|
|
|
|
|
"Armenia": "亚美尼亚",
|
|
|
|
|
"Australia": "澳大利亚",
|
|
|
|
|
"Austria": "奥地利",
|
|
|
|
|
"Azerbaijan": "阿塞拜疆",
|
|
|
|
|
"Bahamas": "巴哈马",
|
|
|
|
|
"Bangladesh": "孟加拉国",
|
|
|
|
|
"Belgium": "比利时",
|
|
|
|
|
"Benin": "贝宁",
|
|
|
|
|
"Burkina Faso": "布基纳法索",
|
|
|
|
|
"Burundi": "布隆迪",
|
|
|
|
|
"Bulgaria": "保加利亚",
|
|
|
|
|
"Bosnia and Herz.": "波斯尼亚和黑塞哥维那",
|
|
|
|
|
"Belarus": "白俄罗斯",
|
|
|
|
|
"Belize": "伯利兹",
|
|
|
|
|
"Bermuda": "百慕大群岛",
|
|
|
|
|
"Bolivia": "玻利维亚",
|
|
|
|
|
"Brazil": "巴西",
|
|
|
|
|
"Brunei": "文莱",
|
|
|
|
|
"Bhutan": "不丹",
|
|
|
|
|
"Botswana": "博茨瓦纳",
|
|
|
|
|
"Cambodia": "柬埔寨",
|
|
|
|
|
"Cameroon": "喀麦隆",
|
|
|
|
|
"Canada": "加拿大",
|
|
|
|
|
"Central African Rep.": "中非共和国",
|
|
|
|
|
"Chad": "乍得",
|
|
|
|
|
"Chile": "智利",
|
|
|
|
|
"China": "中国",
|
|
|
|
|
"Colombia": "哥伦比亚",
|
|
|
|
|
"Congo": "刚果",
|
|
|
|
|
"Costa Rica": "哥斯达黎加",
|
|
|
|
|
"Côte d'Ivoire": "科特迪瓦",
|
|
|
|
|
"Croatia": "克罗地亚",
|
|
|
|
|
"Cuba": "古巴",
|
|
|
|
|
"Cyprus": "塞浦路斯",
|
|
|
|
|
"Czech Rep.": "捷克共和国",
|
|
|
|
|
"Dem. Rep. Korea": "韩国",
|
|
|
|
|
"Dem. Rep. Congo": "刚果（金）",
|
|
|
|
|
"Denmark": "丹麦",
|
|
|
|
|
"Djibouti": "吉布提",
|
|
|
|
|
"Dominican Rep.": "多米尼加共和国",
|
|
|
|
|
"Ecuador": "厄瓜多尔",
|
|
|
|
|
"Egypt": "埃及",
|
|
|
|
|
"El Salvador": "萨尔瓦多",
|
|
|
|
|
"Eq. Guinea": "赤道几内亚",
|
|
|
|
|
"Eritrea": "厄立特里亚",
|
|
|
|
|
"Estonia": "爱沙尼亚",
|
|
|
|
|
"Ethiopia": "埃塞俄比亚",
|
|
|
|
|
"Falkland Is.": "福克兰群岛",
|
|
|
|
|
"Fiji": "斐济",
|
|
|
|
|
"Finland": "芬兰",
|
|
|
|
|
"France": "法国",
|
|
|
|
|
"French Guiana": "法属圭亚那",
|
|
|
|
|
"Fr. S. Antarctic Lands": "法属南部领地",
|
|
|
|
|
"Gabon": "加蓬",
|
|
|
|
|
"Gambia": "冈比亚",
|
|
|
|
|
"Germany": "德国",
|
|
|
|
|
"Georgia": "佐治亚州",
|
|
|
|
|
"Ghana": "加纳",
|
|
|
|
|
"Greece": "希腊",
|
|
|
|
|
"Greenland": "格陵兰岛",
|
|
|
|
|
"Guatemala": "危地马拉",
|
|
|
|
|
"Guinea": "几内亚",
|
|
|
|
|
"Guinea-Bissau": "几内亚比绍",
|
|
|
|
|
"Guyana": "圭亚那",
|
|
|
|
|
"Haiti": "海地",
|
|
|
|
|
"Heard I. and McDonald Is.": "赫德岛和麦克唐纳群岛",
|
|
|
|
|
"Honduras": "洪都拉斯",
|
|
|
|
|
"Hungary": "匈牙利",
|
|
|
|
|
"Iceland": "冰岛",
|
|
|
|
|
"India": "印度",
|
|
|
|
|
"Indonesia": "印度尼西亚",
|
|
|
|
|
"Iran": "伊朗",
|
|
|
|
|
"Iraq": "伊拉克",
|
|
|
|
|
"Ireland": "爱尔兰",
|
|
|
|
|
"Israel": "以色列",
|
|
|
|
|
"Italy": "意大利",
|
|
|
|
|
"Ivory Coast": "象牙海岸",
|
|
|
|
|
"Jamaica": "牙买加",
|
|
|
|
|
"Japan": "日本",
|
|
|
|
|
"Jordan": "乔丹",
|
|
|
|
|
"Kashmir": "克什米尔",
|
|
|
|
|
"Kazakhstan": "哈萨克斯坦",
|
|
|
|
|
"Kenya": "肯尼亚",
|
|
|
|
|
"Kosovo": "科索沃",
|
|
|
|
|
"Kuwait": "科威特",
|
|
|
|
|
"Kyrgyzstan": "吉尔吉斯斯坦",
|
|
|
|
|
"Laos": "老挝",
|
|
|
|
|
"Lao PDR": "老挝人民民主共和国",
|
|
|
|
|
"Latvia": "拉脱维亚",
|
|
|
|
|
"Lebanon": "黎巴嫩",
|
|
|
|
|
"Lesotho": "莱索托",
|
|
|
|
|
"Liberia": "利比里亚",
|
|
|
|
|
"Libya": "利比亚",
|
|
|
|
|
"Lithuania": "立陶宛",
|
|
|
|
|
"Luxembourg": "卢森堡",
|
|
|
|
|
"Madagascar": "马达加斯加",
|
|
|
|
|
"Macedonia": "马其顿",
|
|
|
|
|
"Malawi": "马拉维",
|
|
|
|
|
"Malaysia": "马来西亚",
|
|
|
|
|
"Mali": "马里",
|
|
|
|
|
"Mauritania": "毛里塔尼亚",
|
|
|
|
|
"Mexico": "墨西哥",
|
|
|
|
|
"Moldova": "摩尔多瓦",
|
|
|
|
|
"Mongolia": "蒙古国",
|
|
|
|
|
"Montenegro": "黑山",
|
|
|
|
|
"Morocco": "摩洛哥",
|
|
|
|
|
"Mozambique": "莫桑比克",
|
|
|
|
|
"Myanmar": "缅甸",
|
|
|
|
|
"Namibia": "纳米比亚",
|
|
|
|
|
"Netherlands": "荷兰",
|
|
|
|
|
"New Caledonia": "新喀里多尼亚",
|
|
|
|
|
"New Zealand": "新西兰",
|
|
|
|
|
"Nepal": "尼泊尔",
|
|
|
|
|
"Nicaragua": "尼加拉瓜",
|
|
|
|
|
"Niger": "尼日尔",
|
|
|
|
|
"Nigeria": "尼日利亚",
|
|
|
|
|
"Korea": "朝鲜",
|
|
|
|
|
"Northern Cyprus": "北塞浦路斯",
|
|
|
|
|
"Norway": "挪威",
|
|
|
|
|
"Oman": "阿曼",
|
|
|
|
|
"Pakistan": "巴基斯坦",
|
|
|
|
|
"Panama": "巴拿马",
|
|
|
|
|
"Papua New Guinea": "巴布亚新几内亚",
|
|
|
|
|
"Paraguay": "巴拉圭",
|
|
|
|
|
"Peru": "秘鲁",
|
|
|
|
|
"Republic of the Congo": "刚果共和国",
|
|
|
|
|
"Philippines": "菲律宾",
|
|
|
|
|
"Poland": "波兰",
|
|
|
|
|
"Portugal": "葡萄牙",
|
|
|
|
|
"Puerto Rico": "波多黎各",
|
|
|
|
|
"Qatar": "卡塔尔",
|
|
|
|
|
"Republic of Serbia": "塞尔维亚共和国",
|
|
|
|
|
"Romania": "罗马尼亚",
|
|
|
|
|
"Russia": "俄罗斯",
|
|
|
|
|
"Rwanda": "卢旺达",
|
|
|
|
|
"Samoa": "萨摩亚",
|
|
|
|
|
"Saudi Arabia": "沙特阿拉伯",
|
|
|
|
|
"Senegal": "塞内加尔",
|
|
|
|
|
"Serbia": "塞尔维亚",
|
|
|
|
|
"Sierra Leone": "塞拉利昂",
|
|
|
|
|
"Slovakia": "斯洛伐克",
|
|
|
|
|
"Slovenia": "斯洛文尼亚",
|
|
|
|
|
"Solomon Is.": "所罗门群岛",
|
|
|
|
|
"Somaliland": "索马里兰",
|
|
|
|
|
"Somalia": "索马里",
|
|
|
|
|
"South Africa": "南非",
|
|
|
|
|
"S. Geo. and S. Sandw. Is.": "南乔治亚和南桑德威奇群岛",
|
|
|
|
|
"S. Sudan": "南苏丹",
|
|
|
|
|
"Spain": "西班牙",
|
|
|
|
|
"Sri Lanka": "斯里兰卡",
|
|
|
|
|
"Sudan": "苏丹",
|
|
|
|
|
"Suriname": "苏里南",
|
|
|
|
|
"Swaziland": "斯威士兰",
|
|
|
|
|
"Sweden": "瑞典",
|
|
|
|
|
"Switzerland": "瑞士",
|
|
|
|
|
"Syria": "叙利亚",
|
|
|
|
|
"Tajikistan": "塔吉克斯坦",
|
|
|
|
|
"Tanzania": "坦桑尼亚",
|
|
|
|
|
"Thailand": "泰国",
|
|
|
|
|
"Timor-Leste": "东帝汶",
|
|
|
|
|
"Togo": "多哥",
|
|
|
|
|
"Trinidad and Tobago": "特立尼达和多巴哥",
|
|
|
|
|
"Tunisia": "突尼斯",
|
|
|
|
|
"Turkey": "土耳其",
|
|
|
|
|
"Turkmenistan": "土库曼斯坦",
|
|
|
|
|
"Uganda": "乌干达",
|
|
|
|
|
"Ukraine": "乌克兰",
|
|
|
|
|
"United Arab Emirates": "阿拉伯联合酋长国",
|
|
|
|
|
"United Kingdom": "大不列颠联合王国",
|
|
|
|
|
"United Republic of Tanzania": "坦桑尼亚联合共和国",
|
|
|
|
|
"United States": "美国",
|
|
|
|
|
"United States of America": "美利坚合众国",
|
|
|
|
|
"Uruguay": "乌拉圭",
|
|
|
|
|
"Uzbekistan": "乌兹别克斯坦",
|
|
|
|
|
"Vanuatu": "瓦努阿图",
|
|
|
|
|
"Venezuela": "委内瑞拉",
|
|
|
|
|
"Vietnam": "越南",
|
|
|
|
|
"West Bank": "西岸",
|
|
|
|
|
"W. Sahara": "西撒哈拉",
|
|
|
|
|
"Yemen": "也门",
|
|
|
|
|
"Zambia": "赞比亚",
|
|
|
|
|
"Zimbabwe": "津巴布韦"
|
|
|
|
|
},
|
|
|
|
|
data: [],
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
//绘制前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)'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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({
|
|
|
|
|
cache:false,
|
|
|
|
|
type:'POST',
|
|
|
|
|
async:false,
|
|
|
|
|
url:'/chinaSummary',
|
|
|
|
|
url:'/globalInfo',
|
|
|
|
|
data:[],
|
|
|
|
|
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]);
|
|
|
|
|
}
|
|
|
|
|
$(".num1").html(results.TotalConfirmed); //确诊病例
|
|
|
|
|
$(".add_num1").html(results.TotalcurConfirmRelative);//新增
|
|
|
|
|
$(".num2").html(results.TotalCurConfirm); //现存确诊
|
|
|
|
|
$(".add_num2").html(results.TotalconfirmRelative); //新增
|
|
|
|
|
$(".num3").html(results.TotalDied); //死亡人数
|
|
|
|
|
$(".add_num3").html(results.TotalDiedRelative); //新增死亡人数
|
|
|
|
|
$(".num4").html(results.TotalCrued); //治愈人数
|
|
|
|
|
$(".add_num4").html(results.TotalCruedRelative); //新增治愈人数
|
|
|
|
|
|
|
|
|
|
myChart.setOption(option);
|
|
|
|
|
top5chart.setOption(top5option);
|
|
|
|
|
asymptomatic.setOption(sympoption);
|
|
|
|
|
confirmed=results.confirmed;
|
|
|
|
|
foreignName=results.country;
|
|
|
|
|
console.log(confirmed);
|
|
|
|
|
console.log(foreignName);
|
|
|
|
|
for(i=0;i<confirmed.length;i++){
|
|
|
|
|
option.series[0].data.push({name:foreignName[i],value:confirmed[i]});
|
|
|
|
|
}
|
|
|
|
|
//获取各国疫情信息进行表格填充
|
|
|
|
|
curConfirmedRelative=results.confirmedRelative;
|
|
|
|
|
died=results.died;
|
|
|
|
|
$(".china.table_pro .content").html(eachchina(foreignName,confirmed,curConfirmedRelative,died));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
myChart.setOption(option);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!-- 引入响应式布局的rem根标签 -->
|
|
|
|
|
<script>
|
|
|
|
|
(function(win,doc){
|
|
|
|
|
var docEl = doc.documentElement || document.body;//获取HTML标签
|
|
|
|
|
var container = doc.getElementById('container');//container元素
|
|
|
|
|
//判断是移动端设备还是PC,移动 就采用'orientationchange',横竖屏事件，PC端就采用onresize，窗口改变时间
|
|
|
|
|
var resize = 'onorientationchange' in win ? 'orientationchange':'resize';
|
|
|
|
|
function rem(){
|
|
|
|
|
docEl.style.fontSize= 100*(container.clientWidth/750)+'px';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//监听'DOMContent事件:DOM加载完成执行,如果DOMContent事件，那么执行rem函数
|
|
|
|
|
doc.addEventListener('DOMContentLoaded',rem,false);
|
|
|
|
|
|
|
|
|
|
//win下监听resize事件,如果resize事件，那么执行rem函数
|
|
|
|
|
win.addEventListener(resize,rem,false);
|
|
|
|
|
})(window,document);
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{% endblock %}
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
