Advertisement

flask pyecharts 数据可视化大屏

阅读量:

本项目基于Flask框架构建了一个数据可视化大屏应用,并结合Pyecharts生成可视化图表。以下是主要摘要:1. 技术栈 - 后端:Flask框架用于处理Web请求和数据接口服务 - 数据可视化:Pyecharts库用于生成Echarts图表 2. 功能模块 - 数据获取:通过工具类utils从数据库中读取疫情数据 - 数据展示:使用Flask注册路由展示不同维度的数据(如累计确诊、治愈、死亡等) - 图表交互:AJAX技术实现动态更新图表内容 3. 实现流程 - 数据预处理与获取:利用Python代码从数据库中提取并清洗数据 - 图表生成与展示:通过Pyecharts生成柱状图、折线图等可视化图表,并传递至前端显示 4. 应用效果 - 实现了一个包含多维度数据分析与可视化的完整Web应用 - 支持疫情数据分析及实时更新展示功能 5. 优势总结 Flasksimplified后端逻辑管理与数据服务,Pyecharts直观易用的数据可视化解决方案,两者结合推动了项目的成功落地

基于Flask和PyEcharts的数据可视呈现大型界面

  • Flask 简介

    • Flask 是一个快速发展的 Python 微服务框架
    • 它提供了高效的基础功能
    • 常用于构建RESTful API服务
  • Pyecharts 简介

    • Pyecharts 是一个交互式图表可视化库
    • 提供丰富的图表类型选择
    • 支持离线运行
  • 数据可视化大屏

    • 数据可视化大屏是一个集成了多种分析功能的大屏平台
    • 支持在线数据分析与展示
  • 环境准备

    • 需要安装必要的开发工具
    • 推荐使用 Python 解释器及常用库套装
  • 安装 Flask 工具包

    • 使用命令行执行安装操作
    • 建议在虚拟环境中进行安装以避免冲突依赖
  • 安装 Pyecharts 工具包

    • 同样推荐在虚拟环境中进行安装

    • 使用 pip 命令完成安装流程

    • 达到预期目标

    • 从数据库中获取相关数据

    • 开发app.py文件

    • 设置定时任务运行

    • 为flask应用配置完整的路由配置

本资源通过AJAX技术实现了数据通信功能,并对获取的数据进行了归纳总结。综上所述,本资源完成了对数据的全面管理与整合。

Flask 介绍

Flask 是一个轻量级的网络框架和Python微服务开发工具,在Web应用开发中具有重要地位。它以其高效的性能和灵活的可配置性著称,并且支持多种多样的插件扩展功能。

Flask 提供了完整的功能模块集合以及快速上手的学习曲线,在中小规模的应用开发中表现出色,并且在大数据量处理方面也展现出良好的扩展性特点。

Flask 是一种轻量级的 Python 基于网络的应用框架。它能够加速开发者构建高效且功能强大的 Web 应用程序,并提供便捷的路由配置机制来响应各种 URL 请求。 Flask 还支持返回 HTML 页面、JSON 格式的数据以及其他多种数据类型。例如 Flask 轻松允许你构建基本但功能完善的网站 Flask 轻松允许你构建基本但功能完善的网站 Flask 轻松允许你构建基本但功能完善的网站。例如 Flask 轻松允许你构建基本但功能完善的网站,在大屏数据可视化场景中 Flask 作为后端框架主要负责数据处理与传输工作。从数据库中提取必要的信息并对其执行清洗与分析操作之后将处理结果传递给前端用于生成动态展示内容。

Pyecharts: 数据可视化工具的全面介绍

Pyecharts 是专为 Python 编程人员设计的一个数据可视化库。它基于 Echarts 开发,在百度开源社区中获得了广泛的认可。该工具不仅提供多种类型的可视化图表如柱状图、折线图以及饼图等基本图表类型,并且支持大量交互操作如数据缩放、数据排序和数据筛选等功能。通过 Pyecharts 在 Python 中生成各种图表变得异常简便。例如,在实际应用中你只需要定义好 x 轴和 y 轴的数据参数然后就可以轻松地生成所需的图形对象并完成数据分析任务

数据可视化平台

数据可视化大屏是一种能够以海量数据为基础,在单一屏幕上直观呈现多种图形与图表的应用工具。其主要目标是帮助用户快速掌握关键信息和市场趋势。

这类大屏广泛应用于企业监控中心以及数据分析部门等领域。例如,在电商领域中,这类系统可实时展示各类产品的销售额数据及其地区分布情况;而在工业生产环境中,则可追踪设备运行状态参数如温度、压力及生产效率等重要指标。

通过将Flask作为后端平台提供高效的数据接口服务,并利用Pyecharts生成高质量图表对象的方式构建数据可视化大屏应用。在这种架构设计下,Flask负责接收并处理来自各端点的数据请求,并将处理结果传递给前端展示模块;而Pyecharts则根据后端返回的数据生成所需图表对象,并将其传递至前端页面进行渲染展示。这种设计使得系统不仅能够整合多种不同类型的图表形式,并且能根据用户的交互操作(如筛选功能或切换图表类型)实时更新显示内容。

环境准备

环境准备

按照既定方案实施硬件资源的配置工作,确保系统运行所需的物理条件得到充分满足;通过自动化工具执行软件初始化流程,为后续系统的正常运转奠定基础;定期监控网络基础设施,确保数据传输通道的安全性和稳定性;针对特殊需求启动专用设备,提升整体系统处理能力;制定详细的部署计划,明确各环节的操作规范和时间安排;定期测试环境配置方案,确保最终部署成果达到预期目标并符合项目要求。

配置Flask框架模块

为了在命令行中安装Flask库,请通过以下命令运行:pip install flask

Pyecharts的安装流程非常简单

同样可以通过pip进行安装运行pip install pyecharts命令。Pyecharts是一个用于生成ECharts图表的Python库而ECharts则是百度开源的一个数据可视化工具它提供了多种类型的图表并支持良好的交互体验。

达成目标:提升系统性能表现

最近稍微熟悉了一下Flask语言,并决定深入研究疫情大数据分析的技术与应用。

直接展示了效果图;依旧觉得这种排版很称心如意

在这里插入图片描述

开发工具类utils用于从数据库中读取数据信息

我们首先要澄清各个模块所需的信息。 然后我们进行深入分析当前数据格式。

在这里插入图片描述

例如累计确诊数据, 我们只需计算每日各地区的确诊病例总量即可汇总得出总确诊病例数, 而无需对整列数据进行逐一求和. 因此获取每个表格中的数据则需要进行一些简单的思考. 以下是工具类代码. 因为我们将处理两张结构相同的表, 所以类初始化参数需定义为: 数据库库名称 数据库用户名 数据库密码 (此处用数学公式...表示)

关于查询,请您利用pandas库获取数据库表中的数据,并由该库负责处理这些数据。个人觉得这样写起来更加方便。

复制代码
    import datetime
    import traceback
    
    import pandas as pd
    import pymysql
    from sqlalchemy import create_engine
    
    
    class utils:
    def __init__(self, db_name, user, password):
        self.db_name = db_name
        self.user = user
        self.password = password
        self.data = self.query("epidemic")
    
    def get_conn(self):
        '''
    
        :return:连接
        '''
        # 创建连接
        conn = pymysql.connect(host="127.0.0.1", port=3306, user=self.user, password=self.password,
                               db=self.db_name, charset="utf8")
        cursor = conn.cursor()
        return conn, cursor
    
    def close_conn(self, conn, cursor):
        cursor.close()
        conn.close()
    
    def query(self, table_name, use_sql=None):
        """
        :param sql:
        :return:epidemic: DataFrame
        """
        # 使用pandas从数据库中读取疫情数据
        try:
            conn = create_engine('mysql://{}:{}@localhost:3306/{}?charset=utf8'.format(self.user, self.password, self.db_name))
            sql = use_sql if use_sql else "select * from {}".format(table_name)
            epidemic = pd.read_sql(sql, con=conn)
            return epidemic
        except Exception as e:
            traceback.print_exc(e)
            return None
    
    def get_c1_data(self):
        '''
        获取c1的四个数据:累计确诊、累计治愈、累计死亡、新增死亡
        :return:
        '''
        sql = "select date, confirm, nowConfirm,heal,dead from china_day order by date desc limit 1"
        df = self.query("china_day", sql)
        confirm = int(df["confirm"][0])
        heal = int(df["heal"][0])
        dead = int(df["dead"][0])
        now_confirm = int(df["nowConfirm"][0])
    
        return [confirm, heal, dead, now_confirm]
    
    def get_c2_data(self):
        '''
        获取中国各省的疫情数据
        :return:
        '''
        # 将地区-确诊人数以键值对的形式保存
        dict = {}
    
        # 获取最新数据
        # 从数据库中获取最近一次更新的数据
        sql = "select distinct 疫情地区,日期,确诊 from china_total_epidemic order by 日期 desc limit 34"
        df = self.query("china_total_epidemic", sql)
        for p, v in zip(df.疫情地区, df.确诊):
            dict[p] = v
        return dict
    
    def get_l1_data(self):
        '''
        获取疫情期间每日累计数据
        :return:
        '''
        sql = "select date, confirm, heal,dead from china_day order by date desc"
        df = self.query("", sql)
        return df
    
    def get_l2_data(self):
        '''
        获取疫情期间每日新增数据
        :return:
        '''
        sql = "select date, confirm,heal,dead from china_day_add order by date desc"
        df = self.query("",sql)
        return df
    
    def get_r1_data(self):
        '''
        获取除湖北地区确诊人数最多的省份
        :return:
        '''
        sql = "select 疫情地区,确诊 from world_epidemic order by 日期 desc limit 5"
        df = self.query("",sql)
        return df
    
    def get_r2_data(self):
        '''
        获取世界各国的疫情数据
        :return:
        '''
        df = self.query("world_epidemic")
        return df[["name","疫情地区","确诊"]]
    
    
    if __name__ == "__main__":
    u = utils("myspider", "root", "123456")
    u.get_c1_data()
    
    
    python
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-07-13/U9VRx3E8dOJA2ksercPbjLIgla1D.png)

开发App.py系统

随后我们将开发Flask的核心模块app.py代码,并配置路由结构。所有路由名称将根据main.html中各部分的id自动生成。在处理每个请求时,我们会将数据库返回的数据转换为JSON格式以供前端展示。另外,请注意,在各个方法中我们会将从数据库中获取的数据进行格式转换并传递给前端页面。此外,请确保我们正确地注册了必要的定时任务,并保证爬虫脚本能够定期更新数据库中的相关信息。

请根据需求设置定期执行的作业

Flask官方提供了用于注册定时任务的apscheduler工具包。\n\n在我们的开发中,默认情况下只需运行预编译好的spider.py脚本即可触发定时任务。\n\n具体的流程如后,在Flask服务启动之前即可完成。

复制代码
    from flask_apscheduler import APScheduler
    def crawl_daily_data():
    """
    定时任务,每天爬取一次数据
    :return:
    """
    cur_path = os.path.dirname(os.path.abspath(__file__))
    os.system("python {}".format(os.path.join(cur_path, "spider.py")))
    
    if __name__ == '__main__':
    # 定时任务 ,间隔一天执行
    scheduler=APScheduler()
    scheduler.add_job(crawl_daily_data,'interval',days=1)
    scheduler.init_app(app=app)
    scheduler.start()
    
    
    python
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-07-13/D7UhgFZmYK4SGeMdzvE1tR3B9HTc.png)

Flask框架配置管理全面源代码

代码如下:

复制代码
    import os
    import time
    
    from flask import Flask
    from flask import jsonify
    from flask import render_template
    from flask_apscheduler import APScheduler
    
    import utils
    
    app = Flask(__name__)
    
    # 工具类,初始化参数为数据库名,数据库表名,数据库账号,数据库密码
    u = utils.utils("myspider", "root", "123456")
    
    
    def crawl_daily_data():
    """
    定时任务,每天爬取一次数据
    :return:
    """
    cur_path = os.path.dirname(os.path.abspath(__file__))
    os.system("python {}".format(os.path.join(cur_path, "spider.py")))
    
    
    @app.route('/')
    def hello_world():
    return render_template("main.html")
    
    
    @app.route('/time')
    def get_time():
    time_str = time.strftime("%Y{}%m{}%d{}%X")
    return time_str.format("年", "月", "日")
    
    
    @app.route('/c1')
    def get_c1_data():
    data = u.get_c1_data()
    print(data)
    return jsonify({"dignose": data[0], "heal": data[1], "dead": data[2], "newly_add": data[3]})
    
    
    @app.route('/c2')
    def get_c2_data():
    res = []
    data = u.get_c2_data()
    for key, value in data.items():
        res.append({"name": key, "value": value})
    return jsonify({"data": res})
    
    
    @app.route('/l1')
    def get_l1_data():
    data = u.get_l1_data()
    day = data.date.tolist()
    dignose = data.confirm.tolist()
    heal = data.heal.tolist()
    dead = data.dead.tolist()
    return jsonify({"days": day, "dignose": dignose, "heal": heal, "dead": dead})
    
    
    @app.route('/l2')
    def get_l2_data():
    data = u.get_l2_data()
    day = data.date.tolist()
    dignose = data.confirm.tolist()
    heal = data.heal.tolist()
    dead = data.dead.tolist()
    return jsonify({"days": day, "dignose": dignose, "heal": heal, "dead": dead})
    
    
    @app.route('/r1')
    def get_r1_data():
    data = u.get_r1_data()
    keys = data.疫情地区.tolist()
    values = data.确诊.tolist()
    return jsonify({"keys": keys, "values": values})
    
    
    @app.route('/r2')
    def get_r2_data():
    res = []
    data = u.get_r2_data()
    for key, value in zip(data.name, data.确诊):
        res.append({"name": key, "value": value})
    # 还需要添加中国的总数据
    china = int(u.get_c1_data()[0])
    res.append({"name": "China", "value": china})
    return jsonify({"data": res})
    
    
    if __name__ == '__main__':
    
    # 定时任务 ,间隔一天执行
    scheduler=APScheduler()
    scheduler.add_job(crawl_daily_data,'interval',days=1)
    scheduler.init_app(app=app)
    scheduler.start()
    app.run()
    
    
    python
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-07-13/7ptyq2JRh0CYjswMOKTWUdlmBb3V.png)

AJAX支撑数据处理与传输

在本项目中,我们开发了一个名为controller.js的组件。首先用于获取实时日期与时间信息,并且实现了数据从数据库传输至echarts进行展示。

复制代码
    function gettime() {
    $.ajax({
        url:"/time",
        timeout:10000,
        success:function (data) {
            $("#time").html(data)
        },
        error:function (xhr,type,errorThrown) {
    
        }
    })
    }
    
    function get_c1_data(){
       $.ajax({
        url:"/c1",
        timeout:10000,
        success:function (data) {
            $(".num h1").eq(0).text(data.dignose)
            $(".num h1").eq(1).text(data.heal)
            $(".num h1").eq(2).text(data.dead)
            $(".num h1").eq(3).text(data.newly_add)
        },
        error:function (xhr,type,errorThrown) {
    
        }
    })
    }
    
    function get_c2_data(){
    $.ajax({
        url:"/c2",
        timeout:10000,
        success:function (data) {
            ec_center_option.series[0].data=data.data
            ec_center.setOption(ec_center_option)
        },
        error:function (xhr,type,errorThrown) {
    
        }
    })
    }
    
    function get_l1_data(){
    $.ajax({
        url:"/l1",
        timeout:10000,
        success:function (data) {
            ec_left1_option.xAxis.data=data.days
            ec_left1_option.series[0].data=data.dignose
            ec_left1_option.series[1].data=data.heal
            ec_left1_option.series[2].data=data.dead
            ec_left1.setOption(ec_left1_option)
        },
        error:function (xhr,type,errorThrown) {
    
        }
    })
    }
    
    function get_l2_data(){
    $.ajax({
        url:"/l2",
        timeout:10000,
        success:function (data) {
            ec_left2_option.xAxis.data=data.days
            ec_left2_option.series[0].data=data.dignose
            ec_left2_option.series[1].data=data.heal
            ec_left2_option.series[2].data=data.dead
            ec_left2.setOption(ec_left2_option)
        },
        error:function (xhr,type,errorThrown) {
    
        }
    })
    }
    
    function get_r1_data(){
    $.ajax({
        url:"/r1",
        timeout:10000,
        success:function (data) {
            ec_right1_option.xAxis.data=data.keys
            ec_right1_option.series[0].data=data.values
            ec_right1.setOption(ec_right1_option)
        },
        error:function (xhr,type,errorThrown) {
    
        }
    })
    }
    
    function get_r2_data(){
    $.ajax({
        url:"/r2",
        timeout:10000,
        success:function (data) {
            ec_right2_option .series[0].data=data.data
            ec_right2.setOption(ec_right2_option)
    
        },
        error:function (xhr,type,errorThrown) {
    
        }
    })
    }
    
    gettime()
    
    get_c1_data()
    get_c2_data()
    get_l1_data()
    get_l2_data()
    get_r1_data()
    get_r2_data()
    setInterval(gettime,1000)
    
    
    python
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-07-13/U968eWwbYMOLFQixpCDyNlraBRgE.png)

综合分析与总结

Flask凭借其简洁灵活的设计理念而闻名于世,并以其极强的易用性吸引了大量开发者。其路由系统设计得非常直观,并且能够轻松地将不同URL对应的业务逻辑进行精准划分,在构建后端服务架构时展现出极高的效率优势。从从数据库中读取数据到对获取的数据进行预处理,并最终将处理后的结果传递给前端这一完整的流程可以在Flask的框架体系中高效运行。例如,在为可视化大屏准备销售数据分析时,在Flask框架下轻松实现各数据获取接口之间的路由关联功能,则可确保前端页面加载完成后的瞬间就能快速响应后端请求并及时返回所需的关键业务数据如订单量及产品类别占比等信息。

基于丰富图表库资源开发而成的Pyecharts拥有完整且多样的图表类型可供选择包括柱状图折线图饼图以及地图等不同类型的可视化展示工具能够满足各种维度分析需求并为数据分析提供直观呈现方式。在展示地区门店业绩分布情况时通过精心设置经纬度坐标以及相应的销售金额数据仅需编写简短代码即可生成包含精确的数据标注信息并支持交互式查看(如悬停显示详情等)的地图可视化作品从而清晰展现地域差异及重点区域特征使复杂的数据信息变得一目了然。

全部评论 (0)

还没有任何评论哟~