文昌网站 做炸饺子进行网站建设视频教程
方法一：使用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>