在数据可视化领域，数据大屏能直观且炫酷地展示数据全貌。本文将分享学习了结合 MySQL、Flask、ECharts 等技术，完成从零构建一套完整的数据大屏系统，涵盖从后端数据抽取到前端可视化呈现的全流程技术细节与实践经验。
一、技术栈选择与整体架构
（一）核心技术栈解析
后端：使用 Python 的 Flask 框架，负责从 MySQL 数据库读取数据，并提供 API 接口。
数据库：MySQL，用于存储原始数据。
前端：HTML 搭建页面结构，CSS 进行样式美化，JavaScript 结合 ECharts 库实现数据可视化图表，通过 Ajax 异步请求获取后端数据。
（二）整体架构流程
- 业务数据存储在 MySQL 数据库中，按主题进行结构化存储
- Flask 后端通过数据库连接工具读取原始数据，进行清洗、转换和聚合
- 处理后的数据通过 RESTful API 接口以 JSON 格式对外提供
- 前端页面通过 Ajax 异步请求获取 JSON 数据
- ECharts 将获取的数据渲染为各类可视化图表，最终在大屏页面展示
二、后端开发：Flask 与 MySQL 交互
（一）数据库连接与操作工具类
首先，我们需要编写工具类来处理与 MySQL 数据库的连接、查询等操作。
例如，创建一个utils.py，采用 “创建 - 使用 - 关闭” 模式，用于连接MySQL数据库：
以下为部分代码示例
import pymysql
# 创建连接的函数
# 返回值为数据库连接对象和游标对象
def get_conn():
# 建立连接
conn = pymysql.connect(
host="localhost",# 数据库主机地址
port=3306,# 数据库端口
user="root",# 数据库用户名
password="123456",# 数据库密码
db="ljl", # 库名
charset="utf8"# 字符编码
)
# 创建游标对象（用于执行SQL语句）
cursor = conn.cursor()
return conn, cursor
# 关闭连接的函数
# 参数：数据库连接对象和游标对象
def close_conn(conn, cursor):
# 先关闭游标
if cursor:
cursor.close()
# 再关闭连接
if conn:
conn.close()
# 通用数据查询函数
# 参数：SQL查询语句
# 返回值：查询结果的元组(tuple)对象
def query(sql):
"""
:param sql: sql查询语句
:return:一个数据查询结果的元组tuple对象
"""
conn,cursor = get_conn() # 创建连接
cursor.execute(sql) # 执行sql语句
res = cursor.fetchall() # 返回查询结果
close_conn(conn,cursor) # 关闭连接
return res# 返回结果
# 获取省份销售数据的函数
# 返回值为包含省份和总销售量的元组
def get_province_data():
"""
查询各省份的销售总量
返回:
tuple: 包含(省份, 总销量)的元组
"""
# 定义SQL查询语句
sql = '''
select
province,
origin+spicy+sauerkraut+tomato+smelly+upgrade as total
from sale_provinces
'''
# 执行查询
res = query(sql)
# 返回结果
return res
这段代码主要实现了以下功能：
- 数据库连接管理（创建和关闭连接）
- 通用的SQL查询功能
- 例子中特定业务需求（获取各省份销售数据）的查询
代码结构分为三个主要部分：
- 连接管理：get_conn()和close_conn()函数
- 通用查询：query()函数
- 业务查询：get_province_data()函数
（二）Flask 应用与 API 接口编写
接着，在 app.py 中编写 Flask 应用，提供数据接口：
以下为部分代码示例
from flask import Flask, render_template # 导入Flask框架核心模块
import utils # 导入自定义工具模块
from json import JSONEncoder # 导入JSON编码器
from flask import jsonify # 导入JSON响应生成工具
from decimal import Decimal # 导入高精度小数处理模块
import pandas as pd # 导入数据分析库
import random # 导入随机数生成模块
# 创建Flask应用实例
app = Flask(__name__)
# 首页路由
@app.route('/')
def index():
"""
处理首页请求
返回:
render_template: 渲染charts.html模板
"""
return render_template('charts.html')
# 省份数据路由
@app.route('/bar')
def bar():
"""
处理柱状图数据请求
返回:
jsonify: 包含处理后的省份销售数据的JSON响应
"""
bar_data = utils.get_province_data()# 获取原始省份销售数据
# 将数据转换为DataFrame
df_pro=pd.DataFrame(bar_data,columns=['省份','总销量'])
# 数据处理：将销量除以10000并保留两位小数
df_pro['总销量']=(df_pro['总销量']/10000).round(2)
# 数据排序：按销量降序排列并取前10条
df_pro=df_pro.sort_values(by='总销量',ascending=False).head(10)
# 将处理后的数据转换为列表格式的字典
bar_data = df_pro.to_dict(orient='list')
return jsonify(bar_data)# 返回JSON格式的数据响应
这段代码主要实现了以下功能：
- Flask应用的基本配置和路由设置
- 首页渲染（charts.html模板）
- 省份销售数据的获取和处理
- 数据处理流程（转换为DataFrame、数值格式化、排序和筛选）
- 数据格式转换（DataFrame到字典）和JSON响应
代码结构分为三个主要部分：
- 导入所需的库和模块
- Flask应用实例的创建和路由配置
- 数据处理和响应的具体实现
三、前端开发：HTML、CSS 与 ECharts 结合
（一）页面结构搭建（html）
以下为html代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入ECharts核心库 -->
<script src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
<!-- 引入jQuery库 -->
<script src="../static/js/jquery-3.7.1.min.js"></script>
<!-- 引入中国地图数据 -->
<script src="../static/js/china.js"></script>
<!-- 引入ECharts词云扩展 -->
<script src="https://assets.pyecharts.org/assets/echarts-wordcloud.min.js"></script>
<!-- 引入自定义样式表 -->
<link rel="stylesheet" href="../static/css/charts.css">
</head>
<body>
<!-- 大屏标题 -->
<div class="titde">袋装螺蛳粉销量大屏</div>
<!-- 主内容容器 -->
<div class="mainbos">
<!-- 左侧图表区域 -->
<div class="cox1">
<!-- 柱状图容器 -->
<div id="bar" class="charts"></div>
<!-- 折线图容器 -->
<div id="line" class="charts"></div>
</div>
<!-- 中间数据展示区域 -->
<div class="cox2">
<!-- 数据标题 -->
<div class="number-title">
<div>今日销量</div>
<div>累计销量</div>
</div>
<!-- 数据展示 -->
<div class="number">
<div id="today">105500</div>
<div id="total">2000</div>
</div>
<!-- 地图容器 -->
<div id="map" class="map"></div>
</div>
<!-- 右侧图表区域 -->
<div class="cox1">
<!-- 饼图容器 -->
<div id="pie" class="charts"></div>
<!-- 词云容器 -->
<div id="cloud" class="charts"></div>
</div>
</div>
<!-- 引入js脚本 -->
<script src="../static/js/bar2.js"></script>
<script src="../static/js/line2.js"></script>
<script src="../static/js/map3.js"></script>
<script src="../static/js/pie3.js"></script>
<script src="../static/js/cloud4.js"></script>
<script src="../static/js/number.js"></script>
</body>
</html>
主要功能
- 多维度数据可视化：通过柱状图、折线图、饼图、词云和中国地图等多种图表形式展示销售数据
- 实时数据监控：显示当日销量和累计销量数据
- 响应式布局：采用CSS网格布局适应不同屏幕尺寸
技术特点
- 采用ECharts实现数据可视化
- 使用jQuery简化DOM操作
- 通过china.js加载中国地图数据
- 使用echarts-wordcloud.min.js实现词云效果
- 采用模块化脚本组织方式
（二）样式美化（css）
html,body{
height: 100%;
}
body{
background: url("../im/整体背景.jpeg")no-repeat;
background-size: cover;
}
.titde{
height: 10%;
/* border: 5px solid #ffffff; */
text-align: center;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
font-size: 30px;
background: url("../im/大标题背景.png")no-repeat center;
background-size: cover;
}
.mainbos{
height: 90%;
/* border: 5px solid #ffffff; */
/* 开启分裂功能 */
display: flex;
}
.cox1{
flex: 2;
/* border: 5px solid #ff7070; */
}
.cox2{
flex: 3;
/* border: 5px solid #8d0000; */
}
.charts{
height: 50%;
/* border: 5px solid #c8ff00; */
}
.number-title{
height: 6%;
/* border: 5px solid #ff0048; */
/* 开启分裂功能 */
display: flex;
}
.number{
height: 15%;
/* border: 5px solid #ff00ff; */
/* 开启分裂功能 */
display: flex;
}
.map{
height: 75%;
/* border: 5px solid #00ff00; */
}
.number-title div{
flex: 1;
/* border: 5px solid #00ffff; */
text-align: center;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
font-size: 20px;
}
@font-face {
font-family: "myFont";
src: url("../fon/DS-DIGIT\ .TTF");
}
.number div{
flex: 1;
/* border: 5px solid #ff00ff; */
text-align: center;
display: flex;
justify-content: center;
align-items: center;
color: #ffe100;
font-size: 60px;
font-family: "myFont";
font-weight: bold;
}
主要功能实现
- 全屏布局：通过height: 100%实现全屏显示
- 背景设置：为body和标题栏设置背景图片
- 弹性布局：使用flex布局实现响应式布局
- 区域划分：将页面划分为标题栏、主内容区和图表区
- 数据展示：为数字展示区域设置特殊样式和字体
- 可视化优化：为图表和地图区域设置合适的高度
（三）ECharts 图表绘制与 Ajax 请求（js）
以柱状图为例，实现图表初始化与数据更新：
//步骤1：选择容器
var chartDom = document.getElementById('bar');
//步骤2：创建图形
var myChart = echarts.init(chartDom);
//步骤3：图形配置项
option = {
//标题
title: {
text: '各区域数据统计',
textStyle: {
color: '#fff', // 标题文字为白色
fontSize: 18
},
left: 'center' // 标题居中显示
},
xAxis: {
type: 'category',
data: ['河南', '山东', '福建', '广西', '辽宁', '广东', '重庆', '陕西', '四川', '新疆'],
axisLabel: {
color: '#fff' // X轴文字颜色（白色）
},
axisLine: {
lineStyle: {
color: '#fff' // X轴线颜色（白色）
}
}
},
yAxis: {
type: 'value',
axisLabel: {
color: '#fff' // Y轴文字颜色（白色）
},
axisLine: {
lineStyle: {
color: '#fff' // Y轴线颜色（白色）
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.1)' // 网格线为浅白色（透明）
}
}
}
},
series: [
{
name: '销量',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, // 垂直方向渐变
[
{offset: 0, color: '#14b1ff'},
{offset: 1, color: '#0c67ad'}
]
)
},
// 柱顶显示数值标签
label: {
show: true,
position: 'top',
color: '#fff', // 标签文字颜色（白色）
fontSize: 12
},
barWidth: '40%' // 调整柱子宽度，优化布局
},
]
};
//步骤4：配置项传递给图形
myChart.setOption(option)
//
$.ajax({
url: '/bar',
type: 'GET',
dataType: 'json',
su***ess: function (data) {
option.xAxis.data = data.省份
option.series[0].data = data.总销量
myChart.setOption(option);
},
error: function (xhr, status, error) {
console.error(error)
}
})
window.addEventListener('resize', function () {
myChart_cloud.resize()
})
代码功能概述
这段JavaScript代码实现了：
- 使用ECharts创建柱状图可视化
- 通过Ajax动态获取数据
- 响应式图表适配
- 数据驱动的图表更新
核心组成部分
- 图表容器：选择DOM元素作为可视化区域
- 配置对象：定义图表的所有视觉属性和数据
- 数据请求：异步获取后端数据
- 更新机制：动态更新图表数据
- 响应处理：确保图表适应不同屏幕尺寸
(四)代码运行结果
四、实践过程中的关键要点与心得
（一）数据库与后端交互
确保 MySQL 数据库连接配置正确，包括主机、端口、用户名、密码和数据库名。在查询数据时，要注意 SQL 语句的正确性，并且合理使用工具类封装数据库操作，提高代码的可维护性。
（二）后端数据处理与接口设计
使用 Flask 构建后端服务时，要根据前端需求设计合适的 API 接口。利用 Pandas 等库对数据进行处理，如排序、计算等，能更高效地为前端提供符合要求的数据格式。
（三）前端图表绘制与异步数据获取
ECharts 提供了丰富的图表类型和配置选项，可根据数据特点选择合适的图表。通过 Ajax 异步请求获取后端数据，能实现页面的无刷新更新，提升用户体验。同时，要注意处理请求失败的情况，保证程序的健壮性。
（四）页面样式与布局
CSS 样式的编写要结合数据大屏的展示需求，合理设置布局、背景、字体等样式，使数据大屏既美观又能清晰展示数据。
五、总结与展望
通过本次实践，从后端 MySQL 数据读取，到 Flask 提供数据接口，再到前端利用 ECharts 绘制可视化图表，完整地实现了数据大屏的搭建。整个过程涉及多种技术的协同工作，加深了对前后端交互、数据可视化等方面的理解。
未来，还可以进一步优化数据大屏的展示效果，如添加更多交互功能、优化图表动画等；也可以扩展数据来源，整合更多类型的数据源，使数据大屏能展示更丰富的信息。
