结对第二次作业——某次疫情统计可视化的实现

这个作业属于哪个课程	2020春S班
这个作业要求在哪⾥	作业要求
结对学号	221701311 221701318
这个作业的⽬标	结合寒假第⼆次作业的成果实现原型设计中的功能
其他参考⽂献	CSDN B站 博客园 简书

⼀.Github 仓库地址和代码规范链接

• GitHub仓库
• 代码规范链接（同Git仓库）

⼆.作品展示

主界⾯ 展示全国疫情信息概览

点击其中⼀个省份可以⾼亮看到感染信息并进⼊到该省详情⻚⾯

可以看到该省当⽇信息和确诊⼈数趋势

三.结对讨论

四.设计实现和功能图

• 设计实现

就是按照上次作业的原型进⾏设计，不过由于技术所限砍了⼀部分功能 = =

• 功能图

五.代码说明

核⼼内容分为主界⾯web视图和详情界⾯web视图

//主界⾯布局相关
 <div class="bigNumberPanel">
 <p class="bigNumberTitle">数据更新时间 2020-03-16</p>
 <ul class="bigNumberList">
 <li class="bigNumberItem">
 <span style="color: rgb(247, 76, 49);" class="number">25153</span>
 <span class="numberDesc">现存确诊</span>
 </li>
 <li class="bigNumberItem">
 <span style=" color: rgb(247,130,7);" class="number">522</span>
 <span class="numberDesc">现存疑似</span>
 </li>
 <li class="bigNumberItem">
 <span style="color:rgb(174,33,44)" class="number">5952</span>
 <span class="numberDesc">现存重症</span>
 </li>
 
 <li class="bigNumberItem">
 <span style="color:rgb(174,33,44)" class="number">80585</span>
 <span class="numberDesc">累计确认</span>
 </li>
 <li class="bigNumberItem">
 <span style="color:rgb(93,112,146)" class="number">3016</span>
 <span class="numberDesc">累计死亡</span>
 </li>
 <li class="bigNumberItem">
 <span style="color:rgb(40, 183,163)" class="number">52416</span>
 <span class="numberDesc">累计治愈</span>
 </li>
 </ul>
 </div>

//主界⾯地图 引⽤百度
let option = {
 title: {
 text: '实时疫情地图',
 textStyle: {
 color: 'red',
 fontWeight: 'bold'
 },
 subtext: '数据来⾃于百度',
 subtextStyle: {
 color: '#aaa',
 fontWeight: 'italic'
 },
 sublink: 'https://voice.baidu.com/act/newpneumonia/newpneumonia/',
 left: 'center',
 },
 geo: {
 show: true,
 map: 'china',
 aspectScale: 0.75,
 zoom: 1.25,
 selectedMode: 'multiple',
 label: {
 show: true,
 formatter: '{a}'
 },
 emphasis: {
 label: {
 show: true,
 },
 }
 },
 tooltip: {
 show: true,
 formatter: '{b}<br>确诊：{c}⼈'
 },
 visualMap: {
 show: true,
 type: 'piecewise',
 pieces: [
 {gt: 1000, label: '>1000⼈'},
 {gt: 100, lte: 999},
 {gt: 10, lte: 99},
 {lt: 10, label: '<10⼈'}
 ],
 formatter: '{value}⼈'
 },
 series: [
 {
 type: 'map',
 name: '实时疫情地图',
 coordinateSystem: 'geo',
 geoIndex: 0,
 data: data
 }
 ]
 };

//副界⾯表格图
var option = {
 tooltip: {},
 legend: {
 data: ['⽇期', '⼈数']
 },
 xAxis: {
 data: date
 },
 yAxis: {
 },
 series: [{
 type: 'line',
 smooth: true,
 data: datay,
 itemStyle: {
 normal: {
 color: '#4169E1'
 },
 }
 },],
 };
 //设置数据
 function setAllData(mapBoxEchart, link, city) {
 $.get(link,
 function (data, status) {
 var sure = 0;
 var inf = 0;
 var cure = 0;
 var dead = 0;
 for (var i = 0; i < data.newslist.length; i++) {
 if (data.newslist[i].provinceShortName == city) {
 sure += data.newslist[i].confirmedCount;
 inf += data.newslist[i].suspectedCount;
 cure += data.newslist[i].curedCount;
 dead += data.newslist[i].deadCount;
 }
 }
 document.getElementById("sure-label").innerHTML = sure;
 document.getElementById("inf-label").innerHTML = inf;
 document.getElementById("cure-label").innerHTML = cure;
 document.getElementById("dead-label").innerHTML = dead;
 });
 }

//⼀些业务逻辑 拆取字符串获得今天和前⼀天的数据
 function GetPrevDay(str) {
 var year = str.substring(0, 4);
 var month = str.substring(5, 7);
 var day = str.substring(8, 10);
 var today = new Date(year, month - 1, day);
 var yesterday_milliseconds = today.getTime() - 1000 * 60 * 60 * 24;
 var yesterday = new Date();
 yesterday.setTime(yesterday_milliseconds);
 var strYear = yesterday.getFullYear();
 var strDay = yesterday.getDate();
 var strMonth = yesterday.getMonth() + 1;
 if (strMonth < 10) {
 strMonth = "0" + strMonth;
 }
 if (strDay < 10) {
 strDay = "0" + strDay;
 }
 return strYear + "-" + strMonth + "-" + strDay;
 }
 function getToday() {
 var nowdate = new Date();
 var y = nowdate.getFullYear();
 var m = nowdate.getMonth() + 1;
 var d = nowdate.getDate();
 if (m < 10) {
 m = "0" + m;
 }
 if (d < 10) {
 d = "0" + d;
 }
 return y + '-' + m + '-' + d;
 }

六.⼼路历程与收获

• 221701311：这次作业对于⼤佬来说不难，但是对我这个菜⻦⽽⾔确实是个挑战。两个臭
  ⽪匠胜过半个诸葛亮，在和队友的合作之下，终于完成了⼀个稍微能看的成品。通过这次结
  对我深刻的认识到了我在Web开发上挖了⾮常⼤的坑，这个坑⼀定要抓紧补起来了，不然就
  会落后了！
• 221701318：这次作业对⼤佬来说不难但对我这个菜⻦来说挺有挑战，尤其是在github上合
  作开发。挑战同时也意味着收获，通过这次作业很加深Echar的学习，回顾了web的知识，
  get到⼀些新知识。感觉挺有意思的。

七.队友评价

• 221701311：tw⾮常顶，在我遇到问题的时候能够给予我许多帮助。
• 221701318：hp强的⼀批，学习能⼒贼强，属实团队协作的坚实后盾。对发布的任务都有
  底⽓盘⼀盘。