第二次结对作业

这个作业属于哪个课程	2020春|S班 (福州大学)
这个作业要求在哪里	作业要求
这个作业的目标	强化GitHub编程
作业正文	软工实践结对作业（2/2）
其他参考文献	百度、csdn、简书

1.GitHub 仓库地址 及 代码规范

仓库地址-> https://github.com/Allenaka/InfectStatisticWeb/tree/master
代码规范-> https://github.com/Allenaka/InfectStatisticWeb/blob/master/codestyle.md

2.成品展示

3.结对讨论

4.功能结构

5.代码说明

echarts生成地图

var myChart = echarts.init(document.getElementById('map'));
    option = {
        tooltip: {
                formatter:function(params,ticket, callback){
                    return params.seriesName+'<br />'+params.name+'：'+params.value
                }//数据格式化
            },
        visualMap: {
            min: 0,
            max: 1500,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],//取值范围的文字
            inRange: {
                color: ['#e0ffff', '#006edd']//取值范围的颜色
            },
            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:[]
            }
        ]
    };
    myChart.setOption(option);

获取接口数据并填充

function getCurrData(params) {
    $.ajax({
        url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5",
        dataType: "jsonp",
        success: function (data) {
        console.log(data.data)
        var res = data.data || "";
        res = JSON.parse(res);
        var newArr = [], newArr2 = [];
        var currEffected, suspected, dead, cure, totalEffected, imported;
        var addCurrEffected, addSuspected, addDead, addCure, addTotalEffected, addImported;
        
        if (res) {
            
            totalEffected = res.chinaTotal.confirm;
            suspected = res.chinaTotal.suspect;
            cure = res.chinaTotal.heal;
            dead = res.chinaTotal.dead;
            currEffected = res.chinaTotal.nowConfirm;
            imported = res.chinaTotal.importedCase;
            addCurrEffected = res.chinaAdd.nowConfirm;
            addSuspected = res.chinaAdd.suspect;
            addCure = res.chinaAdd.heal;
            addDead = res.chinaAdd.dead;
            addImported = res.chinaAdd.importedCase;
            addTotalEffected = res.chinaAdd.confirm;


            document.getElementById("confirm").innerText = totalEffected;
            document.getElementById("nowConfirm").innerText = currEffected;
            document.getElementById("cure").innerText = cure;
            document.getElementById("dead").innerText = dead;
            document.getElementById("suspected").innerText = suspected;
            document.getElementById("importCase").innerText = imported;
            document.getElementById("addCurr").innerText = addCurrEffected;
            document.getElementById("addTotal").innerText = addTotalEffected;
            document.getElementById("addCure").innerText = addCure;
            document.getElementById("addDead").innerText = addDead;
            document.getElementById("addImported").innerText = addImported;
            document.getElementById("addSuspected").innerText = addSuspected;
            
            //获取到各个省份的数据
            var province = res.areaTree[0].children;
            for (var i = 0; i < province.length; i++) {
            var json = {
                name: province[i].name,
                value: province[i].total.confirm - province[i].total.dead - province[i].total.heal
            }
            var json2 = {
                name: province[i].name,
                value: province[i].total.confirm
            }
            newArr.push(json);
            newArr2.push(json2);
            }
            // console.log(newArr)
            // console.log(JSON.stringify(newArr))
            //使用指定的配置项和数据显示图表
            if (params == myChart) {
                params.setOption({
                series: [
                    {
                    name: '现存确诊数',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    label: {
                        show: true,
                        color: 'rgb(249, 249, 249)'
                    },
                    data: newArr
                    }
                ]
                });
            }
            else {
                params.setOption({
                series: [
                    {
                    name: '累计确诊数',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    label: {
                        show: true,
                        color: 'rgb(249, 249, 249)'
                    },
                    data: newArr2
                    }
                ]
                });
            }
        }
        }

    })
}

getCurrData(myChart); 

echarts生成折线图

var myChart2 = echarts.init(document.getElementById('line'));
    option2 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['新增确诊', '累计确诊', '新增疑似', '累计治愈', '累计死亡']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '新增确诊',
                type: 'line',
                data: []
            },
            {
                name: '累计确诊',
                type: 'line',
                data: []
            },
            {
                name: '新增疑似',
                type: 'line',
                data: []
            },
            {
                name: '累计治愈',
                type: 'line',
                data: []
            },
            {
                name: '累计死亡',
                type: 'line',
                data: []
            }
            
        ]
    };

    myChart2.setOption(option2);

接口获取折线图数据

function lineData() {
    var url = "http://www.dzyong.top:3005/yiqing/history";/*json文件url，本地的就写本地的位置，如果是服务器的就写服务器的路径*/
        var request = new XMLHttpRequest();
        request.open("get", url);/*设置请求方法与路径*/
        request.send(null);/*不发送数据到服务器*/
        request.onload = function () {/*XHR对象获取到返回信息后执行*/
            if (request.status == 200) {/*返回状态为200，即为数据获取成功*/
                var res = JSON.parse(request.responseText);
                var xline = [], increase = [], total = [], suspected = [], cure = [], dead = [];
                for(var i=0; i<res.data.length; i++){
                    xline[i] = res.data[i].date;
                    if (i != 0) {
                        increase[i] = res.data[i].confirmedNum - res.data[i-1].confirmedNum;
                        suspected[i] = res.data[i].suspectedNum - res.data[i-1].suspectedNum;
                        if (suspected[i] < 0) {
                            suspected[i] = 0;
                        }
                    }
                    else {
                        increase[i] = res.data[0].confirmedNum;
                        suspected[i] = res.data[0].suspectedNum;
                    }
                    cure[i] = res.data[i].curesNum;
                    dead[i] = res.data[i].deathsNum
                    total[i] = res.data[i].confirmedNum;
                }
                console.log(total);
                myChart2.setOption({
                    xAxis: {
                        data: xline
                    },
                    series: [
                        {
                            name: '新增确诊',
                            data: increase
                        },
                        {
                            name: '累计确诊',
                            data: total
                        },
                        {
                            name: '新增疑似',
                            data: suspected
                        },
                        {
                            name: '累计治愈',
                            data: cure
                        },
                        {
                            name: '累计死亡',
                            data: dead
                        }
                        
                    ]

                })
            }
        }
}

lineData();

页面跳转与传参

myChart.on('click', function (param) {
        // 城市中文名
        var cityName = encodeURI(param.name);
        window.open("test.html?cityName=" + cityName, "_self");

    });


var afterUrl =  window.location.search.substring(1);
// encodeURI(afterUrl);
var afterEqual = afterUrl.substring(afterUrl.indexOf('=')+1); 
var cityName = decodeURI(afterEqual);
document.getElementById("province").innerText = cityName;

6.结对总结

221701427:

收获：

合作开发，只有及时发现问题，积极沟通，通力协作，才能发挥出1+1>2的效果。但是现实的情况往往是，代码的不规范，分工的不明确，系统分析的不合理，等等种种因素，使得最后的效果往往是1+1<2。在当今，一个软件项目往往都不会是一个人完成，也不可能是一个人就能完成，相信此次结对合作是一次很好的经验。

队友评价：

枣子绝对是中国好队友，两次结对作业都十分给力，在作业过程中给我提供了很多的帮助，并且还十分宽容地允许我在deadline之后拖延了两天让我尝试完成自己的开发，各种方面都挺感谢枣子的。

221701424:

收获：

开发的过程中，往往缺乏及时的沟通，导致整个进度过缓、甚至混乱的局面，因此在团队开发过程中，领头人要积极参与、及时跟进进度，合理分工合作能避免较多不必要的麻烦，这次结对任务丰富了我的开发经验，增强了我沟通协调的欲望，是一次很不同寻常体验。

队友评价：

没毛病干就完了奥里给