当前位置： 首页 > article >正文

5-1 使用ECharts将MySQL数据库中的数据可视化

article 2026/3/2 18:16:14

方法一：使用Python Flask框架搭建API

对于技术小白来说，使用ECharts将MySQL数据库中的数据可视化需要分步骤完成。以下是详细的实现流程：

一、技术架构‌


后端服务‌：使用Python Flask框架搭建API（简单易学，适合新手）
数据库连接‌：通过Python的pymysql库连接MySQL
前端可视化‌：HTML + JavaScript + ECharts
数据流向‌：
MySQL数据库 → Python API → 前端请求 → ECharts渲染


二、具体步骤‌


1. 准备数据库环境‌

确保已安装MySQL，并创建测试数据

2. 搭建Python后端服务‌

(1) 安装依赖库‌

pip install flask pymysql flask-cors


(2) 创建API文件 server.py‌


from flask import Flask, jsonify
import pymysql
from flask_cors import CORSapp = Flask(__name__)
CORS(app)  # 解决跨域问题def get_db_connection():return pymysql.connect(host='localhost',user='root',      # 替换为你的数据库用户名password='123456',# 替换为你的数据库密码database='demo',cursorclass=pymysql.cursors.DictCursor)@app.route('/api/sales')
def get_sales():connection = get_db_connection()try:with connection.cursor() as cursor:sql = "SELECT product, amount, month FROM sales"cursor.execute(sql)result = cursor.fetchall()return jsonify(result)finally:connection.close()if __name__ == '__main__':app.run(debug=True, port=5000)

3. 测试API‌

运行 python server.py，访问 http://localhost:5000/api/sales 应看到JSON数据。

4. 创建前端页面‌

(1) HTML文件 index.html‌


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>数据大屏</title><!-- 引入ECharts --><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script><style>.chart-container {width: 600px;height: 400px;margin: 20px;display: inline-block;}</style>
</head>
<body><h1>销售数据大屏</h1><!-- 图表容器 --><div id="chart1" class="chart-container"></div><div id="chart2" class="chart-container"></div><script src="app.js"></script>
</body>
</html>

方法二：Pyecharts图表嵌入HTML——iframe嵌入法

具体步骤

1、用pyecharts实现图表，渲染成html文件，例如line_chart.html

2、html文件中利用iframe嵌入已渲染好的line_chart.html文件。

<!DOCTYPE html>
<html>
<head><title>销售看板</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><div class="container mt-4"><div class="row"><!-- 嵌入柱状图 --><div class="col-md-6"><iframe src="bar_chart.html" frameborder="0" style="width:100%;height:400px"></iframe></div><!-- 嵌入折线图 --><div class="col-md-6"><iframe src="line_chart.html" frameborder="0" style="width:100%;height:400px"></iframe></div></div></div>
</body>
</html>

相关文章：

5-1 使用ECharts将MySQL数据库中的数据可视化

方法一&#xff1a;使用Python Flask框架搭建API 对于技术小白来说&#xff0c;使用ECharts将MySQL数据库中的数据可视化需要分步骤完成。以下是详细的实现流程&#xff1a; 一、技术架构‌ 后端服务‌&#xff1a;使用Python Flask框架搭建API&#xff08;简单易学&#xff…...

编程日记 2026/2/20 15:45:49

构建下一代AI Agent：自动化开发与行业落地全解析

1. 下一代AI Agent&#xff1a;概念与核心能力 核心能力描述技术支撑应用价值自主性独立规划与执行任务&#xff0c;无需持续人工干预决策树、强化学习、目标导向规划减少人工干预&#xff0c;提高任务执行效率决策能力评估多种方案并选择最优解决方案贝叶斯决策、多目标优化、…...

编程日记 2026/3/1 16:47:48

如何理解分布式光纤传感器？

关键词&#xff1a;OFDR、分布式光纤传感、光纤传感器 分布式光纤传感器是近年来备受关注的前沿技术&#xff0c;其核心在于将光纤本身作为传感介质和信号传输介质&#xff0c;通过解析光信号在光纤中的散射效应&#xff0c;实现对温度、应变、振动等物理量的连续、无盲区、高…...

编程日记 2026/2/18 15:34:32

四、小白学JAVA-石头剪刀布游戏

1、如何从控制台获取用户输入 import java.util.Scanner;public class Main {public static void main(String[] args) {// 石头剪刀布的思路// 1 2 3 石头 剪刀 布Scanner scanner new Scanner(System.in);System.out.println("请出拳&#xff1a;1.石头 2.剪刀 3.布【…...

编程日记 2026/2/15 2:33:33

【一起来学kubernetes】21、Secret使用详解

Secret 的详细介绍 Secret 是 Kubernetes 中用于存储和管理敏感信息&#xff08;如密码、令牌、密钥等&#xff09;的资源对象。Secret的设计目的是为了安全地存储和传输敏感信息&#xff0c;如密码、API密钥、证书等。这些信息通常不应该直接硬编码在配置文件或镜像中&#x…...

编程日记 2026/2/20 16:00:16

css重点知识汇总（一）

css重点知识汇总&#xff08;一&#xff09; 引入css的不同方式 link 通过src来获取相应的css资源。除了获取css之外还可以获取其他资源&#xff0c;例如js在页面载入是同步下载可以通过js对dom操作来改变css import css3引入的新方法只能引入css资源需要页面完全载入后才…...

编程日记 2026/2/15 22:01:50

PMP-项目运行环境

你好&#xff01;我是 Lydia-穎穎 ♥感谢你的陪伴与支持 ~~~ 欢迎一起探索未知的知识和未来&#xff0c;现在lets go go go!!! 1. 影响项目的要素 项目存在在不同的环境下&#xff0c;环境对于项目的交付产生不同的影响。需了解环境对于项目的影响&#xff0c;采取相应措施应对…...

编程日记 2026/3/1 7:45:51

shell 脚本搭建apache

#!/bin/bash # Set Apache version to install ## author: yuan# 检查外网连接 echo "检查外网连接..." ping www.baidu.com -c 3 > /dev/null 2>&1 if [ $? -eq 0 ]; thenecho "外网通讯良好&#xff01;" elseecho "网络连接失败&#x…...

编程日记 2026/2/27 21:39:16

Huawei 鲲鹏（ARM/Aarch64）服务器安装KVM虚拟机（非桌面视图）

提出问题 因需要进行ARM架构适配&#xff0c;需要在Huawei Taishan 200k&#xff08;CPU&#xff1a; Kunpeng 920 5231K&#xff09;上&#xff0c;创建几台虚拟机做为开发测试环境。 无奈好久没搞了&#xff0c;看了一下自己多年前写的文章&#xff1a;Huawei 鲲鹏&#xf…...

编程日记 2026/2/24 6:36:17

《Python实战进阶》No28: 使用 Paramiko 实现远程服务器管理

No28: 使用 Paramiko 实现远程服务器管理 摘要 在现代开发与运维中&#xff0c;远程服务器管理是必不可少的一环。通过 SSH 协议&#xff0c;我们可以安全地连接到远程服务器并执行各种操作。Python 的 Paramiko 模块是一个强大的工具&#xff0c;能够帮助我们实现自动化任务&…...

编程日记 2026/2/19 21:02:58

备赛蓝桥杯之第十六届模拟赛3期职业院校组

提示&#xff1a;本篇文章仅仅是作者自己目前在备赛蓝桥杯中&#xff0c;自己学习与刷题的学习笔记&#xff0c;写的不好&#xff0c;欢迎大家批评与建议 由于个别题目代码量与题目量偏大&#xff0c;请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题&#xff0…...

编程日记 2026/2/25 3:59:00

【Kafka】深入了解Kafka

集群的成员关系 Kafka使用Zookeeper维护集群的成员信息。 每一个broker都有一个唯一的标识&#xff0c;这个标识可以在配置文件中指定&#xff0c;也可以自动生成。当broker在启动时通过创建Zookeeper的临时节点把自己的ID注册到Zookeeper中。broker、控制器和其他一些动态系…...

编程日记 2026/2/14 21:54:01

C++特性——RAII、智能指针

RAII 就像new一个需要delete&#xff0c;fopen之后需要fclose&#xff0c;但这样会有隐形问题&#xff08;忘记释放&#xff09;。RAII即用对象把这个过程给包起来&#xff0c;对象构造的时候&#xff0c;new或者fopen&#xff0c;析构的时候delete. 为什么需要智能指针 对于…...

编程日记 2026/2/20 20:50:56

C++异常处理时的异常类型抛出选择

在 C 中选择抛出哪种异常类型&#xff0c;主要取决于错误的性质以及希望传达的语义信息。以下是一些指导原则&#xff0c;帮助在可能发生异常的地方选择合适的异常类型进行抛出&#xff1a; 1. std::exception 适用场景&#xff1a;作为所有标准异常的基类&#xff0c;std::e…...

编程日记 2026/1/25 5:07:30

elsticsearch 通过reindex修改shards

elasticsearch reindex 索引。 背景&#xff1a; 索引test1 reindex到test2 修改sharding数量 程序是通过别名test1_alias访问索引 1、创建目标索引test2 索引需要手动提前创建自动创建可能会有mapping 不一致性的风险。 The destination should be configured as wanted …...

编程日记 2026/1/9 17:09:37

CentOS系类普通挂载磁盘挂载命令

检查磁盘是否有分区 lsblk如果 vdb 下面没有分区&#xff08;比如 vdb1&#xff09;&#xff0c;你需要先创建分区。 创建分区&#xff08;如果需要&#xff09; fdisk /dev/vdb然后在 fdisk 交互界面&#xff1a; 输入 n 创建新分区 选择 p 创建主分区 默认分区号和大小 输…...

编程日记 2026/2/22 12:42:50

Kafka自定义分区机制

文章目录 1.如何自定义分区机制2.示例 1.如何自定义分区机制 若需要使用自定义分区机制&#xff0c;需要完成两件事&#xff1a; 1)在 producer 程序中创建一个类&#xff0c;实现 org.apache.kafka.clients.producer.Partitioner 接口主要分区逻辑在 Partitioner.partition中…...

编程日记 2026/1/26 7:09:23

【HarmonyOS NEXT】关键资产存储开发案例

在 iOS 开发中 Keychain 是一个非常安全的存储系统&#xff0c;用于保存敏感信息&#xff0c;如密码、证书、密钥等。与文件系统不同&#xff0c;Keychain 提供了更高的安全性&#xff0c;因为它对数据进行了加密&#xff0c;并且只有经过授权的应用程序才能访问存储的数据。那…...

编程日记 2025/7/18 9:29:16

强化学习（赵世钰版）-学习笔记（9.策略梯度法）

本章是课程的导数第二章&#xff0c;旨在讲解策略的函数化形式。 之前的方法&#xff0c;描述一个策略都是用表格的形式&#xff0c;每一行代表一个状态&#xff0c;每一列代表一个行为&#xff0c;表格中的元素对应相关状态下执行相关行为的概率。 函数化的策略表征形式是指&a…...

编程日记 2026/2/24 13:29:47

ModuleNotFoundError: No module named ‘flask‘ 错误

要解决 ModuleNotFoundError: No module named ‘flask’ 错误&#xff0c;需确保已正确安装 Flask 库。以下是详细步骤&#xff1a; ‌1. 安装 Flask‌ 在终端或命令行中执行以下命令&#xff08;注意权限问题&#xff09;&#xff1a; 使用 pip 安装 pip install flask 若…...

编程日记 2026/2/16 23:08:17

【c++】【STL】unordered_set 底层实现（简略版）

【c】【STL】unordered_set 底层实现&#xff08;简略版&#xff09; ps:这个是我自己看的不保证正确&#xff0c;觉得太长的后面会总结整个调用逻辑 unordered_set 内部实现 template <class _Kty, class _Hasher hash<_Kty>, class _Keyeq equal_to<_Kty>…...

编程日记 2026/2/14 7:29:17

【Zephyr】【一】学习笔记

Zephyr RTOS 示例代码集 1. 基础示例 1.0 基础配置 每个示例都需要一个 prj.conf 文件来配置项目。以下是各个示例所需的配置&#xff1a; 基础示例 prj.conf # 控制台输出 CONFIG_PRINTKy CONFIG_SERIALy CONFIG_UART_CONSOLEy# 日志系统 CONFIG_LOGy CONFIG_LOG_DEFAULT…...

编程日记 2026/2/14 16:48:06

网络安全设备配置与管理-实验4-防火墙AAA服务配置

实验4-p118防火墙AAA服务配置 从这个实验开始&#xff0c;每一个实验都是长篇大论&#x1f613; 不过有好兄弟会替我出手 注意&#xff1a;1. gns3.exe必须以管理员身份打开&#xff0c;否则ping不通虚拟机。 win10虚拟机无法做本次实验&#xff0c;必须用学校给的虚拟机。首…...

编程日记 2026/2/17 12:54:03

后端框架模块化

后端框架的模块化设计旨在简化开发流程、提高可维护性&#xff0c;并通过分层解耦降低复杂性。以下是常见的后端模块及其在不同语言&#xff08;Node.js、Java、Python&#xff09;中的实现方式&#xff1a; 目录 1. 路由&#xff08;Routing&#xff09;2. 中间件&#xff08;…...

编程日记 2025/7/17 9:44:56

【论文阅读】Contrastive Clustering Learning for Multi-Behavior Recommendation

论文地址&#xff1a;Contrastive Clustering Learning for Multi-Behavior Recommendation | ACM Transactions on Information Systems 摘要 近年来&#xff0c;多行为推荐模型取得了显著成功。然而&#xff0c;许多模型未充分考虑不同行为之间的共性与差异性&#xff0c;以…...

编程日记 2026/2/18 5:22:33

视频转音频, 音频转文字

Ubuntu 24 环境准备 # 系统级依赖 sudo apt update && sudo apt install -y ffmpeg python3-venv git build-essential python3-dev# Python虚拟环境 python3 -m venv ~/ai_summary source ~/ai_summary/bin/activate核心工具链 工具用途安装命令Whisper语音识别pip …...

编程日记 2025/7/18 16:52:21

基于协同过滤推荐算法的景点票务数据系统（python-计算机毕设）

摘 要 I ABSTRACT II 第 1 章 引言 1 研究背景及意义 1 研究背景 1研究意义 1 国内外研究现状 2 智慧旅游 3旅游大数据 3 研究内容 4本章小结 4 第 2 章 相关技术概述 5 基于内容的推荐算法 5 基于内容的推荐算法原理 5基于内容的推荐算法实现 5 协同过滤推荐算法 6 协同过…...

编程日记 2026/2/24 15:36:43

QT学习笔记1

** Qt Creator开发环境配置** 安装流程&#xff08;Windows平台&#xff09; 下载与安装 &#xff1a; 访问Qt官网&#xff0c;下载在线安装工具Qt Online Installer。登录或注册Qt账号&#xff0c;选择开源版本&#xff08;需勾选“接受协议”&#xff09;。勾选组件&#xff…...

编程日记 2026/2/16 20:24:24

Ubuntu 24 常用命令方法

文章目录 环境说明1、账号管理1.1、启用 root 2、包管理工具 apt & dpkg2.1、apt 简介 & 阿里源配置2.2、dpkg 简介2.3、apt 和 dpkg 两者之间的关系2.4、常用命令 3、启用 ssh 服务4、防火墙5、开启远程登录6、关闭交换分区7、build-essential&#xff08;编译和开发软…...

编程日记 2026/2/17 16:41:59

Flask多参数模版使用

需要建立目录templates&#xff1b; 把建好的html文件放到templates目录里面&#xff1b; 约定好参数名字&#xff0c;单个名字可以直接使用&#xff1b;多参数使用字典传递&#xff1b; 样例&#xff1a; from flask import render_template # 模板 (Templates) #Flask 使用…...

编程日记 2026/2/28 13:20:35