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

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

这个作业属于哪个课程	课程地址
这个作业要求在哪里	作业地址
结对学号	221701323 221701315
这个作业的目标	阅读构建之法疫情可视化程序具体实现
作业正文	....
其他参考文献	csdn博客博客园 echarts官方教程 Axure教程

Github地址

代码规范

成品展示

结对过程

首先确定了时间安排，然后将任务分割成几个小任务，在博客中有提到图表可以使用echarts来对数据进行处理，然后就去官网寻找教程，然后在网络上寻找提供数据的api，使用到项目当中，再从html css javasript三个方面对网页进行设计

设计实现

先根据原型设计基本的html框架结构，预留放置图表的div，将原型所展示的基本框架写好，然后根据原型进行编写css代码，对界面进行美化，将预置图表的空间进行修饰，为后期的js代码插入图表准备，最后也是最关键的有关js的编写，先在网上寻找提供有关疫情人数的api接口和有关中国地图的js文件以及echarts文件，将这些接口里提供的数据用javascipt语言对json进行解析，将数据获取，在使用echarts将这些获取的数据进行处理，用图表的形式呈现，然后使用事件响应模型在地图上进行交互，鼠标停留和点击分别相应不同的事件

代码说明

<body>
    <div id="contant">
        <div id="showData">
            <div class="head">
                <span class="head-point"></span>
                <span class="head-text">全国疫情</span>
                <div id="time">更新时间</div>
                <input id="currentTime" type="date"/>
            </div>
            <div id="data">
                <div class="list">
                    <span id="currentConfirmedCount_number">78632</span>
                    <span class="text">累计确诊</span>
                    <span class="compane">昨日</span>
                </div>
                <div class="list">
                    <span id="nowConfirmed_number">42942</span>
                    <span class="text">现有确诊</span>
                    <span class="compane">昨日</span>
                </div>
                <div class="list">
                    <span id="seemConfirmed_number">2358</span>
                    <span class="text">疑似病例</span>
                    <span class="compane">昨日</span>
                </div>
                <div class="list">
                    <span id="cure_number">32943</span>
                    <span class="text">治愈人数</span>
                    <span class="compane">昨日</span>
                </div>
                <div class="list">
                    <span id="dead_number">2747</span>
                    <span class="text">死亡人数</span>
                    <span class="compane">昨日</span>
                </div>
            </div>
        </div>
        <div id="showMap">
            <div class="head">
                <span class="head-point"></span>
                <span class="head-text">全国疫情分布</span>
            </div>
            <div id="map" style=" 80% auto; height: 400px;"></div>
            <div class="button-position">
                <button id="currentConfirmedCount_map">现有确诊</button>
                <button id="confirmedCount_map">累计确诊</button>
            </div>
            
        </div>
        <div id="lineChartarea">
            <div class="head">
                <span class="head-point"></span>
                <span class="head-text">全国疫情趋势</span>
            </div>
            <div id="lineChart"></div>
            <div class="button-position">
                <button id="cured_line">治愈趋势</button>
                <button id="dead_line">死亡趋势</button>
                <button id="suspectedIncr_line">新增疑似趋势</button>
                <button id="confirmedIncr_line">新增确诊趋势</button>
            </div>
        </div>
        <div id="newsList">
            <div class="head">
                <span class="head-point"></span>
                <span class="head-text">疫情速递</span>
            </div>
            <div id="News">
                <ul id="list">
                </ul>
                <span id="more">查看更多内容</span>
            </div>
        </div>
    </div>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/china.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/getData.js"></script>
    <script src="../js/news.js"></script>
    <script src="../js/index.js"></script>
</body>

这部分代码是html代码，主要描述的是网页的主体框架和一些基本内容，全国的疫情情况放置在最开头，展示全国各类型人数的总和，然后是为echarts图表预留的div在后面加载的js文件将获取网上的数据以后形成图表，然后是一些有关疫情新闻预留的div，最后是加载javascript文件

//返回最新发布的内容，全国的状况
// latest	
//1：返回最新数据（默认）
// 0：返回时间序列数据
function GET_timeData(i) {
    var timeData;
    $.ajax({
        async: false,
        type: 'get',
        url: 'https://lab.isaaclin.cn/nCoV/api/overall',
        dataType: 'json',
        data: {
            latest: i,
        },
        error: function (XmlHttpRequest, textStatus, errorThrown) {
            alert("操作失败!");
        },
        success: function (result) {
            timeData = result.results;
            // console.log(timeData);
        }
    });
    return timeData;
}

//将从GET_timeData(i)获取的数据处理后返回用于Date数据
//参数provinceName
//=省份名时返回该省份的数据
//=null时返回全国数据
//全国数据还为根据选择的date选取数据
//接口的全国数据可能会出现没有新增的数据（未处理）
//省份的数据没有新增数据（未处理）
function timeData(areaData,date) {//整理数据，获取合理的数据
    var data = null;
    areaData.forEach(element => {
        if (data == null) {
            var time = new Date(element.updateTime);
            if (time.getMonth() == date.getMonth() && time.getDate() == date.getDate()) {
                data = element;
            }
        }
    });
    if(data==null){
        data=areaData[0];
    }
    var Data = {
        currentConfirmed: {//现存确诊人数
            count: data.currentConfirmedCount,
            Incr: data.currentConfirmedIncr
        },
        confrimed: {//累计确诊人数
            count: data.confirmedCount,
            Incr: data.confirmedIncr
        },
        cured: {//治愈人数
            count: data.curedCount,
            Incr: data.curedIncr
        },
        dead: {//死亡人数
            count: data.deadCount,
            Incr: data.deadIncr
        },
        serious: {//重症病例人数
            count: data.seriousCount,
            Incr: data.seriousIncr
        },
        suspected: {//疑似病例人数
            count: data.suspectedCount,
            Incr: data.suspectedIncr
        }
    };
    return Data;
}

// 接口介绍
// 返回自2020年1月22日凌晨3:00（爬虫开始运行）至今
// 中国所有省份、地区或直辖市及世界其他国家的所有疫情信息变化的时间序列数据（精确到市），
// 能够追溯确诊/疑似感染/治愈/死亡人数的时间序列。
// latest	
// 1：返回最新数据（默认）
// 0：返回时间序列数据
// province	省份、地区或直辖市，如：湖北省、香港、北京市。
//函数介绍
//可选参数provinceName
//null：返回所有的数据
//省份名：返回省份的数据
function GET_areaData(i, provinceName) {
    var DATA;
    $.ajax({
        async: false,
        type: 'get',
        url: 'https://lab.isaaclin.cn/nCoV/api/area',
        dataType: 'json',
        data: {
            latest: i,
            province: provinceName
        },
        error: function (XmlHttpRequest, textStatus, errorThrown) {
            alert("操作失败1!");
        },
        success: function (result) {
            DATA = result.results;
            // console.log(DATA);
        }
    });
    return DATA;
}

//调用GET_areaData(1, null)获取最新的所有数据
//选取countryName属性为中国的数据
//构成地图数据
function mapDate(type,areaData) {
    var n = 0;
    var data = new Array();
    areaData.forEach(element => {
        if (element.countryName == "中国") {
            if (type == "confirmedCount") {
                data[n] = { name: element.provinceShortName, value: element.confirmedCount }
                n++;
            } else {
                data[n] = { name: element.provinceShortName, value: element.currentConfirmedCount }
                n++;
            }

        }
    });
    return data;
}

//获取全国的历史数据
//类型有：
// confirmedNum
// curesNum
// date
// deathsNum
// suspectedNum
function historyData() {
    var data;
    $.ajax({
        async: false,
        type: 'get',
        url: 'http://www.dzyong.top:3005/yiqing/history',
        dataType: 'json',
        data: {
        },
        error: function (XmlHttpRequest, textStatus, errorThrown) {
            alert("操作失败!");
        },
        success: function (result) {
            data = result.data;
            // console.log(result);
        }
    });
    return data;
}

//通过historyData()获取全国的历史数据
//根据type可选取不同的数据
// curesNum、deathsNum可直接用
// confirmedNum、suspectedNum需要进行处理，获得增量，而不是直接量
//已完成cured
function array_change(in_list)
{
    var length=in_list.length;
    var out_list=new Array(length);
    for(var i=0;i<length;i++)
    {
        if(i==0)
        {
            out_list[i]=in_list[i];
        }
        else
        {
            out_list[i]=in_list[i]-in_list[i-1];
        }
    }
    return out_list;
}
//从GET_chinaData(type)获取数据绘制线图
//可选类型包括
//confirmedCount
//cured
//还为实现类型
//confirmedIncr
//dead
function inLineChart(type) {
    var title;
    if (type == "suspectedIncr") {
        title = "累计确诊人数";
    }
    if (type == "cured") {
        title = "治愈人数";
    }
    if (type == "confirmedIncr") {
        title = "新增确诊人数";
    }
    if (type == "dead") {
        title = "死亡人数";
    }
    var mydata = GET_chinaData(type);
    var option = {
        title: {
            text: title
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: mydata.name
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: title,
                type: 'line',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                areaStyle: {},
                data: mydata.value
            }
        ]
    };
    var chart = echarts.init(document.getElementById('lineChart'));
    chart.setOption(option);
}

<构建之法>阅读体会

首先描述了一些主流的代码规范，给定了一些在以后的工作当中非常有效的编码规范，在结对编程当中，可能双方都会遇见一些沟通，能力，想法等方面的差异，应该尽量调整自己，让自己可以适应队友的节奏，也体会到个人能力有限，每个人应该积极的参与到团队的项目建设当中，在团队中负责做好自己的部分，并且争取给他人一些帮助，提升自己的交流能力，可以在团队当中表达自己的想法，并且让团队的其他人可以理解你的想法，这需要良好的表达能力，在编程过程当中应该不断地复查自己的代码，确保准确性，避免在后期出现问题之后，花大量的时间进行debug。

心路历程及队友评价

在第一次结对的过程当中，对整个项目有了一些粗浅的了解，基本的原型和交互跳转逻辑已经大致了解，所以在项目下来以后队友就在进行基本功能的完成，而我在进行一些简单文档的编写，在队友强大的支持之下，整个项目在一步步的走向完善，队友在编程实现以及其他方面都给了我很大的帮助，在被我无情拖后腿的时候可以拉动我参与当中，虽然做出的贡献不多，但是收获也有，在代码的规范化中给我提供了示例，提高了我对编码的规范的理解，在一些不理解的地方也细心的给我讲解，能够合理的安排整个项目的时间分配和每个人负责的部分，并且可以准时并且高效的完成自己的任务，在项目当中可以涌现非常多的创意再添加到项目当中，完善和提升整个项目的使用体验