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

这个作业属于哪个课程	软件工程
这个作业要求在哪里	结对第二次作业
结对学号	221701227、221701211
这个作业的目标	结对合作 实现原型设计 完成疫情的可视化
作业正文	作业正文
其他参考文献	Apache ECharts(incubating) 基于Echarts的中国地图数据展示 Bootstrap Beautiful Soup

1、github使用

Github仓库地址

代码规范链接

2、成品展示

图片：

省内界面

链接：

疫情统计(请使用Chrome,新版Egde或firefox进行浏览,)

3、结对讨论过程

4、设计实现过程

功能结构图

5、关键代码

关键代码

var confirmedCount = []; //存储累计确诊人数
var currentConfirmedCount = []; //存储现存确诊人数
var curedCount = []; //存储治愈人数
var deadCount = []    //存储治人数
var dateId = [];       //存储日期ID,格式为yyyyMMdd
var processedDate = []; //存储处理过的日期,格式MM.dd
var processedData = [];  //存储从json文件中提取的信息
var msg = []    //存储省份ID

$.ajaxSettings.async = false; 
关闭异步请求,改为同步请求.可以在JQurey函数内给全局函数赋值.

/**
*$.getJSON 用于从处理本地的Json文件.处理后的文件可以从res中获得
*/
$.getJSON ("data.json", function (res) {
    var url =  window.location.href;  
    var str = url.split('?'); 
    msg = str[1]; //获取url中所带的省份ID
    if(msg == 710000){   //710000为台湾,如果查询的是台湾的详细信息跳回首页.因为没有台湾的具体数据.
        window.location.href="index.html";
    }
    console.log(msg,'msg')
    res.forEach(item => {  //处理后的Json数据是数组,遍历数组,从中取出需要的数据
            if(item.locationId == msg)
                processedData.push({
                    provinceName:item.provinceName,        //省份名
                    statisticsData:item.statisticsData,    //该省份的疫情变化趋势的Json文件地址
                    cities:item.cities        //省份下的所有城市的疫情数据
                })
        }
    );
});

//通过statisticsData里存储的Json文件地址,对其直接进行处理,获得所有城市的疫情情况和变化
$.getJSON (processedData[0].statisticsData, function (str) { 
    var dateStaging = [];
    dateStaging = str.data;
    var processedData = [];
    dateStaging.forEach(item=>{
        processedData.push({
            confirmedCount:item.confirmedCount,
            currentConfirmedCount:item.currentConfirmedCount,
            curedCount:item.curedCount,
            deadCount:item.deadCount,
            dateId:item.dateId,

        })
    });

myChart.setOption ({
            title: {
                text: '新冠疫情状况分布图',
                subtext: '当前现有确诊病例数，治愈、死亡',
                left:'center',
            },
            series: [{
                type:'map',
                map:'china',
                label:{
                    show:true,
                },
                data:processedData
            }],
            tooltip:{
                triggerOn:'click',
                /**   设置提示框里面的显示数据${params.value || 0}如果params.value取不到值,就以0输出
                 *    ${(params.data && params.data.curedCount) || 0}
                 *    可以从params.data 和params.data.curedCount中取值,取不到就以0输出
                 *    因为有些数据在params.data内不是以数据的方式存储,是以数组的形式存储.
                 */
                formatter: function (params) {
                    return `地区：${params.name}<br/>确诊：${params.value || 0}人<br/>
                    治愈：${(params.data && params.data.curedCount) || 0}人<br/>死亡：${params.data?.deadCount || 0}人<br/>
                    <a href="details.html?${params.data.id}">查看</a>`;  
                    //提供了一个超链接用于跳转到省份疫情详细信息.${params.data.id}省份ID,每个省份一个
                },
                enterable: true
                //开启鼠标能够进入提示框
            },
            visualMap:[
                {
                    type: 'piecewise', //定义色块为不连续
                    pieces:[
                        { min: 10000 }, // (10000, Infinity]
                        { min: 1000, max: 9999 }, // (1000, 9999]
                        { min: 100, max: 999 }, // (100, 999]
                        { min: 10, max: 99 }, // (10, 99]
                        { min: 1, max: 9 }, // (0, 9]
                        { value:0}
                    ],
                    inRange: {
                        color: ['#ffffff','#fdebcf', '#f59e83', '#e55a4e', '#cb2a2f', '#811c24']
                    }
                }
            ],
            backgroundColor:'#f7f7f7',
        })

//地图文件以省份ID为名称进行存储
var mapName = 'json/' + msg + '.json'; 

$.get(mapName, function (json) { //通过AJAX 把Json格式的省份地图加载进来
    console.log(mapName,'map');
    echarts.registerMap(msg, json);
    var myChart = echarts.init(document.getElementById('main'));
    console.log(cityData,"city");

    var option = {
        //标题设置

        title: {
            text: processedData[0].provinceName + '疫情统计',
            subtext: '当前现有确诊,治愈、死亡,可以使用滚轮放大,鼠标拖动',
            left:'center',
        },
        series: [{
            type:'map',
            map:msg,
            label:{
                show:false,
            },
            data:cityData,

            roam: true, //开启鼠标拖动或缩放功能
            zoom: 1, //当前视角的缩放比例
            scaleLimit: { //滚轮缩放的极限控制
                min: 1,    //最小放大倍数
                max: 5,    //最大放大倍数
            },
        }],
        tooltip:{
            formatter: function (params) {
                // console.log(params)
                return `地区：${params.name}<br/>确诊：${params.value|| 0}人<br/>
                    治愈：${(params.data && params.data.curedCount) || 0}人<br/>死亡：${params.data?.deadCount || 0}人<br/>`;
            }
        },
        visualMap:[
            {
                pieces:[
                    { min: 10000 }, // (10000, Infinity]
                    { min: 1000, max: 9999 }, // (1000, 9999]
                    { min: 100, max: 999 }, // (100, 999]
                    { min: 10, max: 99 }, // (10, 99]
                    { min: 1, max: 9 }, // (0, 9]
                    { value:0}
                ],
                inRange: {
                    color: ['#ffffff','#fdebcf', '#f59e83', '#e55a4e', '#cb2a2f', '#811c24']
                }
            }
        ],
        backgroundColor:'#f7f7f7',
    }
    myChart.setOption (option);
});

6、心路历程与收获

221701227
在这次作业中像JQuery,AJax 以及 爬虫都是现学的.一开始还是比较吃力.但通过阅读官方的文档,后面也逐渐熟悉了起来.这让我更加明白了阅读文档对于学习一门技术的帮助.而且,在这次开发的过程中,发现了数据的重要性.找了很久,也只发现只能爬取到当天的数据.从而影响了一些功能的开发.同时发现自身在git这个软件的使用还是很不熟练.许多功能不会使用.后期要把相关知识进行补充.
221701211
这次结对合作让我明白了互帮互助的重要性，对于一个新的软件工具，我学的比较慢，而我的结对伙伴更擅长于这一反面。
他不停的回答我的问题，解决我不懂的bug，让我在短时间内学会了Echarts，也学会了很多关于代码的知识。
结对合作使我收益匪浅，十分感谢我的同伴。

对他的评价

221701227
很擅长查找资料和需要的素材,有时能够提供一些很有用的建议.弥补了我在这方面的不足.
221701211
很好的同伴，耐心的朋友