结对第二次作业——某次疫情统计可视化的实现
结对第二次作业——某次疫情统计可视化的实现
| 这个作业属于哪个课程 | 2020春|S班 (福州大学) |
|---|---|
| 这个作业要求在哪里 | 结对第二次作业——某次疫情统计可视化的实现 |
| 这个作业的目标 | 开发一个疫情统计程序 |
| 作业正文 | 结对第二次作业——某次疫情统计可视化的实现 |
| 其他参考文献 | Github,博客园 |
展示作品
讨论过程描述
唐涔负责采集数据、前端结构层、部署网站
任智明负责前端表现层、地图和现状图的显示
刚拿到题目的时候首先决定编写代码的平台，由于我们上学期学习过使用php架构网站，所以使用php编写代码。
数据的采集尝试过进行爬虫，在查找资料后发现php的扩展包phpspider可以快速的部署和使用爬虫，但由于网络问题难以安装扩展包，几经尝试后最终放弃。
设计实现过程
从助教给的log文件中读取疫情信息
将疫情信息写入html标签的值
通过js读取标签获取值，转化为json数据写入echarts从而以图和表的方式显示数据
代码说明
从log中读取疫情信息
for($i = 0;$i < count($list);$i++){
$file = fopen($list[$i], "r") or exit("Unable to open file!");
$date = substr(mb_convert_encoding($list[$i], 'utf-8', 'gbk'), 6,10);
if(isset($_GET['date']) && strtotime($_GET['date']) <= strtotime($date)){
break;
}
while(!feof($file))
{
$line = fgets($file);
$line = str_replace(" ","_",$line);
$arr = explode('_' , $line);
if(count($arr)<2)
continue;
if(count($arr) == 4){
$count = substr(mb_convert_encoding($arr[3], 'utf-8', 'gbk'), 0,-5);
$key = array_search(mb_convert_encoding($arr[0], 'utf-8', 'gbk'),$arr2);
$key2 = array_search($date.mb_convert_encoding($arr[0], 'utf-8', 'gbk'),$arr3);
$key3 = array_search($date,$arr4);
if(mb_convert_encoding($arr[1], 'utf-8', 'gbk') == "新增"){
if(mb_convert_encoding($arr[2], 'utf-8', 'gbk') == "感染患者"){
$info[$key]['infected'] += $count;
$all['infected'] += $count;
$liner[$key2]['infected'] += $count;
$aall[$key3]['infected'] += $count;
$info[$key]['cumulative'] += $count;
$all['cumulative'] += $count;
}
else{
$info[$key]['suspected'] += $count;
$liner[$key2]['suspected'] += $count;
$aall[$key3]['suspected'] += $count;
$all['suspected'] += $count;
}
}
if(mb_convert_encoding($arr[1], 'utf-8', 'gbk') == "排除"){
$info[$key]['suspected'] -= $count;
$liner[$key2]['suspected'] -= $count;
$aall[$key3]['suspected'] -= $count;
$all['suspected'] -= $count;
}
if(mb_convert_encoding($arr[1], 'utf-8', 'gbk') == "疑似患者"){
$info[$key]['suspected'] -= $count;
$info[$key]['infected'] += $count;
$liner[$key2]['suspected'] -= $count;
$liner[$key2]['infected'] += $count;
$aall[$key3]['suspected'] -= $count;
$aall[$key3]['infected'] += $count;
$all['suspected'] -= $count;
$all['infected'] += $count;
}
}
else{
$count = substr(mb_convert_encoding($arr[2], 'utf-8', 'gbk'), 0,-5);
$key = array_search(mb_convert_encoding($arr[0], 'utf-8', 'gbk'),$arr2);
if(mb_convert_encoding($arr[1], 'utf-8', 'gbk') == "死亡"){
$info[$key]['infected'] -= $count;
$info[$key]['dead'] += $count;
$liner[$key2]['infected'] -= $count;
$liner[$key2]['dead'] += $count;
$aall[$key3]['infected'] -= $count;
$aall[$key3]['dead'] += $count;
$all['infected'] -= $count;
$all['dead'] += $count;
}
else{
$info[$key]['infected'] -= $count;
$info[$key]['cured'] += $count;
$liner[$key2]['infected'] -= $count;
$liner[$key2]['cured'] += $count;
$aall[$key3]['infected'] -= $count;
$aall[$key3]['cured'] += $count;
$all['infected'] -= $count;
$all['cured'] += $count;
}
}
if($i == count($list)-1){
if(count($arr) == 4){
$count = substr(mb_convert_encoding($arr[3], 'utf-8', 'gbk'), 0,-5);
$key = array_search(mb_convert_encoding($arr[0], 'utf-8', 'gbk'),$arr2);
if(mb_convert_encoding($arr[1], 'utf-8', 'gbk') == "新增"){
if(mb_convert_encoding($arr[2], 'utf-8', 'gbk') == "感染患者"){
$yes[$key]['infected'] += $count;
$yes[$key]['cumulative'] += $count;
$yall['infected'] += $count;
$yall['cumulative'] += $count;
}
else{
$yes[$key]['suspected'] += $count;
$yall['suspected'] += $count;
}
}
if(mb_convert_encoding($arr[1], 'utf-8', 'gbk') == "排除"){
$yes[$key]['suspected'] -= $count;
$yall['suspected'] -= $count;
}
if(mb_convert_encoding($arr[1], 'utf-8', 'gbk') == "疑似患者"){
$yes[$key]['suspected'] -= $count;
$yes[$key]['infected'] += $count;
$yall['suspected'] -= $count;
$yall['infected'] += $count;
}
}
else{
//var_dump($arr);
$count = substr(mb_convert_encoding($arr[2], 'utf-8', 'gbk'), 0,-5);
$key = array_search(mb_convert_encoding($arr[0], 'utf-8', 'gbk'),$arr2);
if(mb_convert_encoding($arr[1], 'utf-8', 'gbk') == "死亡"){
$yes[$key]['infected'] -= $count;
$yes[$key]['dead'] += $count;
$yall['infected'] -= $count;
$yall['dead'] += $count;
}
else{
$yes[$key]['infected'] -= $count;
$yes[$key]['cured'] += $count;
$yall['infected'] -= $count;
$yall['cured'] += $count;
}
}
}
//var_dump($arr);
//echo "<br>";
}
设置中国地图表格的点击事件
myChart.on('click', function (params) {
...
var data = [];
var time = document.getElementsByName('ttt');
var test = document.getElementById('test');
var list = document.getElementsByName('i'+test.innerHTML);
for(var i=0;i<list.length;i++){
data.push({
value: [time[i].value, list[i].value],
});
}
echarts.init(document.getElementById('main')).setOption({
title: {
text: test.innerHTML
},
series: [{
data: data // 点坐标[x,y]
}]
});
document.getElementById('oa').className = 'aoption';
var a = document.getElementById('ob');
var b = document.getElementById('oc');
var c = document.getElementById('od');
a.className = 'option';
b.className = 'option';
c.className = 'option';
});
用echarts设置中国地图表格
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title : {
text: '疫情人数',
left: 'center'
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
data:['疫情']
},
visualMap: {
min: 0,
max: 2500,
left: 'left',
top: 'bottom',
text:['高','低'], // 文本，默认为数值文本
calculable : true
},
toolbox: {
show: true,
orient : 'vertical',
left: 'right',
top: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name: '人数',
type: 'map',
mapType: 'china',
roam: false,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data:[
{name: '北京',value: document.getElementById('北京'+'infected').value},
{name: '天津',value: document.getElementById('天津'+'infected').value},
{name: '上海',value: document.getElementById('上海'+'infected').value},
{name: '重庆',value: document.getElementById('重庆'+'infected').value},
{name: '河北',value: document.getElementById('河北'+'infected').value},
{name: '河南',value: document.getElementById('河南'+'infected').value},
{name: '云南',value: document.getElementById('云南'+'infected').value},
{name: '辽宁',value: document.getElementById('辽宁'+'infected').value},
{name: '黑龙江',value: document.getElementById('黑龙江'+'infected').value},
{name: '湖南',value: document.getElementById('湖南'+'infected').value},
{name: '安徽',value: document.getElementById('安徽'+'infected').value},
{name: '山东',value: document.getElementById('山东'+'infected').value},
{name: '新疆',value: document.getElementById('新疆'+'infected').value},
{name: '江苏',value: document.getElementById('江苏'+'infected').value},
{name: '浙江',value: document.getElementById('浙江'+'infected').value},
{name: '江西',value: document.getElementById('江西'+'infected').value},
{name: '湖北',value: document.getElementById('湖北'+'infected').value},
{name: '广西',value: document.getElementById('广西'+'infected').value},
{name: '甘肃',value: document.getElementById('甘肃'+'infected').value},
{name: '山西',value: document.getElementById('山西'+'infected').value},
{name: '内蒙古',value: document.getElementById('内蒙古'+'infected').value},
{name: '陕西',value: document.getElementById('陕西'+'infected').value},
{name: '吉林',value: document.getElementById('吉林'+'infected').value},
{name: '福建',value: document.getElementById('福建'+'infected').value},
{name: '贵州',value: document.getElementById('贵州'+'infected').value},
{name: '广东',value: document.getElementById('广东'+'infected').value},
{name: '青海',value: document.getElementById('青海'+'infected').value},
{name: '西藏',value: document.getElementById('西藏'+'infected').value},
{name: '四川',value: document.getElementById('四川'+'infected').value},
{name: '宁夏',value: document.getElementById('宁夏'+'infected').value},
{name: '海南',value: document.getElementById('海南'+'infected').value},
{name: '台湾',value: document.getElementById('台湾'+'infected').value},
{name: '香港',value: document.getElementById('香港'+'infected').value},
{name: '澳门',value: document.getElementById('澳门'+'infected').value}
]
}
]
};;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
用echarts设置现状图表格
echarts.init(document.getElementById('main')).setOption({
title: {
text: '全国'
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
params = params[0];
var date = new Date(params.name);
return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
},
axisPointer: {
animation: false
}
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: [{
name: '模拟数据',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: data,
smooth:true
},
{
name:'.anchor',
type:'line',
showSymbol:false,
data:anchor,
itemStyle:{normal:{opacity:0}},
lineStyle:{normal:{opacity:0}}
}]
});
心路历程与收获
221701313：最初看到这个作业的时候感觉这次任务艰巨，虽然我跟唐涔已经合作完成了第一次结对作业，但是这次作业量大而且对于合作开发代码其实还不很顺利，代码不仅要自己看的懂，更要让队友看得懂自己到底在写什么。通过本次实践，进一步的了解学习了团队开发，人力有穷时，对于一个繁重的项目开发，需要一些队友合作，团队成员需要学会分工明确，明确团队的开发流程，互相取长补短，实现一加一大于二的效果。此外，百度真是个强大的工具，开发过程中，在度娘和队友的帮助下，顺利的解决难题如git使用等。通过本次作业，学到了更多的于前端的相关知识，提升了个人能力，也锻炼了合作开发的能力。
221701334：实话实说，最初对于能否能够按时完成本次实践很是怀疑，因为队友跟我一样，对于github的使用及分支并不了解，并且没有合作编写代码的经历，两个人的代码风格什么的并不相同。在度娘的帮助下，我们一步步解决难题，因为是合作开发，很经常就会出现一些问题，这时候一定要耐心，好好调试，看看是哪一步出了问题，这样问题才能得以解决。每一次的软工实践任务，都能学到了很多新技能，依然觉得在软件工程这门学科里面自己还欠缺许多知识。只有不断提高自己的学习能力，才能更好的适应需求。
