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

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

1、前言

本项目是基于flask+echarts搭建的全国疫情追踪的可视化大屏，主要涉及到的技术有csv处理，flask框架，echarts图表。

最终效果如下：

2、实现

我们先搭建一个基础的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来进行板块划分，下面是main.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、号外

  1. 如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
  2. 【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 定制源码】大学生毕设模板、期末大作业模板 、Echarts大数据可视化等! 「一起探讨 ，互相学习」！（vx：python812146）
  3. 以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥
posted @ 2023-07-12 15:28  Dancing-Pierre  阅读(65)  评论(0)    收藏  举报  来源