下午好🌅🌅🌅
本答案参考通义千问
为了完成本关任务——使用饼图展示所有金牌运动员年龄占比情况，我们需要依次在以下三个文件中进行代码补充：
- models.py：定义数据库模型；
- views.py：处理请求并传递数据；
- gold_medal_age.html：渲染 ECharts 饼图。
✅ 一、在 models.py 中创建数据模型
📌 要求：
根据表 tb_gold_medal_age 创建一个对应的 ORM 模型。
✅ 解决方案：
# models.py
from flask_sqlalchemy import SQLAlchemy
db = SQLAlchemy()
class GoldMedalAge(db.Model):
__tablename__ = 'tb_gold_medal_age'
id = db.Column(db.Integer, primary_key=True)
age = db.Column(db.Integer, nullable=False)
count = db.Column(db.Integer, nullable=False)
说明：此模型对应数据库中的 tb_gold_medal_age 表，包含 age 和 count 字段，分别表示年龄和该年龄段获得金牌的人数。
✅ 二、在 views.py 中编写视图函数
📌 要求：
当用户访问 http://localhost:8080/gold_medal_age 时，将从数据库中获取金牌运动员的年龄分布数据，并将其传送到前端模板中。
✅ 解决方案：
# views.py
from flask import Flask, render_template
from models import db, GoldMedalAge
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///olympic.db' # 示例数据库
db.init_app(app)
@app.route('/gold_medal_age')
def gold_medal_age():
# 查询所有金牌运动员的年龄和人数
data = GoldMedalAge.query.order_by(GoldMedalAge.id).all()
# 将数据转换为列表格式（用于 ECharts）
ages = [item.age for item in data]
counts = [item.count for item in data]
# 计算比例（可选：前端计算）
total = sum(counts)
percentages = [round((count / total) * 100, 2) for count in counts]
return render_template('gold_medal_age.html', ages=ages, counts=counts, percentages=percentages)
说明：
- 使用
order_by(GoldMedalAge.id) 确保按年龄 ID 排序； - 可以在后端或前端计算比例，此处我们选择在后端计算并传入模板；
render_template 将数据传递给前端页面。
✅ 三、在 gold_medal_age.html 中渲染 ECharts 饼图
📌 要求：
使用 ECharts 渲染饼图，显示金牌运动员的年龄占比。要求：
- 年龄顺序与模板一致；
- 数据格式正确；
- 比例可以是百分比或数值。
✅ 解决方案：
<!-- gold_medal_age.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>金牌年龄分布</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
var chart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '金牌运动员年龄分布',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '年龄',
type: 'pie',
radius: '50%',
data: [
{% for i in range(ages|length) %}
{ value: {{ percentages[i] }}, name: '{{ ages[i] }}岁' },
{% endfor %}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
chart.setOption(option);
</script>
</body>
</html>
说明：
- 使用 ECharts 的
pie 类型绘制饼图； - 使用 Jinja2 模板引擎动态插入数据；
percentages[i] 是计算后的百分比值，确保图表显示比例；ages[i] 是年龄标签，如“20岁”、“25岁”等。
✅ 四、启动 Flask 应用并验证
📌 步骤如下：
- 在终端运行以下命令初始化数据库（如果尚未创建）：
flask shell
>>> from models import db
>>> db.create_all()
- 启动 Flask 应用：
python app.py
- 打开浏览器访问：
http://localhost:8080/gold_medal_age
- 查看饼图是否正确显示金牌运动员的年龄占比。
✅ 五、测试与对比
- 模拟 HTTP 请求：使用工具（如 Postman 或 curl）访问
http://localhost:8080/gold_medal_age； - 保存图片：将页面截图保存为图片；
- 对比图片：与标准答案图片进行对比，若一致则通关。
✅ 六、总结
| 文件 | 功能描述 |
|--------------|------------------------------------|
| models.py | 定义数据库模型，映射 tb_gold_medal_age 表 |
| views.py | 处理请求，查询数据并传送到前端 |
| gold_medal_age.html | 使用 ECharts 渲染饼图，显示金牌年龄占比 |
✅ 七、完整项目结构建议
project/
│
├── app.py
├── models.py
├── views.py
└── templates/
└── gold_medal_age.html
如有需要，我可以提供完整的 Flask 项目示例代码包，方便你快速搭建环境。是否需要？
