| 這個作業屬於哪個課程 | 2020春-s班 |
|---|---|
| 這個作業要求在哪里 | 作業要求鏈接 |
| 結對學號 | 221701305&221701316 |
| 這個作業的目標 | 合作實現疫情統計原型設計中的功能 |
| 作業正文 | 作業正文 |
| 其他參考文獻 | csdn、百度 |
1.倉庫地址&代碼規范
1.1 github倉庫地址
1.2 代碼規范
2、展示成品
圖1 安徽省具體數據
圖2&圖3 不同日期具體數據的變化
圖4 懸浮數據展示
圖5 不同日期地圖的變化
圖6 地圖高亮&懸浮顯示數據
圖7 點擊省份跳轉&懸浮顯示數據
圖8 點擊顯示同一區間的省份高亮
圖9 世界地圖展示&縮放地圖
由於直接寫國家名字會導致大部分國家名字重疊，因此設置成高亮顯示的同時展示國家名字
圖10 防護知識
3、結對討論過程
4、 設計實現過程
首先，將功能分成兩個部分，基礎功能和拓展功能，基礎功能的內容以及分工情況如上圖所示。
拓展功能：
1.添加世界地圖的疫情地圖，同樣由顏色深淺表示疫情嚴重程度，設置高亮顯示，並且在高亮時展示國家名，避免部分國家名字重疊的情況
2.地圖和折線圖懸浮展示具體數據，更加方便直觀，若只想知道某個省份的確診人數，不必點到具體數據，直接鼠標移動到這個省即可了解；在折線圖上添加懸浮可免去用戶去找橫軸對應日期的麻煩
3.添加防護知識，包括新冠病毒的簡介以及如何進行預防等基礎知識
4.點擊某區間會高亮同一區間的省份，更加直觀
5.設置地圖可以放大縮小，避免某些省份或國家面積太小導致看不見被忽略的情況
5、 代碼說明
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
return res;
};
option = {
tooltip: {
trigger: 'item',
formatter: function(params) {
if (typeof(params.value)[2] == "undefined") {
var toolTiphtml = ''
for(var i = 0;i<toolTipData.length;i++){
if(params.name==toolTipData[i].name){
toolTiphtml += toolTipData[i].name+':<br>'
for(var j = 0;j<toolTipData[i].value.length;j++){
toolTiphtml+=toolTipData[i].value[j].name+':'+toolTipData[i].value[j].value+"<br>"
}
}
}
console.log(toolTiphtml)
return toolTiphtml;
} else {
var toolTiphtml = ''
for(var i = 0;i<toolTipData.length;i++){
if(params.name==toolTipData[i].name){
toolTiphtml += toolTipData[i].name+':<br>'
for(var j = 0;j<toolTipData[i].value.length;j++){
toolTiphtml+=toolTipData[i].value[j].name+':'+toolTipData[i].value[j].value+"<br>"
}
}
}
console.log(toolTiphtml)
return toolTiphtml;
}
}
},
dataRange:{//顏色的設置 dataRange
x: 'left',
y: 'center',
splitList: [
{start: 1000,color:'#880000',label:'>1000'},
{start: 499, end: 1000,color:'AA0000',label:'499-1000'},
{start: 100, end: 499,color:'#FF3333',label:'100-499'},
{start: 10, end: 99,color:'#FF8888',label:'10-99'},
{start: 1, end: 9,color:'#FFCCCC',label:'1-9'},
{start: 0, end: 0 , color: 'white',label:'0'},
],
text:['高','低'],// 文本，默認為數值文本
},
geo: {
show: true,
map: mapName,
label: {
normal: {
show: false,
},
emphasis: {
show: false,
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {//高亮顏色設置
areaColor: '#FFFF00',
}
}
},
series: [{
name: '散點',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#05C3F9'
}
}
},
{
type: 'map',
map: mapName,
geoIndex: 0,
aspectScale: 0.75, //長寬比
showLegendSymbol: false, // 存在legend時顯示
label: {
normal: {
show: true
},
emphasis: {
show: false,
textStyle: {
color: 'red'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: data
},
]
};
myChart.setOption(option);
//鼠標懸浮事件
myChart.on('mouseover', function (params) {
var dataIndex = params.dataIndex;
console.log(params);
});
//鼠標單擊事件
myChart.on('click', function (params) {
// console.log(params)
window.open(encodeURIComponent(params.name)+'.html');
});
思路：這段代碼是實現地圖的關鍵代碼，使用echarts實現中國地圖，convertData函數處理確診人數的數據，option里設置地圖樣式，如顏色，字體等等，dataRange是顏色繪制部分，采用splitList分為有六種情況，為每一段設置不同的顏色，geo里設置高亮的顏色，myChart.on('mouseover', function(params)設置鼠標懸浮事件，會高亮顯示省份並且顯示具體確診人數； myChart.on('click', function(params)設置鼠標單擊事件，跳轉頁面到省份具體數據，里面有折線圖展示四種情況的趨勢。
var select=document.getElementById("select");
var opt=select.value;
var subTitle=document.getElementById("date");
subTitle.innerHTML="數據來源："+opt+"疫情病例統計";
subTitle.style.color="grey";
subTitle.style.fontFamily="等線";
date=opt;
if(opt=="2020-01-19")
{
for(var i=0;i<data.length;i++){
data[i].value=localStorage.getItem(data[i].name+'0119i');
toolTipData[i].value=[{name:"現存確診",value:data[i].value}];
}
}
else if(opt=="2020-01-20")
{
for(var i=0;i<data.length;i++){
data[i].value=localStorage.getItem(data[i].name+'0120i');
toolTipData[i].value=[{name:"現存確診",value:data[i].value}];
}
}
······
}
思路：這段代碼是處理下拉菜單各選項的函數中的關鍵部分，不同的日期需要獲取不同的數據，並且需要獲取日期更改副標題
6、 心路歷程&收獲
6.1 心路歷程與收獲
221701305：
閱讀了構建之法四五章之后，我明白了編程不僅僅是實現功能即可，還有更多需要考慮的地方，比如代碼規范、代碼依賴、代碼可讀性、可測試性等等，這些都是以前我沒有考慮過的，發現這些問題后，我重新修改了之前的代碼規范，使其更加規范，在命名時也盡量采用有意義的命名，並且通過添加必要的注釋，增加代碼可讀性。
這次結對編程的過程有些坎坷，比如一開始建倉庫的時候就出現了問題，在開發過程中，由於兩個人打代碼的風格不同，想法不同，也造成了一定的困難，還好經過溝通，這些問題都解決了，我覺得我們屬於功能團隊模式，即兩個人各有分工，不會出現誰主導的情況。
上次做原型作業時，我的地圖制作完全依賴Axure軟件，導致各個省份的獲取事件的范圍模糊，這次采用echarts實現地圖，十分精確，也算是給這次結對作業畫上了一個圓滿的句號。
221701316:
首先，我了解了一些主流的代碼規范，可以在將來的工作當中使用，在現在就養成良好的編碼風格；然后我覺得合作中，要讓團隊的其他人可以理解你的想法，在編程過程當中應該不斷地復查自己的代碼，每個人應該積極的參與到團隊的項目建設當中，可以將時間讓出來，花在項目的維護和功能添加和美化上
6.2 評價隊友
221701305：
這次結對作業是我第一次進行兩個人組隊編程，我的隊友認真負責，善於溝通，碰到不會的難題也非常積極地去解決，是一個非常好的隊友，和他合作非常愉快。
221701316：
和隊友相互交流溝通也是讓我受益匪淺，我知道了一個產品的順利開發是需要團隊的一起努力的結果，我的隊友也是十分的棒，一有問題就及時溝通，節省了許許多多的時間，提高了開發的效率。