本项目是基于flask+echarts搭建的全国疫情实时追踪的可视化大屏，主要涉及到的技术有爬虫，mysql数据库,flask框架,echarts图表。关于flask知识点，可学习另一篇文章Flask全套知识点从入门到精通，学完可直接做项目

最终效果如下：

需求分析

从最终效果图可以看出，我们将屏幕分为4大板块（页面排布是左中右+上），第一板块是最上面的部分，包括大屏标题以及当前的实时时间；第二板块是最左边，上面的全国新增趋势折线图（新增确诊、治愈、死亡），下面是全国累计趋势折线图（累计确诊、治愈、死亡）；第三板块是中间，上面是当天的一些数据，下面是全国累计确诊的疫情地图；第四板块是右边，上面是新增确诊人数Top前五的省份柱状图,下面是微博热搜话题的词云图。

开发工具:

vscode编辑器

python3.8

如果你在开发的过程中发现你编写的html或css文件在页面中没有更新，而是你上次编写的代码,也就是缓存的问题，这时候你需要在app.py中添加如下代码即可解决:

@app.after_request
def apply_caching(response):
    response.headers["Cache-Control"] = "no-cache"
    return response

项目实施

项目的最终文件目录结构如下:

1.数据采集

首先，我们得要有数据才能进行展示，这里我们选择用爬虫来进行数据采集并保存到mysql数据库中，考虑到平台限制，这里就不方便展示爬虫代码，需要的评论留言或私信。

2.搭建flask应用

这里我们先搭建一个基础的flask应用

from flask import Flask,render_template
app = Flask(__name__)
app.config['JSON_AS_ASCII'] = False
@app.route('/')
def index():
    return render_template('main.html')
if __name__ == '__main__':
    app.run(debug=True)

接着，需要编写main.html页面(这里我就直接放最终的代码)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全国疫情实时追踪</title>
    <link rel="stylesheet" href="../static/css/main.css">
    <script src="../static/js/echarts.min.js"></script>
    <script src="../static/js/china.js"></script>
    <script src="../static/js/jquery-3.6.0.min.js"></script>
    <script src="../static/js/echarts-wordcloud.min.js"></script>
</head>
<body>
  <div class="title">全国疫情实时追踪</div>
  <div class="tim"></div>
  <div class="l1" id="l1"></div>
  <div class="l2" id="l2"></div>
  <div class="c1">
      <div class="num"><h1></h1></div>
      <div class="num"><h1></h1></div>
      <div class="num"><h1></h1></div>
      <div class="num"><h1></h1></div>
      <div class="txt"><h2>累计确诊</h2></div>
      <div class="txt"><h2>新增确诊</h2></div>
      <div class="txt"><h2>累计治愈</h2></div>
      <div class="txt"><h2>累计死亡</h2></div>
    </div>
    <div class="c2" id="main" ></div>
    <div class="r1" id="r1"></div>
    <div class="r2" id="r2"></div>
   <script src="../static/js/get_data.js"></script>
   <script src="../static/js/ec_center.js"></script>
   <script src="../static/js/ec_left1.js"></script>
   <script src="../static/js/ec_left2.js"></script>
   <script src="../static/js/ec_right1.js"></script>
   <script src="../static/js/ec_right2.js"></script>
</body>
</html>

其次，我们还需要编写css来进行板块划分

body{
    margin: 0;
    background-color: #333;
}
.title{
    position: absolute;
    width: 40%;
    height: 10%;
    top: 0;
    left: 30%;
    color: white;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.l1{
    position: absolute;
    width: 30%;
    height: 45%;
    top: 10%;
    left: 0;
    background-color: aquamarine;
}
.l2{
    position: absolute;
    width: 30%;
    height: 45%;
    top: 55%;
    left: 0;
    background-color: blue;
}
.c1{
    position: absolute;
    width: 40%;
    height: 25%;
    top: 10%;
    left: 30%;
    /* background-color: blue; */
}
.num{
    width: 25%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    color: gold;
    font-size: 16px;
}
.txt{
    width: 25%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "幼圆";
    color: whitesmoke;
    font-size: 14px;
}
.c2{
    position: absolute;
    width: 40%;
    height: 65%;
    top: 35%;
    left: 30%;
    /* background-color: whitesmoke; */
}
.r1{
    position: absolute;
    width: 30%;
    height: 45%;
    top: 10%;
    right: 0;
    background-color: burlywood;
}
.r2{
    position: absolute;
    width: 30%;
    height: 45%;
    top: 55%;
    right: 0;
    background-color: brown;
}
.tim{
    position: absolute;
    /* width: 30%; */
    height: 10%;
    top: 5%;
    right: 2%;
    /* background-color: blueviolet; */
    font-size: 20px;
    color: whitesmoke;
}

3.可视化展示

接下来我将按照4大板块进行介绍

第一板块

那个大屏标题文字在上面的html页面中有，这里就不说了。还有一个就是右上角的时间显示,这里我们需要编写一个获取时间的接口，然后通过ajax来发送请求进行调用.

utils.py

import time
import pymysql
import collections
import jieba
import re
def get_time():
    time_str = time.strftime('%Y{}%m{}%d{} %X ')
    return time_str.format('年','月','日')

app.py

import utils
@app.route('/time')
def time():
    return utils.get_time()

get_data.js

function gettime(){
    $.ajax({
        url:'/time',
        timeout:10000,//超时时间
        success:function(data){
            $('.tim').html(data)
        },
        error:function(data){
        }
    });
};

第二板块

第二板块是左边的两个图

流程步骤就是先从数据库中获取数据，在flask应用中编写接口，最后在页面中通过ajax来发送进行调用，这是图表展示的通用步骤，下面我就不再叙述了。

这里因为我们要多次从数据库获取数据，所以我们先封装一下方法，便于后面获取数据

utils.py

def get_conn():
    """
    :return: 连接，游标
    """
    # 创建连接
    conn = pymysql.connect(host="127.0.0.1",
                           user="xxx", # 这里写你的mysql用户名
                           password="xxx", # 这里写你的mysql密码
                           db="yiqing",  # 这里写你的mysql中创建的数据库
                           charset="utf8")
    # 创建游标
    cursor = conn.cursor()# 执行完毕返回的结果集默认以元组显示
    return conn, cursor
def close_conn(conn, cursor):
    cursor.close()
    conn.close()
def query(sql,*args):
    """
    封装通用查询
    :param sql:
    :param args:
    :return: 返回查询到的结果，((),(),)的形式
    """
    conn, cursor = get_conn()
    cursor.execute(sql,args)
    res = cursor.fetchall()
    close_conn(conn, cursor)
    return res

左上的图：

utils.py

def get_l1_data():
    # 因为会更新多次数据，取时间戳最新的那组数据
  sql = '''
    SELECT ds,confirm_add,heal_add,dead_add
    FROM history
    '''
  res = query(sql)
  return res

app.py

from flask import jsonify
@app.route('/l1')
def get_l1_data():
    data = utils.get_l1_data()
    day,confirm_add,heal_add,dead_add = [],[],[],[]
    for item in data:
        day.append(item[0].strftime('%m-%d'))
        confirm_add.append(item[1])
        heal_add.append(item[2])
        dead_add.append(item[3])
    return jsonify({'day':day,'confirm_add':confirm_add,'heal_add':heal_add,'dead_add':dead_add})

get_data.js

function get_l1_data(){
    $.ajax({
        url:'/l1',
        success:function(data){
            ec_left1_Option.xAxis[0].data=data.day
            ec_left1_Option.series[0].data=data.confirm_add
            ec_left1_Option.series[1].data=data.heal_add
            ec_left1_Option.series[2].data=data.dead_add
            ec_left1.setOption(ec_left1_Option)
        },
        error:function(data){
        }
    });
}

ec_left1.js

var ec_left1 = echarts.init(document.getElementById('l1'), "dark");
var ec_left1_Option = {
  tooltip: {
    trigger: 'axis',
    //指示器
    axisPointer: {
      type: 'line',
      lineStyle: {
        color: '#7171C6'
      }
    },
  },
  legend: {
    data: ['新增确诊', '新增治愈','新增死亡'],
    left: "right"
  },
  //标题样式
  title: {
    text: "全国新增趋势",
    textStyle: {
      color: 'white',
    },
    left: 'left'
  },
  //图形位置
  grid: {
    left: '4%',
    right: '6%',
    bottom: '4%',
    top: 50,
    containLabel: true
  },
  xAxis: [{
    type: 'category',
    data: []
  }],
  yAxis: [{
    type: 'value',
    //y轴线设置显示
    axisLine: {
      show: true
    },
    position:'left',
    axisLabel: {
      show: true,
      color: 'white',
      fontSize: 12,
      formatter: function(value) {
        if (value >= 1000) {
          value = value / 1000 + 'k';
        }
        return value;
      }
    },
    //与x轴平行的线样式
    splitLine: {
      show: true,
      lineStyle: {
        width: 1,
      }
    }
  },
  {
    type: 'value',
    //y轴线设置显示
    axisLine: {
      show: true
    },
    position:'right',
    axisLabel: {
      show: true,
      color: 'white',
      fontSize: 12,
      formatter: function(value) {
        return value;
      }
    },
    //与x轴平行的线样式
    splitLine: {
      show: true,
      lineStyle: {
        width: 1,
      }
    }
  } 
],
  series: [{
    name: "新增确诊",
    type: 'line',
    smooth: true,
    yAxisIndex:0,
    data: []
  }, {
    name: "新增治愈",
    type: 'line',
    smooth: true,
    yAxisIndex:1,
    data: []
  },{
    name: "新增死亡",
    type: 'line',
    smooth: true,
    yAxisIndex:1,
    data: []
  }
]
};
ec_left1.setOption(ec_left1_Option)

左下：

utils.py

def get_l2_data():
  sql = '''
    SELECT ds,confirm,heal,dead
    FROM history;
    '''
  res = query(sql)
  return res

app.py

@app.route('/l2')
def get_l2_data():
    data = utils.get_l2_data()
    day,confirm,heal,dead = [],[],[],[]
    for item in data:
        day.append(item[0].strftime('%m-%d'))
        confirm.append(item[1])
        heal.append(item[2])
        dead.append(item[3])
    return jsonify({'day':day,'confirm':confirm,'heal':heal,'dead':dead})

get_data.js

function get_l2_data(){
    $.ajax({
        url:'/l2',
        success:function(data){
            ec_left2_Option.xAxis[0].data=data.day
            ec_left2_Option.series[0].data=data.confirm
            ec_left2_Option.series[1].data=data.heal
            ec_left2_Option.series[2].data=data.dead
            ec_left2.setOption(ec_left2_Option)
        },
        error:function(data){
        }
    });
}

ec_left2.js

var ec_left2 = echarts.init(document.getElementById('l2'), "dark");
var ec_left2_Option = {
  tooltip: {
    trigger: 'axis',
    //指示器
    axisPointer: {
      type: 'line',
      lineStyle: {
        color: '#7171C6'
      }
    },
  },
  legend: {
    data: ['累计确诊', '累计治愈','累计死亡'],
    left: "right"
  },
  //标题样式
  title: {
    text: "全国累计趋势",
    textStyle: {
      color: 'white',
    },
    left: 'left'
  },
  //图形位置
  grid: {
    left: '4%',
    right: '6%',
    bottom: '4%',
    top: 50,
    containLabel: true
  },
  xAxis: [{
    type: 'category',
    data: []
  }],
  yAxis: [{
    type: 'value',
    //y轴字体设置
    //y轴线设置显示
    axisLine: {
      show: true
    },
    axisLabel: {
      show: true,
      color: 'white',
      fontSize: 12,
      formatter: function(value) {
        if (value >= 1000) {
          value = value / 1000 + 'k';
        }
        return value;
      }
    },
    //与x轴平行的线样式
    splitLine: {
      show: true,
      lineStyle: {
        // color: '#FFF',
        width: 1,
        // type: 'solid',
      }
    }
  },
  {
    type: 'value',
    //y轴线设置显示
    axisLine: {
      show: true
    },
    position:'right',
    axisLabel: {
      show: true,
      color: 'white',
      fontSize: 12,
      formatter: function(value) {
        if (value >= 1000) {
          value = value / 1000 + 'k';
        }
        return value;
      }
    },
    //与x轴平行的线样式
    splitLine: {
      show: true,
      lineStyle: {
        width: 1,
      }
    }
  } ],
  series: [{
    name: "累计确诊",
    type: 'line',
    smooth: true,
    yAxisIndex:0,
    data: []
  }, {
    name: "累计治愈",
    type: 'line',
    smooth: true,
    yAxisIndex:1,
    data: []
  },{
    name: "累计死亡",
    type: 'line',
    smooth: true,
    yAxisIndex:1,
    data: []
  }
]
};
ec_left2.setOption(ec_left2_Option)

第三板块

第三板块是中间部分

先完成上面的数值数据填充

utils.py

def get_c1_data():
    """
    :return: 返回大屏div id=c1 的数据
    """
    # 因为会更新多次数据，取时间戳最新的那组数据
    sql = """
    SELECT confirm,confirm_add,heal,dead
    FROM history
    ORDER BY ds DESC LIMIT 1;
    """
    res = query(sql)
    return res[0]

app.py

@app.route('/c1')
def get_c1_data():
    data = utils.get_c1_data()
    return jsonify({'confirm':int(data[0]),'confirm_add':int(data[1]),'heal':int(data[2]),'dead':int(data[3])})

get_data.js

function get_c1_data(){
    $.ajax({
        url:'/c1',
        success:function(data){
            $(".num h1").eq(0).text(data.confirm)
            $(".num h1").eq(1).text(data.confirm_add)
            $(".num h1").eq(2).text(data.heal)
            $(".num h1").eq(3).text(data.dead)
        },
        error:function(data){
        }
    });
}

接着完成下面的地图

utils.py

def get_c2_data():
    """
    :return:  返回各省数据
    """
    # 因为会更新多次数据，取时间戳最新的那组数据
    sql = '''
    SELECT province,sum(confirm_now)
    FROM details
    GROUP BY province;
    '''
    res = query(sql)
    return res

app.py

@app.route('/c2')
def get_c2_data():
    res = []
    for item in utils.get_c2_data():
        res.append({'name':item[0],'value':int(item[1])})
    return jsonify({'data':res})

get_data.py

function get_c2_data(){
    $.ajax({
        url:'/c2',
        success:function(data){
            ec_center_option.series[0].data=data.data
            ec_center_option.series[0].data.push({
                name:"南海诸岛",value:0
            })
            ec_center.setOption(ec_center_option)
        },
        error:function(data){
        }
    });
}

ec_center.js

const ec_center_option = {
    tooltip: {
        trigger: 'item',
        formatter: '名称：{a}<br/>省份：{b}<br/>确诊人数：{c}'
    },
    //左侧小导航图标
    visualMap: {
        show: true,
        x: 'left',
        y: 'bottom',
        textStyle: {
            fontSize: 8,
            color:['#FFFFFF']
        },
        splitList: [{ start: 0,end: 9 },
            {start: 10, end: 99 }, 
      { start: 100, end: 999 },
            {  start: 1000, end: 9999 },
            { start: 10000 }],
        color: ['#8A3310', '#C64918', '#E55B25', '#F2AD92', '#F9DCD1']
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: 'china',
            roam: false,
            itemStyle: {
                normal: {
                    borderWidth: .5, //区域边框宽度
                    borderColor: '#62d3ff', //区域边框颜色
                    areaColor: "#b7ffe6", //区域颜色
                    label: { show: true }
                },
                emphasis: { //鼠标滑过地图高亮的相关设置
                    borderWidth: .5,
                    borderColor: '#fff',
                    areaColor: "#fff",
                    label: { show: true }
                }},
            data: [] // data_list
        }
    ]
};
ec_center = echarts.init(document.getElementById('main'));
ec_center.setOption(ec_center_option)

到这里第三板块就完成了！

第四板块

首先完成上面的柱状图

utils.py

def get_r1_data():
    """
    :return:  返回新增确诊人数前5名的省份
    """
    sql = '''
            SELECT province,confirm FROM 
            (select province ,sum(confirm_add) as confirm from details
            where update_time=(select update_time from details
            order by update_time desc limit 1)
            group by province) as a 
            ORDER BY confirm DESC LIMIT 7;
            '''
    res = query(sql)
    return res

app.py

@app.route('/r1')
def get_r1_data():
    name,value = [],[]
    for n,v in utils.get_r1_data()[2:]:
        name.append(n)
        value.append(int(v))
    return jsonify({'name':name,'value':value})

get_data.js

function get_r1_data(){
    $.ajax({
        url:'/r1',
        success:function(data){
            ec_right1_option.xAxis.data=data.name
            ec_right1_option.series[0].data=data.value
            ec_right1.setOption(ec_right1_option)
        }
    });
}

ec_right1.js

var ec_right1 = echarts.init(document.getElementById('r1'),"dark");
var ec_right1_option = {
  //标题样式
  title : {
      text : "新增确诊人数TOP5",
      textStyle : {
          color : 'white',
      },
      left : 'left'
  },
    color: ['#3398DB'],
      tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
      },
    xAxis: {
        type: 'category',
    color : 'white',
        data: []
    },
    yAxis: {
        type: 'value',
     color : 'white',
    },
    series: [{
        data: [],
        type: 'bar',
    barMaxWidth:"50%"
    }]
};
ec_right1.setOption(ec_right1_option)

接着完成下面的词云图

utils.py

def get_r2_data():
    """
    :return:  返回最近的20条热搜
    """
    sql = 'select title from focu_news order by news_time desc limit 20'
    res = query(sql)
    all_word = ''
    for item in res:
        all_word += item[0]
    new_data = re.findall('[\u4e00-\u9fa5]+', all_word, re.S)
    new_data = "/".join(new_data)
    seg_list_exact = jieba.cut(new_data, cut_all=True)
    result_list = []
    with open('停用词库.txt', encoding='utf-8') as f: 
        con = f.readlines()
        stop_words = set()
        for i in con:
            i = i.replace("\n", "")   # 去掉读取每一行数据的\n
            stop_words.add(i)
    for word in seg_list_exact:
        if word not in stop_words and len(word) > 1:
            result_list.append(word)
    word_counts = collections.Counter(result_list)
    # 词频统计：获取前80最高频的词
    word_counts_top = word_counts.most_common(80)
    return word_counts_top

app.py

@app.route('/r2')
def get_r2_data():
    data = utils.get_r2_data()
    d = []
    for i in data:
        k = i[0]
        v = int(i[1])
        d.append({"name": k, "value": v})
    return jsonify({"kws": d})

get_data.py

function get_r2_data() {
    $.ajax({
        url: "/r2",
        success: function (data) {
            ec_right2_option.series[0].data=data.kws;
            ec_right2.setOption(ec_right2_option);
        }
    })
}

ec_right2.js

var ec_right2 = echarts.init(document.getElementById('r2'), "dark");
var ec_right2_option = {
    // backgroundColor: '#515151',
    title: {
        text: "微博热搜话题",
        textStyle: {
            color: 'white',
        },
        left: 'left'
    },
    tooltip: {
        show: false
    },
    series: [{
        type: 'wordCloud',
        // drawOutOfBound:true,
        gridSize: 1,
        sizeRange: [12, 55],
        rotationRange: [-45, 0, 45, 90],
        // maskImage: maskImage,
        textStyle: {
            normal: {
                color: function () {
                    return 'rgb(' +
                        Math.round(Math.random() * 255) +
                        ', ' + Math.round(Math.random() * 255) +
                        ', ' + Math.round(Math.random() * 255) + ')'
                }
            }
        },
        // left: 'center',
        // top: 'center',
        // // width: '96%',
        // // height: '100%',
        right: null,
        bottom: null,
        // width: 300,
        // height: 200,
        // top: 20,
        data: []
    }]
}
ec_right2.setOption(ec_right2_option);

到这里，全部的页面及渲染就编写完成！

4.添加定时任务

这里忘记说了，前面每次在get_data.js中编写的函数，最后要调用才能使用

get_c1_data()
get_c2_data()
get_l1_data()
get_l2_data()
get_r1_data()
get_r2_data()

这里我们还需要给定义发送请求的ajax函数设置定时，也就是在get_data.js里面添加

setInterval(gettime,1000) # 时间是1s获取一次
setInterval(get_c1_data,1000*60*60) # 1小时发送一次请求
setInterval(get_c2_data,1000*60*60*6)
setInterval(get_l1_data,1000*60*60*12)
setInterval(get_l2_data,1000*60*60*12)
setInterval(get_r1_data,1000*60*60*6)
setInterval(get_r2_data,1000*10)

项目总结

本项目适合flask初学者来进行练手，当然前提也要会一些前端的知识，关于Echarts的使用可以去官网进行学习。关于页面的布局，可自由发挥来进行设计，或者在此基础上来进行创新，开发新的功能。

Flask+Echarts搭建全国疫情可视化大屏

需求分析

项目实施

1.数据采集

2.搭建flask应用

3.可视化展示

第二板块

第三板块

第四板块

4.添加定时任务

项目总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Flask+Echarts搭建全国疫情可视化大屏

需求分析

项目实施

1.数据采集

2.搭建flask应用

3.可视化展示

第二板块

第三板块

第四板块

4.添加定时任务

项目总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景