huanghai/YunNanProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'commit'

Browse Source
This commit is contained in:
HuangHai
2025-09-10 15:11:25 +08:00
parent 47f63a64a7
commit 813a916151
4 changed files with 217 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
Routes/BigScreen.py
View File

@@ -1,19 +1,79 @@
from fastapi import APIRouter from fastapi import APIRouter
import pyecharts
from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.faker import Faker
from pyecharts.globals import CurrentConfig
import json
# 创建 APIRouter 实例 # 创建 APIRouter 实例
router = APIRouter(prefix="/bigscreen", tags=["大屏展示"]) router = APIRouter(prefix="/bigscreen", tags=["大屏展示"])
# 定义根路由，返回 helloWorld # 配置使用自定义的 ECharts 路径
@router.get("/") CurrentConfig.ONLINE_HOST = "https://gcore.jsdelivr.net/npm/echarts@6.0.0/dist/"
async def root():
return {"message": "helloWorld"}
# 定义一个 helloWorld 路由 # 定义一个 helloWorld 路由
@router.get("/hello") @router.get("/hello")
async def hello_world(): async def hello_world():
return {"message": "helloWorld"} return {"message": "helloWorld"}
# 定义一个带有参数的路由 # 生成图表配置的函数
@router.get("/hello/{name}") def generate_bar_chart_config():
async def hello_name(name: str): c = (
return {"message": f"helloWorld, {name}!"} Bar()
.add_xaxis(Faker.choose())
.add_yaxis("商家A", Faker.values())
.add_yaxis("商家B", Faker.values())
.set_global_opts(title_opts=opts.TitleOpts(title="Bar-MarkLine（自定义）"))
.set_series_opts(
label_opts=opts.LabelOpts(is_show=False),
markline_opts=opts.MarkLineOpts(
data=[opts.MarkLineItem(y=50, name="yAxis=50")]
),
)
)
# 获取图表的选项配置，使用 dump_options_with_quotes 方法获取可以直接序列化的选项
options_str = c.dump_options_with_quotes()
# 将字符串转换为 JSON 对象
options_json = json.loads(options_str)
return options_json
# 定义一个返回图表配置的路由
@router.get("/chart/bar")
async def get_bar_chart_config():
"""
获取柱状图配置
"""
chart_config = generate_bar_chart_config()
return chart_config
# 定义一个带有参数的路由，可以自定义图表标题
@router.get("/chart/bar/{title}")
async def get_custom_bar_chart_config(title: str):
"""
获取自定义标题的柱状图配置
"""
c = (
Bar()
.add_xaxis(Faker.choose())
.add_yaxis("商家A", Faker.values())
.add_yaxis("商家B", Faker.values())
.set_global_opts(title_opts=opts.TitleOpts(title=title))
.set_series_opts(
label_opts=opts.LabelOpts(is_show=False),
markline_opts=opts.MarkLineOpts(
data=[opts.MarkLineItem(y=50, name="yAxis=50")]
),
)
)
# 获取图表的选项配置
options_str = c.dump_options_with_quotes()
# 将字符串转换为 JSON 对象
options_json = json.loads(options_str)
return options_json

BIN
Routes/__pycache__/BigScreen.cpython-310.pyc
View File

Binary file not shown.

4
Start.py
View File

@@ -1,12 +1,16 @@
# pip install fastapi uvicorn # pip install fastapi uvicorn
from fastapi import FastAPI from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
import uvicorn import uvicorn
from Routes.BigScreen import router as bigscreen_router from Routes.BigScreen import router as bigscreen_router
# 创建 FastAPI 应用实例 # 创建 FastAPI 应用实例
app = FastAPI(title="云南教育决策研究服务系统", description="云南省教育数据分析和可视化平台") app = FastAPI(title="云南教育决策研究服务系统", description="云南省教育数据分析和可视化平台")
# 挂载静态文件目录
app.mount("/static", StaticFiles(directory="static"), name="static")
# 包含大屏展示路由 # 包含大屏展示路由
app.include_router(bigscreen_router) app.include_router(bigscreen_router)

145
static/index.html Normal file
View File

@@ -0,0 +1,145 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>云南教育决策研究服务系统</title>
<!-- 引入 ECharts -->
<script src="https://gcore.jsdelivr.net/npm/echarts@6.0.0/dist/echarts.min.js"></script>
<style>
body {
margin: 0;
padding: 20px;
font-family: 'Microsoft YaHei', sans-serif;
background-color: #f5f7fa;
}
.header {
text-align: center;
margin-bottom: 30px;
}
.header h1 {
color: #2c3e50;
margin-bottom: 10px;
}
.chart-container {
width: 100%;
max-width: 1200px;
margin: 0 auto 30px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.chart {
width: 100%;
height: 400px;
}
.controls {
margin-bottom: 20px;
text-align: center;
}
.controls input {
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
margin-right: 10px;
}
.controls button {
padding: 8px 16px;
background-color: #409eff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.controls button:hover {
background-color: #66b1ff;
}
.message {
text-align: center;
color: #666;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="header">
<h1>云南教育决策研究服务系统</h1>
<p>数据可视化展示平台</p>
</div>
<div class="chart-container">
<h2>柱状图示例</h2>
<div class="controls">
<input type="text" id="chartTitle" placeholder="输入图表标题" value="Bar-MarkLine（自定义）">
<button id="loadChart">加载图表</button>
</div>
<div id="barChart" class="chart"></div>
<div class="message" id="message">点击"加载图表"按钮获取数据</div>
</div>
<script>
// 初始化图表
var barChart = echarts.init(document.getElementById('barChart'));
// 显示加载中
function showLoading() {
barChart.showLoading();
document.getElementById('message').textContent = '正在加载数据...';
}
// 隐藏加载中
function hideLoading() {
barChart.hideLoading();
}
// 显示错误信息
function showError(message) {
document.getElementById('message').textContent = '错误: ' + message;
console.error(message);
}
// 加载图表数据
function loadChartData() {
showLoading();
// 获取图表标题
var title = document.getElementById('chartTitle').value || 'Bar-MarkLine（自定义）';
// 调用后端接口获取数据
fetch('/bigscreen/chart/bar/' + encodeURIComponent(title))
.then(response => {
if (!response.ok) {
throw new Error('网络响应异常');
}
return response.json();
})
.then(data => {
// 使用获取到的数据渲染图表
barChart.setOption(data);
document.getElementById('message').textContent = '图表加载成功';
})
.catch(error => {
showError(error.message);
})
.finally(() => {
hideLoading();
});
}
// 页面加载完成后自动加载图表
window.addEventListener('DOMContentLoaded', function() {
// 绑定按钮点击事件
document.getElementById('loadChart').addEventListener('click', loadChartData);
// 自动加载图表
loadChartData();
});
// 窗口大小变化时，重新调整图表大小
window.addEventListener('resize', function() {
barChart.resize();
});
</script>
</body>
</html>