From 813a916151958cb20951ce68965ed81cc9360beb Mon Sep 17 00:00:00 2001
From: HuangHai <10402852@qq.com>
Date: Wed, 10 Sep 2025 15:11:25 +0800
Subject: [PATCH] 'commit'

---
 Routes/BigScreen.py                          |  76 +++++++++-
 Routes/__pycache__/BigScreen.cpython-310.pyc | Bin 705 -> 1947 bytes
 Start.py                                     |   4 +
 static/index.html                            | 145 +++++++++++++++++++
 4 files changed, 217 insertions(+), 8 deletions(-)
 create mode 100644 static/index.html

diff --git a/Routes/BigScreen.py b/Routes/BigScreen.py
index d7f1051..a218ec8 100644
--- a/Routes/BigScreen.py
+++ b/Routes/BigScreen.py
@@ -1,19 +1,79 @@
 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 实例
 router = APIRouter(prefix="/bigscreen", tags=["大屏展示"])
 
-# 定义根路由，返回 helloWorld
-@router.get("/")
-async def root():
-    return {"message": "helloWorld"}
+# 配置使用自定义的 ECharts 路径
+CurrentConfig.ONLINE_HOST = "https://gcore.jsdelivr.net/npm/echarts@6.0.0/dist/"
 
 # 定义一个 helloWorld 路由
 @router.get("/hello")
 async def hello_world():
     return {"message": "helloWorld"}
 
-# 定义一个带有参数的路由
-@router.get("/hello/{name}")
-async def hello_name(name: str):
-    return {"message": f"helloWorld, {name}!"}
\ No newline at end of file
+# 生成图表配置的函数
+def generate_bar_chart_config():
+    c = (
+        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
diff --git a/Routes/__pycache__/BigScreen.cpython-310.pyc b/Routes/__pycache__/BigScreen.cpython-310.pyc
index e6577c1fa05143282b520f6f9a68c6cb3751834c..9927c50f12daecdd4ff7bd1f3cd8c2681cacaffc 100644
GIT binary patch
literal 1947
zcma)7-ESL35Wn3!pU>xWoTMofDoTLzV4=pL5`Cxu^#dv@m9(Oj5T{7i#k;XDz4Mvf
zb-qZXRt=OQnLZVv@_>UXLHbasFGW-Z3H86YS8&rj^@#^6q%yNk8n+<9T01v0JF`1G
zJHK&KD7XfUJ$rwx-_9AvZz%K+3xq>3<qtrZ!ANAp#3uxK8d0CZ*NkXv`j*yNQ6{#1
zTl1MH8#}(Ec{|F*uJ3O8<^4P-EX$l4VYxQ-J?3(^Qs7=^faO;S^H^cUxIp|O8(_s1
z!ynWugRnBhhV{yj*6aYy2p^uNY$tnW#R88VjGi`1&u&1pMv0`k!>5jakhByR6Ch=i
zrV5jW1lBwf2>4`<1!p-jg`+JYctagc8q;BI(JfDfHCYv$H(DNS)xGw8_vYp9%`5BI
zZkK3kHwB*#=Tl1sHMzLIu2fSVESGE5MDVd0$#@jbim?V)<wi3u^J+a1N*+2eHa<39
zW}#H&MY~+*QIu3M&i+9`xC>L_vz#Z4Fd7oLkvWlOV=iS-<G!n1KTJf#)(nA$+vMSE
z?;M<D5*E)+e$;AA1dUT7nc-D6snZ}QkA$_;`d(wrg*2~ss?6b5gLo=FH$CT2ftP+F
zI1?0Em`7ns1w<Jaj1Ez>W3C#jq+>DUGr&{e=@vg@tL%)!OlGwS%e2W%4rG_vEZZi)
z<zafvVL9fuDHKB<th_c|HkOP|VbxeBYM@hGBCBMXF5$x#CjP)6x>r8y-nezRk3Z7d
z4SIOgeeVb2?1`|!AKdx;{>AIv8&`k->C%Hcm)791Rj4AqMtoN@6{rSz48&|GE3%%<
zZS03F9y$w$=R^6{8{=y<B@3z52x9O_Ef%O?jrwjBOz}wj`h^(Iir_3Qt_=!IpPvgD
ztIP+miO8UASL;b4c~8H9`qZ8cq868aQF2wOMafjq+cC8;CO>xu13ihXwvb$eT=ve)
zoxt<;nzwb;C#B<x$NnzXiks+x^<J3^RlV|YD^Xmg){IOVX(mbnCQD{Ys%d`9Oe&Fj
zTLPMG*Okb_Rnq5byun4Fcx5UO6<yYqsz%ICSeBzeEb0<Z|E#}g#w8XRAl4)6Px{Cy
zx~4_ND_{ip(#~br=7}mJu!!?6Oo=sko?x9}J;3Xe){CHWM`7Im^2hGwukL+&bN!23
z-EV%`__V$L^9{XHBKn9D@xA^4pT5dS4O0K~E%xEDHV}Hw&R9h31$J?GJJ#|ix^k8U
zf~AUqZVh~StV|vFEHJ&m|1Ut6po>E314uRjl3{iqK%i4%p9FxoV3h}ekR_r4LN!1r
z0K{A}Aw^#6bvV2)MUOFXuXAzZyRX-;uKZilL;<|S0Fok-At1-ZFtR(4j3B``7Q2u<
zj|2f%vUDoMC@Nk;@-mX`o}|lWH|Dz9k}8S+k@5pzFVTsfv+VyUomauEG?Heg1F3>$
zD6m=jx#q%VgB2#o;ssO=K30zPnr{!9#clO8HvS$!hqkpnEJ}ejAoc)BZK3}@{QSv@
z6UQgst-N>g^qJIz3+WcAOHG$aY65x$M%Z_Iod=x)=gl}_t%$#kMWcb@8O|n9JmQc6
R(>5K`C649n0_u#AzX1*56PW-2

literal 705
zcmZ`$&ubGw6rNw*-E6WkE&T&3o)*R2MWhxlUP5UOrAwf!naOr_lMOQ)v{Av*LQmq!
zlL!_HrN>^qiT}l1C5UHlIr-iMNf3N6Z{EB&^S$qVQ$|rpz|QY{J0gsbA9z?b0f%i^
zCIKgjqy-t$gi@lYWRho8iuWvGihbd7?Se{A`e)>nCc<R`$kb%$GHWhVhfG6x112Nc
zJQHx!m$$kkZv6s$5>s1yy!&*ooK#9r!}ha0GkvYpXwrb{?DA@M^I>-L@#p2&m|1VE
z)gXUmMU`e|PTPG%ST&f3e24WLM?9et80WN0u6f7$LuE{wsU$p7MN#gTx{%jI*WlvP
z&F?;W(31v=FM0=)Q70Yk>hihjS3O72^mg*B>*(DdA6uczvhuMVYR29LOxGcpdTrO@
zzwES!P4VHf^Gbx=ZQVf}zC@a+gmx~1Xc{fx+pkCIP`$MRw?2i+U&9y~p%P{T+(L;r
z<P(wnGe<>Y(a`}^rj4Z<_qOKrw&M{~-Gt)5oEFL*V!w5SUQFF$x&^0B99VylnkpUV
z8vnt1+I_0!nW~&H8tGeZD(zmZz`I{?a|aKHrJNM%5e{JxxIvmc;2{kJu1)#}N<x{I

diff --git a/Start.py b/Start.py
index cb7032f..ac541e9 100644
--- a/Start.py
+++ b/Start.py
@@ -1,12 +1,16 @@
 # pip install fastapi uvicorn
 
 from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
 import uvicorn
 from Routes.BigScreen import router as bigscreen_router
 
 # 创建 FastAPI 应用实例
 app = FastAPI(title="云南教育决策研究服务系统", description="云南省教育数据分析和可视化平台")
 
+# 挂载静态文件目录
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
 # 包含大屏展示路由
 app.include_router(bigscreen_router)
 
diff --git a/static/index.html b/static/index.html
new file mode 100644
index 0000000..2016e22
--- /dev/null
+++ b/static/index.html
@@ -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>
\ No newline at end of file