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

这个作业属于哪个课程	2020春W班
这个作业要求在哪里	结对作业2
这个作业的目标	实现结对作业1的原型
结对学号	221701401 221701402
作业正文	https://www.cnblogs.com/wxy-2020/p/12492756.html
其他参考文献	...

一、github地址和代码规范链接

github仓库

代码规范

二、成品展示

主界面

累计确诊的中国疫情图，点击某个省份即可查看某省份数据

点击现存确诊按钮，可切换数据

全球疫情图也设置了累计确诊和现存确诊，鼠标在某个地区上课显示该地区的确诊数据

鼠标在曲线图上也可显示相应的数据

某个省份的疫情数据

三、结对过程

1.Day1：拿到题目，开始找各种资料，给力的队友晚上11点半建好了GitHub仓库(太拼了)

2.Day2：下载了PyCharm

3.Day3：因为队友下的是社区版，要解决flask安装问题，我爬了取数据

4.Day4：队友建了前端基本框架，我连上数据库，作为dev的分支pull不了，最后找了各种资料才发现要放到自己的仓库。。（而且pull request之类的真的太麻烦，网络也好卡，队友也辛苦了，队友找资料真的太给力了！）

5.Day5：因为腾讯的数据不完整，没有各个省份的历史，队友又找到新浪的资源爬（我队友真的太神了），前端的队友在搞定flask的post和get机制。我做了全国数据的展示。队友做了中国地图数据。

6.Day6：爬取了世界地图的数据，队友做了世界地图，还有省份的数据也上去了（队友真的太棒了）

7.Day7：截止日期了，修修改改css

图：第一天找资料的充满干劲的队友

四、设计实现过程

1.使用flask框架，编写前端代码HTML跟CSS，实现静态的网页。

2.python爬取数据存到MySql数据库（部分存储：有些国外数据和省份数据直接爬起直接用）

2.Echarts实现地图的显示和趋势图（封装在js里实现）

3.ajax用于向后端请求数据

五、代码说明

爬取中国历史数据和各省份详细数据和国外数据（主要从腾讯网爬）

def get_data():
    url = 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_other'
    url1 = 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5'
    ...
    r = requests.get(url, headers)
    res = json.loads(r.text)  
    data_all = json.loads(res['data'])
    history = {}  # 历史数据
    for i in data_all["chinaDayList"]:
        ...
        confirm = i["confirm"]
        suspect = i["suspect"]
        heal = i["heal"]
        dead = i["dead"]
        now_confirm = i["nowConfirm"]
        now_severe = i["nowSevere"]
        history[ds] = {"confirm": confirm, "suspect": suspect, "heal": heal, "dead": dead, "now_confirm": now_confirm,
                       "now_severe": now_severe}
    ...
    return history, details

爬取省份的历史数据（新浪）

def get_province_data(province_name):
    province_name = change_to_pinyin(province_name)
    url = 'https://gwpre.sina.cn/interface/news/wap/historydata.d.json?province=' + province_name
    ...
    res = requests.get(url, headers)
    data_all = json.loads(res.text)
    data = data_all["data"]
    history_list = data["historylist"]
    return history_list

echarts地图数据处理

var data = JSON.parse(window.localStorage.getItem('chinadata'));
var ccon_list = [];//地图累计数据
var cnow_list = [];//地图现存数据
for(var i=0;i<data["data"].length;i++){
    var temp = {
        "name":data["data"][i]["name"],
        "value":data["data"][i]["con_value"]
    }//构造符合echarts地图data的键值对
    var temp2 = {
        "name":data["data"][i]["name"],
        "value":data["data"][i]["now_value"]
    }
    ccon_list.push(temp);
    cnow_list.push(temp2);
}

折线图数据处理

var line_data=JSON.parse(window.localStorage.getItem('line_data'));
var date_list_add=[];//新增用日期
var con_list=[];//累计确诊
var cure_list=[];//治愈
var dead_list=[];//死亡

//构造折线图需要的数据
for(var i=0;i<line_data["line_data"].length;i++){
    if (line_data["line_data"][i][7]=="") line_data["line_data"][i][7]=0;
    if (line_data["line_data"][i][5]=="") line_data["line_data"][i][5]=0;
    date_list_add.push(GMT_to_str(line_data["line_data"][i][0]));//把GMT格式的日期转成需要的字符串存储
    con_list.push(line_data["line_data"][i][1]);
    cure_list.push(line_data["line_data"][i][5]);
    dead_list.push(line_data["line_data"][i][7]);
}

取后端数据

function get_con_data() {
    $.ajax({
        url:"/get_con_data",
        success:function (data) {
           window.localStorage.setItem('chinadata',JSON.stringify(data));
        },
        error:function (xhr, type, errorThrown) {
        }
    })
}

# 获得全国地图数据
@app.route('/get_con_data')
def get_con_data():
    res = []
    for tup in tools.get_con_data():
        now = int(tup[1])-int(tup[2])-int(tup[3])
        res.append({"name": tup[0], "con_value": int(tup[1]), "now_value": int(now)})
    return jsonify({"data": res})

# 动态转换折线图数据
function change_to_procon() {
    option.xAxis.data=date_list;
    option.title={left: 'left',text: '累计确诊趋势图'};
    option.legend.selected ={'新增确诊':false,'累计确诊':true,'累计治愈':false,'累计死亡':false};
    pro_chart.setOption(option, true);
}

# 动态转换地图数据
function change_to_wcon() {
    world_option.series[0].data=wcon_list;
    world_chart.setOption(world_option, true);
}

六、心路历程与收获

221701401：这一次结对也是学到很多加上踩了很多坑的作业。比如说python和flask，就除了帮同学找参考代码的时候用过pycharm，从来没接触过python，所以刚开始就特别不习惯写法，比如说句尾不要分号啥的...然后flask也是从头开始，啥都不会，装框架的时候按教程弄了虚拟环境，后面发现不需要上传github，也是急忙删掉，后面有好多也是这样，也就不说太多。最后做出来还是很开心的。

221701402：又是一次焦头烂额的作业，感觉压力很大，因为又要学习很多新的知识，PyCharm IDE上次下了就没动过，这次派上用场了，用python爬数据也很开心，都是差不多的模板，但是要仔细看里面的数据结构，队友也很给力，找了好多资料，终于结束了，可以好好休息了。（大概）

七、对队友的评价

221701401：很优秀，是个很好的队友，我这边的提的需求会很好的完成，也帮我做了界面的UI设计，没有TA我可能做的就比较难看（例如说一些奇奇怪怪的配色）。

221701402：我队友的优秀溢于言表。