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