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

这个作业属于哪个课程	2020春S班|(福州大学)
这个作业要求在哪里	结对第二次作业——某次疫情统计可视化的实现
结对学号	221600428 221701321
这个作业的目标	采用web技术来实现原型中的功能。
作业正文	结对第二次作业——某次疫情统计可视化的实现
其他参考文献	...

链接相关

GitHub仓库地址
代码规范链接

成品展示

功能1：实现通过地图的形式来直观显示疫情的大致分布情况，还可以查看具体省份的疫情统计情况

功能2：点击某个省份显示该省疫情的具体情况

结对过程

和队友讨论了一下分工，一人实现一个模块，过程中一起讨论了各自遇到的困难。

设计实现过程

主要分为三大模块：

• 全国地图
• 省份信息
• 数据获取

代码说明

 //按钮命令
function getType(obj) {
	if (obj == 1) {
		document.getElementById('newS').style.backgroundColor = '#ffff99';
		document.getElementById('allS').style.backgroundColor = '#00ff80';
		document.getElementById('allDaC').style.backgroundColor = '#00ff80';
		type = "新增确诊趋势";
		data = "新增确诊";
		show = data1;
		showline();
	} else if (obj == 2) {
		document.getElementById('allS').style.backgroundColor = '#ffff99';
		document.getElementById('newS').style.backgroundColor = '#00ff80';
		document.getElementById('allDaC').style.backgroundColor = '#00ff80';
		type = "累计确诊趋势";
		data = "累计确诊";
		show = data2;
		showline();
	} else if (obj == 3) {
		document.getElementById('allDaC').style.backgroundColor = '#ffff99';
		document.getElementById('newS').style.backgroundColor = '#00ff80';
		document.getElementById('allS').style.backgroundColor = '#00ff80';
		type = "累计治愈/死亡";
		data = "治愈/死亡";
		show = data3;
		showline1();
	} else {
	}
}

这段代码用于判断省份具体信息里的趋势图选择

function showline() {
	// 指定图标的配置和数据
	var option = {
		title : {
			text : type
		},
		tooltip : {
			// 开启tips框框
			trigger : 'axis',
		// 刻度跟随鼠标显示
		// axisPointer: {type: 'cross'}
		},
		legend : {
			data : [ data ]
		},
		xAxis : [ {
			type : 'category',
			axisTick : {
				alignWithLabel : true
			},
			splitLine : {
				show : false
			},
			axisLine : {
				onZero : false,
				lineStyle : {
					color : '#ddd',
					width : '90%'
				}
			},
			data : cdate,
			axisPointer : {
				label : {}
			},
			axisLabel : {
				interval : 0
			},
		} ],
		yAxis : {},
		series : [ {
			name : data,
			type : 'line',
			areaStyle : {
				normal : {}
			},
			data : show,
		} ]
	};
	// 初始化echarts实例
	var myChart = echarts.init(document.getElementById('line'));

	// 使用制定的配置项和数据显示图表
	myChart.setOption(option);
}

这段代码用于折线图显示

function getDate() {
	var t = new Date();
	var dd = t.getDate() - 1;
	var mm = t.getMonth() + 1;
	var yy = t.getFullYear();
	var newDay = new Date(yy, mm, (dd - 10));
	var m = t.getMonth() + 1; // 获取当前月份(0-11,0代表1月)
	var d = t.getDate() - 1; // 获取当前日(1-31)
	for (var i = 10; i >= 0; i--) {
		dd = d;
		mm = m;
		if (d != 0) {
			cdate[i] = m + '.' + d;
			if (m < 10) {
				mm = '0' + mm;
			}
			if (d < 10) {
				dd = '0' + dd;
			}
			sdate[i] = yy + "-" + mm + "-" + dd;
		} else {
			d = newDay.getDate() + i + 1;
			m -= 1;
			cdate[i] = m + '.' + d;
			if (m < 10) {
				mm = '0' + mm;
			}
			if (d < 10) {
				dd = '0' + dd;
			}
			sdate[i] = yy + "-" + mm + "-" + dd;
		}
		d -= 1;
	}
}

获取时间

function getData() {
	getDate();
	var pname = document.getElementById('pro').innerText;
	var apikey = '183104d863feb9f2a5c2baa350b12b4d';
	var url = 'http://api.tianapi.com/txapi/ncovcity/index?key=' + apikey;
	console.log(url);
	$(document)
			.ready(
					function() {
						$
								.get(
										url,
										function(data, status) {
											var temp = new Array();
											$('#result').append(
													JSON.stringify(data));
											var pname = document
													.getElementById('pro').innerText;
											for (var i = 0; i < data.newslist.length; i++) {
												var str = data.newslist[i].provinceShortName;
												console.log(str);
												if (str == pname) {
													document
															.getElementById('s21').innerHTML = data.newslist[i].currentConfirmedCount;
													document
															.getElementById('s22').innerHTML = data.newslist[i].confirmedCount;
													document
															.getElementById('s23').innerHTML = data.newslist[i].curedCount;
													document
															.getElementById('s24').innerHTML = data.newslist[i].deadCount;
												}
											}
										});
					});
}

获取数据

心路历程与收获&评价结对队友

心路历程与收获

​221701321：怎么说呢，第二次结对合作，刚拿到任务时以为蛮轻松的（没错我又大意了），但是我眼瞎了连任务都没看清楚，还需要有日期选择（最后一晚再打博客的我刚得知不久），代码实现过程中前端部分 借助echarts实现比较简单，而数据部分却让人抓瞎，一开始想着就去爬网站数据吧，找了百度的实时疫情数据网页，爬下来发现没有关键数据，由于第一次爬网站，经验不足，又因时间缘故放弃爬网站，转而采用api接口方式获取数据，经历了js、Java、php等方式之后终于用js获取到了信息，但是！！！由于需要每日疫情数据进行比较得出趋势图，才明白免费api接口的缺点——10次/分钟的调用频率，而获取数据只能使用参数一次次获取近几日的数据，而且需要将接口获取的数据保存至数组中，但是又陷入了我的盲区，依旧不得解决，最终趋势图数据只能采用写死方法。

最近一周各科作业集中布置，以及周日的实践——可以说是把我按在地上摩擦了。

我的心情大概如下图所示

不管怎么说，这次过程中认识到了自己最大的敌人——拖延症。令人头疼，慢慢想下如何解决吧（希望毕业前可以改善）
221600428：这次结对作业遇到了挺多困难的，一开始没有重视，再加上一些突发事件，导致实际完成的时间较少，功能不够完善。收获是又学习到了一些新的知识，又丰富了自我。

评价结对队友

221701321：在经历过一次合作之后显然更默契一点，各司其职，共同尽力完成任务，还是很棒的。
221600428：队友耐心细心，动手能力强，是我应该学习的好对象。