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

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

news 来源：原创 2025/5/19 18:19:46

方法一：使用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 CORS

app = 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>