

轻量级 BI 可视化：基于 Flask 和 MySQL 的数据大屏开发

DotNet技术匠

2025-12-06

导读：个基于 Web 技术栈开发的数据可视化展示系统。

前言

数字化转型加速，企业对数据的实时掌握和直观呈现需求日益迫切。不管是运营监控、资源调度，还是经营分析，一块清晰、动态、信息密度高的数据大屏，往往能成为决策的重要参考依据。

本文介绍一个服务运营数据大屏项目，面向实际需求而开发的一个轻量级但功能完整的 BI（商业智能）可视化解决方案。

项目介绍

项目是一个基于 Web 技术栈开发的数据可视化展示系统，在以图表形式直观呈现万盈服务的经营状况与公司内部资源使用情况。

项目采用前后端分离的简易架构，前端负责视觉呈现与交互，后端通过 Flask 框架提供数据接口，并从 MySQL 数据库中实时拉取业务数据。

整个系统部署简单，只需运行一个 Python 命令即可启动服务，适合中小型企业或团队快速开发自己的运营监控看板。

项目功能

1、实时展示核心经营指标，如服务订单量、客户增长数、收入趋势等；

2、可视化公司资源分布，包括人力配置、设备使用率、区域覆盖情况等；

3、支持多类型图表展示，如柱状图、折线图、饼图、仪表盘等，满足不同维度的数据表达；

4、页面自动刷新或定时轮询后端接口，确保数据的时效性；

5、响应式布局适配大屏显示器，兼顾美观性与信息可读性。

项目特点

项目最大的特点是"小而实用"。没有依赖复杂的商业 BI 工具，而是用最基础的 Web 技术组合（HTML + CSS + JS）实现专业级视觉效果。

界面设计简洁大气，色彩搭配合理，重点数据突出，避免信息过载。同时，整个项目结构清晰，代码易于理解，非常适合初学学习数据可视化开发流程，也便于企业根据自身业务快速定制修改。

项目技术

前端使用原生 HTML 开发页面架构，CSS 实现布局与美化，JavaScript 负责图表渲染（可能集成如 ECharts 或 Chart.js 等开源库；
后端采用 Python 的 Flask 框架，轻量高效，仅需几行代码即可搭建 RESTful 接口；
数据库连接通过 PyMySQL 实现，直接查询 MySQL 中的业务表；

项目结构

templates：存放HTML模板文件，用于定义大屏的页面结构和布局。
static：存放CSS和JavaScript文件，分别用于页面的样式设计和交互逻辑实现。
mysql.py：用于通过PyMySQL连接MySQL数据库，获取数据。
app.py：作为Flask应用的入口文件，定义路由和视图函数，处理前端请求和后端数据交互。

项目代码

from flask import Flask
from flask import render_template
from flask import jsonify
from mysql import Mysql
from flask_cors import CORS

app = Flask(__name__)

CORS(app)


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/left1', methods=['GET', 'POST'])
def getdata1():
    db = Mysql()
    items = db.ys_t()
    return jsonify(items)

@app.route('/left2', methods=['GET', 'POST'])
def getdata2():
    db = Mysql()
    items = db.xmsj_t()
    return jsonify(items)

@app.route('/left3', methods=['GET', 'POST'])
def getdata3():
    db = Mysql()
    data = db.kmys_t()
    items = [{'name': row[0], 'value': float(row[1])} for row in data]
    return jsonify(items)

@app.route('/right1', methods=['GET', 'POST'])
def getdata4():
    db = Mysql()
    items = db.lnsj_t()
    return jsonify(items)


@app.route('/right2', methods=['GET', 'POST'])
def getdata5():
    db = Mysql()
    items = db.gysj_t()
    return jsonify(items)


@app.route('/right3', methods=['GET', 'POST'])
def getdata6():
    db = Mysql()
    items = db.xjlpm_t()
    return jsonify(items)



if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)