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

1、前言
2、实现
3、号外

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、号外

如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 定制源码】大学生毕设模板、期末大作业模板、Echarts大数据可视化等! 「一起探讨，互相学习」！（vx：python812146）
以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥

上一篇Windows 环境下 Docker 安装伪分布式 Hadoop

本文作者：Dancing-Pierre

本文链接：https://www.cnblogs.com/wyc-1009/p/17547984.html

posted @ 2023-07-12 15:28 Dancing-Pierre 阅读(41) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

皮埃尔的撒哈拉

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

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

1、前言

2、实现

3、号外

公告

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	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)

	<!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>

	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;
	}