zoukankan      html  css  js  c++  java
  • 结对第二次作业——某次疫情统计可视化的实现

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

    链接相关

    GitHub仓库地址
    代码规范链接

    成品展示

    gif

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

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

    结对过程

    g1

    g2

    g3

    g4

    g5

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

    设计实现过程

    gg

    主要分为三大模块:

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

    代码说明

     //按钮命令
    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:队友耐心细心,动手能力强,是我应该学习的好对象。

    谦恭、正直、怜悯、英勇、公正、牺牲、荣誉、灵魂
    ----------------------------------------------------
    许半仙
  • 相关阅读:
    How To Build CyanogenMod Android for smartphone
    CentOS安装Code::Blocks
    How to Dual boot Multiple ROMs on Your Android SmartPhone (Upto Five Roms)?
    Audacious——Linux音乐播放器
    How to Dual Boot Multiple ROMs on Your Android Phone
    Everything You Need to Know About Rooting Your Android Phone
    How to Flash a ROM to Your Android Phone
    什么是NANDroid,如何加载NANDroid备份?
    Have you considered compiled a batman-adv.ko for android?
    BATMAN—Better Approach To Mobile Adhoc Networking (B.A.T.M.A.N.)
  • 原文地址:https://www.cnblogs.com/onepunchstar/p/12493318.html
Copyright © 2011-2022 走看看