项目概述

本文主要基于Flask，ECharts等，利用疫情数据搭建可视化大屏，供加深印象学习。学习案例来源网上开源项目，这里进行逐一拆分复现。
应用技术：Python，Flask，ECharts，MySQL
应用软件：Pycharm专业版，HBuilder，Navicat
项目环境：Python3.7，Flask2.2，MySQL5.7

一、大屏布局

1.1大屏拆分

我们把案例项目中大屏可按版块进行拆解，会发现这里大屏主要由标题、折线图、柱状图、地图、滚动图和词云等组成，整体可切分为8个版块，如下：

1.2小试牛刀

我们整体布局前，先通过简单的案例了解前端布局实现方法。
创建一个html文件，这里先调整标题的布局位置，代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><style>#title {position: absolute;width: 40%;height: 10%;top: 0;left: 30%;background: #666666;color: white;font-size: 40px;justify-content: center;display: flex;align-items: center;}</style></head><body><div id="title">我是标题</div><div>我是时间</div><div>我是左1</div><div>我是左2</div><div>我是中1</div><div>我是中2</div><div>我是右1</div><div>我是右2</div></body>
</html>

在浏览器中查看效果如下：

通过上图可以看出，标题已经放置在顶部中间位置。

1.3整体布局

展示效果：

实现代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>疫情监控</title><style>body {margin: 0;background: #333;}#title {position: absolute;width: 40%;height: 10%;top: 0;left: 30%;color: white;font-size: 40px;justify-content: center;display: flex;align-items: center;}#time {position: absolute;height: 10%;right: 5%;top: 5%;color: white;font-size: 16px;}#c1 {position: absolute;width: 40%;height: 25%;top: 10%;left: 30%;color: white;background: #777777;}#c2 {position: absolute;width: 40%;height: 65%;top: 35%;left: 30%;background: #888888;}#l1 {position: absolute;width: 30%;height: 45%;top: 10%;left: 0%;background: #666666;}#l2 {position: absolute;width: 30%;height: 45%;top: 55%;left: 0%;background: #333;}#r1 {position: absolute;width: 30%;height: 45%;top: 10%;right: 0%;background: #666666;}#r2 {position: absolute;width: 30%;height: 45%;top: 55%;right: 0%;background: #333;}</style></head><body><div id="title">我是标题</div><div id="time">我是时间</div><div id="l1">我是左1</div><div id="l2">我是左2</div><div id="c1">我是中1</div><div id="c2">我是中2</div><div id="r1">我是右1</div><div id="r2">我是右2</div></body>
</html>

二、设置时间

展示效果：

实现代码：

<script>function showTime() {var date = new Date()var year = date.getFullYear()var month = date.getMonth() + 1var day = date.getDate()var hour = date.getHours()var minute = date.getMinutes()var second = date.getSeconds()if (hour < 10) {hour = "0" + hour}if (minute < 10) {minute = "0" + minute}if (second < 10) {second = "0" + second}var time = year + "年" + month + "月" + day + "日" + hour + ":" + minute + ":" + second$("#time").html(time)}setInterval(showTime, 1000) //1秒调用1次,刷新时间；标准语法为setInterval(表达式,时间(毫秒)) 两个参数。
</script>

三、数据汇总

3.1连接数据库

这里利用mysql创建本地数据库，通过pymysql实现和数据库交互。

import pymysqldef get_connection():# 连接数据库conn = pymysql.connect(host='localhost',user='dwh',password='******',db='cov',charset='utf8')cursor = conn.cursor()return conn, cursordef close_connection(conn, cursor):# 关闭数据库cursor.close()conn.close()def query(sql, *args):# 查询数据conn, cursor = get_connection()cursor.execute(sql, args)result = cursor.fetchall()close_connection(conn, cursor)return result

3.2查询数据库

数据汇总栏中，需要展示累计确诊、现有确诊、累计治愈和累计死亡四个值，通过pymysql查询数据库即可。

def get_c1_data():sql = """SELECT confirm,confirm_now,heal,deadfrom historyORDER BY ds descLIMIT 1;"""res = query(sql)return res[0]

在后台通过jsonify提取目标数据。

def get_c1_data():data = utils.get_c1_data()return jsonify({"confirm": data[0], "confirm_now": data[1], "heal": data[2], "dead": data[3]})

3.3前端可视化

3.3.1调试前端展示样式

//配置数字和文本样式
.num {width: 25%;float: left;display: flex;align-items: center;justify-content: center;color: gold;font-size: 15px;/*margin-top: 20px;*/
}.txt {width: 25%;float: left;font-family: "幼圆";display: flex;align-items: center;justify-content: center;
}.txt h2 {margin: 0;
}//配置c1排版样式<div id="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>

预览效果：

3.3.2配置ajax请求参数

function get_c1_data() {$.ajax({url: "/c1",success: function (data) {$(".num h1").eq(0).text(data.confirm)$(".num h1").eq(1).text(data.confirm_now)$(".num h1").eq(2).text(data.heal)$(".num h1").eq(3).text(data.dead)},error: function (data) {console.log("请求c1数据失败")}})}

展示效果：

以上，是对数据可视化大屏基础功能实现方法的初步拆解，后续会对图表等展示形式进行分析。

数据大屏|基于Flask搭建数据可视化大屏1相关推荐

华为云平台零代码搭建物联网可视化大屏体验：疫情防控数据大屏
目录一.介绍二.准备三.搭建 1.创建疫情防控大屏应用 2.组件放置 3.组件配置 4.应用打包一.介绍零代码搭建物联网可视化大屏 :自定义物联网场景,根据个人理解实现基于华为云IoT以及可 ...
基于osgEarth搭建三维可视化平台第3讲加载高程数据
基于osgEarth搭建三维可视化平台第3讲加载高程数据一.目标二.内容 (一).加载TMS文件 (二).加载Tif.img等格式文件 (三).加载mb格式文件三.显示效果一.目标可以在 ...
R语言data.table导入数据实战:data.table生成新的数据列（基于已有数据列）、生成多个数据列
R语言data.table导入数据实战:data.table生成新的数据列(基于已有数据列).生成多个数据列目录 R语言data.table导入数据实战:data.
R语言对dataframe行数据进行筛选（row selection）、筛选数据行、基于条件筛选数据行
R语言对dataframe行数据进行筛选(row selection).筛选数据行.基于条件筛选数据行目录
阿里云大数据认证——使用DataV制作实时销售数据可视化大屏-课堂笔记
原文链接:https://juejin.im/post/5c735004e51d45454b62dad5 阿里云Clouder认证五.使用DataV制作实时销售数据可视化大屏 1. 课程目标 (1) ...
全国大学生大数据技能竞赛——基于Scala和Echart的大数据分析与挖掘
基于Scala和Echart的大数据分析与挖掘题目三:大数据分析与挖掘案例 Spark基站统计分析 Scala语法基础数据读取 1．读取文件数据 (1)按行读取 (2)按字符读取 2．写入数据数 ...
echarts大屏模板_完整的可视化大屏分享，科技感十足，各行业直接就能用
你的老板有没有要求过你做一个可视化大屏? 或许在你看来,这就是一个无理的需求,很简单啊,做几个动态图表,直接投影到屏幕上不就行了?就算做出来能用数据增长业务吗?不懂为什么要拍脑袋做大屏,难以理解. 其 ...
物流行业解决方案：聚焦物流行业数据痛点，帮助企业搭建数据平台
伴随着我国制造业.商贸业的迅速发展,与之配套的物流服务水平较之以往有了大幅提高,但同时制造商.贸易商也提出了更高的要求,特别是疫情下对物流可视化的需求也由可选项变成了必需项.本文旨在说明通过BI技术的 ...
python基于flask搭建http服务（二）—— 实现Excel上传、数据清洗、入库
一.技术点利用flask 搭建简易的http服务,实现服务端文件上传: 利用Blueprint将不同业务拆分至不同文件: 利用bootstrap-fileinput组件构建页面: 利用flask_c ...

数据大屏|基于Flask搭建数据可视化大屏1