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

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

    
    
    
    
    


    
销售数据大屏
    
    
    

    


    

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

具体步骤

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

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