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


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

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

    ⼆.作品展示

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


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

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


    三.结对讨论






    四.设计实现和功能图

    • 设计实现

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

    • 功能图

    五.代码说明

    核⼼内容分为主界⾯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强的⼀批,学习能⼒贼强,属实团队协作的坚实后盾。对发布的任务都有
      底⽓盘⼀盘。
  • 相关阅读:
    Svn如何使用,有什么作用?
    Unity脚本基础Day02
    unity设计模式-----责任链模式
    LitJson ---json的创建和解析
    Mesh编程——三角形,多边形,正方体,园形,圆环
    unity基础逻辑题
    unity——UI拖拽实现拼图
    unity:倒计时
    UGUI Toggle的监听事件绑定
    UnityGUI系统之InputField
  • 原文地址:https://www.cnblogs.com/fzutw/p/12505766.html
Copyright © 2020-2023  润新知