结对第二次作业——某次疫情统计可视化的实现
| 这个作业属于哪个课程 | 班级链接 |
|---|---|
| 结对学号 | 221701111,221701130 |
| 这个作业要求在哪里 | 结对第二次作业——某次疫情统计可视化的实现 |
| 这个作业的目标 | <某次疫情统计可视化的实现> |
| 作业正文 | https://www.cnblogs.com/lxlfz/p/12490477.html |
| 其他参考文献 | echart文档 layui文档 |
一、Github 仓库地址和代码规范链接
- Github仓库地址：https://github.com/laishy/InfectStatisticWeb
- 代码规范链接：https://github.com/laishy/InfectStatisticWeb/blob/master/codestyle.md
二、成品演示
-
打开页面后就能看到全国现存确诊人数的大致分布情况，并在地图上方统计了全国现有确诊、累计确诊、累计治愈、累计死亡四项数据的具体值，当光标移动到某个省份区域上方时会显示该省的现存确诊人数。
-
点击左上角的【累计确诊】按钮后页面会跳转值全国累计确诊人数的分布图，具体功能与全国现存确诊人数分布图一致。
-
点击具体省份后会跳转到一个统计该省份疫情趋势的页面，该页面以折线图的方式展示了本省的新增确诊、累计确诊、累计治愈、累计死亡四个数据，点击折线图上方的选项可以让某一项数据在折线图中不再显示：
三、结对讨论过程描述
- 由于上一次我们在其他同学提交的作业中学习到了考验使用echarts来实现全国确诊人数的分布地图，因此这一次我们比较快地制作出了一个大致的模型出来。
- 因为水平有限，虽然我们知道可以使用echarts前端表来实现全国确诊人数的分布地图，但是我们一开始并不知道要怎么实现点击省份区域后跳转至该省份详细数据页面这一功能，因为时间关系，我们认为学习框架可能时间不一定够，于是打算用最简单的方法--给每个省份设置一个跳转链接，分别单独制作各省份的详细数据统计页面来实现跳转，这一方法工作量大，一般是不推荐的，所以我们还需要在后续继续学习其他方法来实现动态跳转页面。
- 在确立了这一方法后我们开始学习制作折线图：
- 由于我们不会爬虫技术，所以只能做出静态的统计图页面来，因此需要自己输入数据（后来由于考虑到助教所给的数据较旧，因此并未使用该数据，而是选择使用开发当日的最新数据）：
- 之后我们就开始制作具体的跳转页面，先做一个模板出来看看效果
- 制作完跳转页面后向队友确认一下最终效果
- 做好之后我们又发现地图最上方的四个数据统计忘记做了，于是又开始补上这一功能
- 最后终于完成整个地图
四、描述设计实现过程
221701111-前端
- 下载并学习了echarts的使用方法并制作出了全国确诊人数分布的模型。
- 学习了layui框架并添加了具体数值统计图表功能。
221701130-后端
- 实现请求交互功能。
- 编写各省具体数据并以折线图的方式呈现出来。
功能结构图
五、关键代码
-
三个配置文件，也说明本项目是以这三个配置为基础设计的。首先一开始变把项目现有确诊首页部分先分成了几个部分来开发，分别是进行数据总数统计的表格、按钮部分、地图部分、点击显示省份具体情况部分、省份具体情况部分。然后根据项目确诊首页再编写一个累计确诊html，结构编码类似。
`<script src="js/echarts.js"></script> <!--配置好中国地图文件--> <script src="js/china.js"></script> <!--配置好layui框架文件--> <script src="layui/layui.js"></script> <link rel="stylesheet" type="text/css" href="layui/css/layui.css" />` -
表格部分:由于技术不到位，只能选择最最最简单的方法手动在html编码过程中填写相应数据，数据都是事先去到相关网站进行统计后记录下来的.
`<table class="layui-table"> <colgroup> <col width="200"> <col width="200"> <col width="200"> <col width="200"> </colgroup> <thead> <tr> <th>现有确诊(更新至2020.3.10)</th> <th>累计确诊(更新至2020.3.10)</th> <th>累计治愈(更新至2020.3.10)</th> <th>累计死亡(更新至2020.3.10)</th> </tr> </thead> <tbody> <tr> <td>16140</td> <td>80967</td> <td>61665</td> <td>3612</td> </tr> </tbody> </table>`
使用了layui框架中关于表格部分的插件，因为在多种框架中，layui框架的插件让我们比较满意，而且用起来也是非常的简单，通过构建table，类型选择layui-table，在其中先设置好表格中表头各个属性的宽度，即colgroup中设置的宽度，然后再设置表头属性的名字，最后根据表头设计好相应的表格，填入相应的数据
-
按钮部分:设置了按钮来实现地图中现有确诊和累计确诊数据显示的转换，转换是通过html之间的跳转来进行实现的。
`<div class="layui-main layui-btn-group"> <a href="index.html"> <button type="button" class="layui-btn layui-btn-normal">现有确诊</button> </a> <a href="leiji.html"> <button type="button" class="layui-btn layui-btn-normal">累计确诊</button> </a> </div>
`
使用了layui框架中按钮的插件，选择的是layui-btn-group类型，这个颜色看起来更加的舒服。然后通过a标签事先链接好现有确诊和累计确诊两个html文件，附加上button类型进而实现页面的跳转。
-
地图部分:使用了echart技术进行地图的设计，因为echart具有非常强大的前端图表设计，它能够让我们轻松的设计出我们想要的图表。
`<div class="layui-main" id="main" style="width: 800px; height:600px;" align="center"></div> <script type="text/javascript"> var dataList = [{ name: "南海诸岛", value: 0 }, { name: '北京', value: 101 }, { name: '天津', value: 2 }, { name: '上海', value: 21 }, { name: '重庆', value: 21 }, { name: '河北', value: 5 }, { name: '河南', value: 2 }, { name: '云南', value: 2 }, { name: '辽宁', value: 13 }, { name: '黑龙江', value: 33 }, { name: '湖南', value: 19 }, { name: '安徽', value: 0 }, { name: '山东', value: 28 }, { name: '新疆', value: 0 }, { name: '江苏', value: 4 }, { name: '浙江', value: 19 }, { name: '江西', value: 2 }, { name: '湖北', value: 15593 }, { name: '广西', value: 12 }, { name: '甘肃', value: 35 }, { name: '山西', value: 2 }, { name: '内蒙古', value: 3 }, { name: '陕西', value: 12 }, { name: '吉林', value: 1 }, { name: '福建', value: 0 }, { name: '贵州', value: 11 }, { name: '广东', value: 66 }, { name: '青海', value: 0 }, { name: '西藏', value: 0 }, { name: '四川', value: 51 }, { name: '宁夏', value: 3 }, { name: '海南', value: 3 }, { name: '台湾', value: 30 }, { name: '香港', value: 58 }, { name: '澳门', value: 0 } ] var myChart = echarts.init(document.getElementById('main')); option = { title: { text: '全国现有确诊病例：' }, tooltip: { formatter: function(params, ticket, callback) { return params.seriesName + '<br />' + params.name + '：' + params.value } //数据格式化 }, visualMap: { type: 'piecewise', pieces: [{ gt: 10000 }, { gt: 1000, lte: 9999 }, { gt: 100, lte: 999 }, { gt: 10, lte: 99 }, { gt: 0, lte: 10 }, ], inRange: { color: ['#ffcfc3', '#eda595', '#d5462a', '#a8352e', '#6a211d'] //取值范围的颜色 }, 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 }] };`
对爬取方面的知识还没有能够好好理解，在设计的过程中屡屡碰壁，最终只能放弃，选择使用最简单直接的方法，事先把相关数据存储在html当中，然后展示于地图上。中国地图使用了china.js文件来进行配置，通过把数据存放于datalist中，最后调用相关函数进行显示，并设计了数据颜色分段显示。
- 点击显示省份具体情况部分:同样是使用了html之间的跳转来实现点击地图省份显示该省份具体情况。
`myChart.on('click', function(params) {
var province = params.name; //获取选中省市的省市名称
switch (province) {
case '新疆':
location.href = 'provinceData/xinjiang.html'; //测试效果：选中新疆并触发点击事件后跳转到百度首页
break;
case '西藏':
location.href = 'provinceData/xizang.html';
break;
case '云南':
location.href = 'provinceData/yunnan.html';
break;
case '广西':
location.href = 'provinceData/guangxi.html';
break;
case '广东':
location.href = 'provinceData/guangdong.html';
break;
case '海南':
location.href = 'provinceData/hainan.html';
break;
case '澳门':
location.href = 'provinceData/aomen.html';
break;
case '香港':
location.href = 'provinceData/xianggang.html';
break;
case '台湾':
location.href = 'provinceData/taiwan.html';
break;
case '福建':
location.href = 'provinceData/fujian.html';
break;
case '浙江':
location.href = 'provinceData/zhejiang.html';
break;
case '上海':
location.href = 'provinceData/shanghai.html';
break;
case '江苏':
location.href = 'provinceData/jiangsu.html';
break;
case '山东':
location.href = 'provinceData/shandong.html';
break;
case '天津':
location.href = 'provinceData/tianjin.html';
break;
case '北京':
location.href = 'provinceData/beijing.html';
break;
case '辽宁':
location.href = 'provinceData/liaoning.html';
break;
case '吉林':
location.href = 'provinceData/jilin.html';
break;
case '黑龙江':
location.href = 'provinceData/heilongjiang.html';
break;
case '内蒙古':
location.href = 'provinceData/neimenggu.html';
break;
case '宁夏':
location.href = 'provinceData/ningxia.html';
break;
case '青海':
location.href = 'provinceData/qinghai.html';
break;
case '甘肃':
location.href = 'provinceData/gansu.html';
break;
case '四川':
location.href = 'provinceData/sichuan.html';
break;
case '重庆':
location.href = 'provinceData/chongqing.html';
break;
case '贵州':
location.href = 'provinceData/guizhou.html';
break;
case '湖南':
location.href = 'provinceData/hunan.html';
break;
case '湖北':
location.href = 'provinceData/hubei.html';
break;
case '河南':
location.href = 'provinceData/henan.html';
break;
case '陕西':
location.href = 'provinceData/shanxi(zuo).html';
break;
case '山西':
location.href = 'provinceData/shanxi.html';
break;
case '河北':
location.href = 'provinceData/hebei.html';
break;
case '安徽':
location.href = 'provinceData/anhui.html';
break;
default:
break;
}
});`
在给地图附加鼠标点击时间是，抓取相关参数，然后让参数名字进行匹配跳转到相应省份具体情况的html，每个省份的html写法都是差不多的。
-
省份具体情况部分:该部分编码于首页编码类似，只不过在表格的基础上，只有折线图显示。
`
`现有确诊(更新至2020.3.10) 累计确诊(更新至2020.3.10) 累计治愈(更新至2020.3.10) 累计死亡(更新至2020.3.10) 15593 67773 49134 3046 <!-- 为ECharts准备一个具备大小（宽高）的Dom --> `<div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 myChart.setOption({ title: { text: '湖北省疫情趋势' }, tooltip: { trigger: 'axis' }, legend: { data:['新增确诊','累计确诊','累计治愈','累计死亡'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ["2.26","2.27","2.28","2.29","3.1","3.2","3.3","3.4","3.5","3.6","3.7","3.8","3.9","3.10"] }, yAxis: { type: 'value' }, series: [ { name:'新增确诊', type:'line', stack: '总量', data:["409","318","423","570","196","114","115","134","126","74","41","36","17","13"] }, { name:'累计确诊', type:'line', stack: '总量', data:["65596","65914","66337","66907","67103","67217","67332","67466","67592","67666","67707","67723","67760","67773"] }, { name:'累计治愈', type:'line', stack: '总量', data:["23200","26403","28895","31187","33757","36167","38556","40479","41966","43486","45011","46433","47585","49056"] }, { name:'累计死亡', type:'line', stack: '总量', data:["2641","2682","2727","2761","2803","2834","2871","2902","2931","2959","2986","3007","3024","3045"] } ] });`折线图显示也是通过事先在省份相关html中存放号相关数据，然后通过echat进行相关图表的转换进行相应的显示，总共有四条折线，分别对应现有确诊、累计确诊、累计治愈、累计死亡的趋势数据
六、《构建之法阅读心得》、心路历程和收获及对队友的评价
-
《构建之法》第四章讲述的是两人合作，也是我们这次作业的实施方式，说实话，我一直都知道软件项目基本都是通过团队合作开发来达到目的的，想过多人，但没想过还有一种专门的结对合作方式，因为在我看来，其实两人和一人的区别不是很大，只有多几个人，形成一个小团队才是我认为的高效团队开发，而经过《构建之法》中的学习，以及这两次结对作业的合作，让我理解得更深入了。结对编程让我在设计代码得时候能保证代码更高得质量，解决问题得能力也越强，而两人结对也相对的没有那么的拘束，更加的自然。同时，对于代码方面的各种复审修改也更加的高效，我们互相学习，互相反馈，一起在进步。
-
《构建之法》第五章讲述的则是团队和流程，其实也不难看出，软件项目通过团队来进行合作开发真的非常的重要，但团队的开发也不是一时兴起的，而是需要专门的知识结构来进行组建，这样的团队才是最为高效的，遵循合适自己团队的模式以及适合开发相关项目的模型，达到更好的效果。
-
221701111刘晓龙：对于队友的评价，那当然是满意了，经过这两次的合作，我们的默契越来越好，了解各自的优缺点，在开发的过程中互相弥补，效率也高得多，也希望我们以后的合作能够更多，一起进步。
-
221701130林泰来：其实在上一次制作数据可视化模型的时候就大概知道了使用echarts可以做出全国确诊人数的分布图，因此一开始并不觉的这次作业图表复杂。但是对于如何实现页面跳转功能来动态跳转至各省份的详细页面统计还是没有多少头绪，在经过一番思索后我们选择使用分布制作统计网页的方式来实现跳转。但这一方式最大的一个弊端就是工程量大，且数据为静态的，非常不适合在将来工作中进行开发，但出于目前水平有限的原因，我们目前只能选择这种方式。这件事让我意识到了自己存在这么多不足，接下来要开始努力学习来完善在这部分不足了。队友是个比较靠谱的人，虽然由于疫情原因在没有见面的情况下交流比较困难，但是最终还是比较顺利地解决了问题。
