【Python+Flask+Echarts】可视化练习题 ---- COVID-19世界疫苗接种各国进展排名柱状图

骑着蜗牛ひ追导弹'

已于 2022-06-09 20:03:16 修改

阅读量1.7k

点赞数

分类专栏： # Flask&Echart可视化 # Python可视化练习文章标签：数据可视化

于 2021-01-23 14:30:07 首次发布

本文链接：https://blog.csdn.net/qq_45797116/article/details/113031209

版权

Flask&Echart可视化同时被 2 个专栏收录

39 篇文章 8 订阅

订阅专栏

Python可视化练习

29 篇文章 5 订阅

订阅专栏

数据集

本篇的数据来源 https://www.kaggle.com/gpreda/covid-world-vaccination-progress

主要信息：
国家 - 这是提供疫苗接种信息的国家；
国家ISO代码 - 国家的ISO代码；
日期 - 数据输入日期；对于某些日期，我们只有每日接种疫苗，对于其他日期，只有（累计）总数；
疫苗接种总数 - 这是该国疫苗接种总数的绝对值；
接种的总人数 - 根据免疫方案的不同，一个人将接种一种或多种（通常为2种）疫苗；在某一时刻，接种数量可能大于人数；
已完全接种疫苗的总人数 - 这是根据免疫计划（通常为2次）接受整套免疫接种的人数；在某个特定时刻，可能会有一定数量的人接种了该疫苗，而另外一部分（较小的）人接种了该计划中的所有疫苗；
每日疫苗接种（原始） - 对于特定数据输入，该日期/国家的疫苗接种数量；
每日疫苗接种 - 对于某些数据输入，该日期/国家的疫苗接种数量；
截至该国日期为止的总疫苗接种量/接种人数与总人口之间的百分率（百分比）；
总人数每百接种疫苗 - 人口免疫，总人口达在国内的日期之间的比例（百分比）;
人每百全接种总数 - 人口完全免疫，总人口达在国内的日期之间的比例（百分比）;
每天的疫苗接种次数 - 该天和该国家/地区的每日疫苗接种次数；
每百万日接种量 - 该国当前日期的接种数量与总人口之间的比率（ppm）；
该国使用的疫苗 - 该国使用的疫苗总数（最新）；
来源名称 - 信息来源（国家主管部门，国际组织，地方组织等）；
来源网站 - 信息来源网站；

返回顶部

需求

在这里插入图片描述
这个数据集是最新的新冠疫苗接种统计，可能由于某些原因，导致数据集中的许多具体信息缺失。在经过一番的浏览之后，我观察到每日疫苗接种统计数一列相对来说数据完整性较高。所以就借这列，对所列统计日期内的各国家新冠疫苗接种数进行统计排名展示。

主要思路就是：

提取出国家、每日疫苗接种统计两列有效列
按照国家进行分组
对每个国家的每日疫苗接种统计进行求和
对不同的国家进行疫苗接种总数汇总排名
Flask框架传送数据
HTML渲染可视化

返回顶部

代码实现

① python数据预处理

import numpy as np
import pandas as pd
from flask import Flask,render_template

# 读取数据集
data = pd.read_csv("G:\Projects\pycharmeProject-C\Flask\dataset\country_vaccinations.csv")
data.columns = ['国家','国家代码','日期','疫苗接种总数','接种的总人数','已完全接种疫苗的总人数','每日疫苗接种（原始）','每日疫苗接种','截至该国日期为止的总疫苗接种量/接种人数与总人口之间的百分率（百分比）','总人数每百接种疫苗','人每百全接种总数','每百万日接种量','该国使用的疫苗','来源名称','来源网站']

# 填补缺失值
data.fillna(0,inplace=True)

# 统计截止目前为止各国接种的疫苗数
data_use = data[['国家','每日疫苗接种']]
sorted = data_use.groupby(by='国家').agg(sum=('每日疫苗接种','sum')).sort_values(by='sum')
list = sorted.reset_index().values.tolist()

② Flask框架传送数据

# Flask
app = Flask(__name__)
@app.route("/")
def index():
    sheets = list
    return render_template("country_vaccinations01.html",sheet = sheets)
if __name__ == '__main__':
    app.run(debug=True)

③ HTML渲染

<!DOCTYPE html>
<html lang="en" style="height:100%">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="height:100%">
<div style="height:100%" id="container"></div>
<script type="text/javascript" src="../static/echarts.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);

    var data = [{% for item in sheet %}'{{ item.0 }}',{% endfor %}];
    var data1 = [{% for item in sheet %}{{ item.1 }},{% endfor %}];

    var option = null;
    option = {
        title:{
          text:'截止目前为止各国接种的疫苗数目排名'
        },
        tooltip:{
           trigger:'axis',
           axisPointer:{
              type:'shadow'
           }
        },
        legend:{
           show:true
        },
        grid:{
           top:'4%',
           bottom:'2%',
           left:'4%',
           right:'4%',
           containLabel:true
        },
        xAxis:{
           type:'value'
        },
        yAxis:{
           type:'category',
           data:data,
           boundaryGap:true,
           axisLabel:{
              interval:0,
              rotate:0
           },
           axisTick:{
              containWithLabel:true
           }
        },
        series:[
            {
               name:'各国接种疫苗总数',
               type:'bar',
               data:data1
            }
        ]
    };
    if (option && typeof option == "object"){
       myChart.setOption(option);
    }
</script>
</body>
</html>