'commit'

Routes/BigScreen.py

@@ -72,8 +72,8 @@ def generate_population_chart_config(year="2024"):
     population_data = load_population_data()
     
     # 筛选出州市级数据（排除县级数据）
-    # 正确的格式是 9 位数字，且以 000 结尾但不以 000000 结尾
+    # 正确的格式是9位数字，以000结尾且第5-6位为00（表示州市级）
-    cities = [item for item in population_data if len(item["area_code"]) == 9 and item["area_code"].endswith("000") and not item["area_code"].endswith("000000")]
+    cities = [item for item in population_data if len(item["area_code"]) == 9 and item["area_code"].endswith("000") and item["area_code"][4:6] == "00"]
     
     # 提取城市名称和人口数据
     city_names = [city["area_name"] for city in cities]
@@ -89,12 +89,19 @@ def generate_population_chart_config(year="2024"):
         .add_yaxis("城镇人口", urban_populations, stack="stack1")
         .add_yaxis("农村人口", rural_populations, stack="stack1")
         .set_global_opts(
-            title_opts=opts.TitleOpts(title=f"云南省各州市人口分布图（{year}年）"),
+            title_opts=opts.TitleOpts(
+                title=f"云南省各州市人口分布图（{year}年）",
+                pos_top="1%",  # 调整标题位置到顶部1%
+                pos_left="center"
+            ),
             tooltip_opts=opts.TooltipOpts(
                 trigger="axis",
                 axis_pointer_type="shadow"
             ),
-            legend_opts=opts.LegendOpts(pos_top="5%"),
+            legend_opts=opts.LegendOpts(
+                pos_top="8%",  # 调整图例位置到标题下方
+                pos_right="5%"
+            ),
             datazoom_opts=[opts.DataZoomOpts()],
             xaxis_opts=opts.AxisOpts(
                 axislabel_opts=opts.LabelOpts(rotate=45)
@@ -127,8 +134,8 @@ def generate_urbanization_rate_chart_config():
     population_data = load_population_data()
     
     # 筛选出州市级数据（排除县级数据）
-    # 正确的格式是 9 位数字，且以 000 结尾但不以 000000 结尾
+    # 排除省级数据(如云南省530000000)和县级数据，只保留州市级数据
-    cities = [item for item in population_data if len(item["area_code"]) == 9 and item["area_code"].endswith("000") and not item["area_code"].endswith("000000")]
+    cities = [item for item in population_data if len(item["area_code"]) == 9 and item["area_code"].endswith("000") and item["area_code"][4:6] == "00" and item["area_code"][2:8] != "000000"]
     
     # 提取城市名称和城镇化率数据
     city_names = [city["area_name"] for city in cities]
@@ -147,9 +154,16 @@ def generate_urbanization_rate_chart_config():
                       markpoint_opts=opts.MarkPointOpts(data=[opts.MarkPointItem(type_="max")]))
     
     line.set_global_opts(
-        title_opts=opts.TitleOpts(title="云南省各州市城镇化率变化趋势"),
+        title_opts=opts.TitleOpts(
+            title="云南省各州市城镇化率变化趋势",
+            pos_top="1%",  # 调整标题位置到顶部1%
+            pos_left="center"
+        ),
         tooltip_opts=opts.TooltipOpts(trigger="axis"),
-        legend_opts=opts.LegendOpts(pos_top="5%"),
+        legend_opts=opts.LegendOpts(
+            pos_top="8%",  # 调整图例位置到标题下方
+            pos_right="5%"
+        ),
         datazoom_opts=[opts.DataZoomOpts()],
         xaxis_opts=opts.AxisOpts(
             axislabel_opts=opts.LabelOpts(rotate=45)

static/css/style.css

@@ -0,0 +1,79 @@
+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 select, .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;
+    margin-right: 10px;
+}
+.controls button:hover {
+    background-color: #66b1ff;
+}
+.message {
+    text-align: center;
+    color: #666;
+    margin: 20px 0;
+}
+.tabs {
+    display: flex;
+    margin-bottom: 20px;
+    border-bottom: 1px solid #ddd;
+}
+.tab {
+    padding: 10px 20px;
+    cursor: pointer;
+    background-color: #f5f7fa;
+    border: 1px solid #ddd;
+    border-bottom: none;
+    border-radius: 4px 4px 0 0;
+    margin-right: 5px;
+}
+.tab.active {
+    background-color: #fff;
+    border-bottom: 1px solid #fff;
+    margin-bottom: -1px;
+}
+.tab-content {
+    display: none;
+}
+.tab-content.active {
+    display: block;
+}

static/index.html

@@ -4,89 +4,9 @@
     <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>
+    <link rel="stylesheet" href="css/style.css">
-        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 select, .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;
-            margin-right: 10px;
-        }
-        .controls button:hover {
-            background-color: #66b1ff;
-        }
-        .message {
-            text-align: center;
-            color: #666;
-            margin: 20px 0;
-        }
-        .tabs {
-            display: flex;
-            margin-bottom: 20px;
-            border-bottom: 1px solid #ddd;
-        }
-        .tab {
-            padding: 10px 20px;
-            cursor: pointer;
-            background-color: #f5f7fa;
-            border: 1px solid #ddd;
-            border-bottom: none;
-            border-radius: 4px 4px 0 0;
-            margin-right: 5px;
-        }
-        .tab.active {
-            background-color: #fff;
-            border-bottom: 1px solid #fff;
-            margin-bottom: -1px;
-        }
-        .tab-content {
-            display: none;
-        }
-        .tab-content.active {
-            display: block;
-        }
-    </style>
 </head>
 <body>
     <div class="header">
@@ -98,7 +18,6 @@
         <div class="tabs">
             <div class="tab active" data-tab="population">人口数据图表</div>
             <div class="tab" data-tab="urbanization">城镇化率图表</div>
-            <div class="tab" data-tab="demo">示例图表</div>
         </div>
 
         <div class="tab-content active" id="population-tab">
@@ -114,7 +33,7 @@
                 <button id="loadPopulationChart">加载图表</button>
             </div>
             <div id="populationChart" class="chart"></div>
-            <div class="message" id="populationMessage">点击"加载图表"按钮获取数据</div>
+<!--            <div class="message" id="populationMessage">点击"加载图表"按钮获取数据</div>-->
         </div>
 
         <div class="tab-content" id="urbanization-tab">
@@ -125,157 +44,10 @@
             <div id="urbanizationChart" class="chart"></div>
             <div class="message" id="urbanizationMessage">点击"加载图表"按钮获取数据</div>
         </div>
-
-        <div class="tab-content" id="demo-tab">
-            <h2>柱状图示例</h2>
-            <div class="controls">
-                <input type="text" id="chartTitle" placeholder="输入图表标题" value="Bar-MarkLine（自定义）">
-                <button id="loadDemoChart">加载图表</button>
-            </div>
-            <div id="barChart" class="chart"></div>
-            <div class="message" id="demoMessage">点击"加载图表"按钮获取数据</div>
-        </div>
     </div>
 
-    <script>
+    <!-- 引入外部JS -->
-        // 初始化图表
+    <script src="js/jquery-3.7.1.min.js"></script>
-        var populationChart = echarts.init(document.getElementById('populationChart'));
+    <script src="js/script.js"></script>
-        var urbanizationChart = echarts.init(document.getElementById('urbanizationChart'));
-        var barChart = echarts.init(document.getElementById('barChart'));
-        
-        // 显示加载中
-        function showLoading(chart, messageElement) {
-            chart.showLoading();
-            messageElement.textContent = '正在加载数据...';
-        }
-        
-        // 隐藏加载中
-        function hideLoading(chart) {
-            chart.hideLoading();
-        }
-        
-        // 显示错误信息
-        function showError(messageElement, message) {
-            messageElement.textContent = '错误: ' + message;
-            console.error(message);
-        }
-        
-        // 加载人口数据图表
-        function loadPopulationChartData() {
-            showLoading(populationChart, document.getElementById('populationMessage'));
-            
-            // 获取选中的年份
-            var year = document.getElementById('yearSelect').value;
-            
-            // 调用后端接口获取数据
-            fetch('/bigscreen/population/chart/' + year)
-                .then(response => {
-                    if (!response.ok) {
-                        throw new Error('网络响应异常');
-                    }
-                    return response.json();
-                })
-                .then(data => {
-                    // 使用获取到的数据渲染图表
-                    populationChart.setOption(data);
-                    document.getElementById('populationMessage').textContent = '图表加载成功';
-                })
-                .catch(error => {
-                    showError(document.getElementById('populationMessage'), error.message);
-                })
-                .finally(() => {
-                    hideLoading(populationChart);
-                });
-        }
-        
-        // 加载城镇化率图表
-        function loadUrbanizationRateChartData() {
-            showLoading(urbanizationChart, document.getElementById('urbanizationMessage'));
-            
-            // 调用后端接口获取数据
-            fetch('/bigscreen/population/urbanization')
-                .then(response => {
-                    if (!response.ok) {
-                        throw new Error('网络响应异常');
-                    }
-                    return response.json();
-                })
-                .then(data => {
-                    // 使用获取到的数据渲染图表
-                    urbanizationChart.setOption(data);
-                    document.getElementById('urbanizationMessage').textContent = '图表加载成功';
-                })
-                .catch(error => {
-                    showError(document.getElementById('urbanizationMessage'), error.message);
-                })
-                .finally(() => {
-                    hideLoading(urbanizationChart);
-                });
-        }
-        
-        // 加载示例图表数据
-        function loadDemoChartData() {
-            showLoading(barChart, document.getElementById('demoMessage'));
-            
-            // 获取图表标题
-            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('demoMessage').textContent = '图表加载成功';
-                })
-                .catch(error => {
-                    showError(document.getElementById('demoMessage'), error.message);
-                })
-                .finally(() => {
-                    hideLoading(barChart);
-                });
-        }
-        
-        // 页面加载完成后自动加载图表
-        window.addEventListener('DOMContentLoaded', function() {
-            // 绑定标签页切换事件
-            document.querySelectorAll('.tab').forEach(tab => {
-                tab.addEventListener('click', function() {
-                    // 移除所有标签页的active类
-                    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-                    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
-                    
-                    // 添加当前标签页的active类
-                    this.classList.add('active');
-                    document.getElementById(this.dataset.tab + '-tab').classList.add('active');
-                    
-                    // 调整图表大小
-                    populationChart.resize();
-                    urbanizationChart.resize();
-                    barChart.resize();
-                });
-            });
-            
-            // 绑定按钮点击事件
-            document.getElementById('loadPopulationChart').addEventListener('click', loadPopulationChartData);
-            document.getElementById('loadUrbanizationChart').addEventListener('click', loadUrbanizationRateChartData);
-            document.getElementById('loadDemoChart').addEventListener('click', loadDemoChartData);
-            
-            // 自动加载图表
-            loadPopulationChartData();
-        });
-        
-        // 窗口大小变化时，重新调整图表大小
-        window.addEventListener('resize', function() {
-            populationChart.resize();
-            urbanizationChart.resize();
-            barChart.resize();
-        });
-    </script>
 </body>
 </html>

static/js/script.js

@@ -0,0 +1,77 @@
+// 使用 jQuery 初始化图表
+var populationChart = echarts.init($('#populationChart')[0]);
+var urbanizationChart = echarts.init($('#urbanizationChart')[0]);
+
+// 显示加载中
+function showLoading(chart, messageElement) {
+    chart.showLoading();
+}
+
+// 隐藏加载中
+function hideLoading(chart) {
+    chart.hideLoading();
+}
+
+// 显示错误信息
+function showError(messageElement, message) {
+    $(messageElement).text('错误: ' + message);
+    console.error(message);
+}
+
+// 加载人口数据图表
+function loadPopulationChartData() {
+    showLoading(populationChart, $('#populationMessage')[0]);
+    var year = $('#yearSelect').val();
+    $.getJSON('/bigscreen/population/chart/' + year)
+        .done(function(data) {
+            populationChart.setOption(data);
+        })
+        .fail(function(jqXHR, textStatus, errorThrown) {
+            showError($('#populationMessage')[0], errorThrown || '网络响应异常');
+        })
+        .always(function() {
+            hideLoading(populationChart);
+        });
+}
+
+// 加载城镇化率图表
+function loadUrbanizationRateChartData() {
+    showLoading(urbanizationChart, $('#urbanizationMessage')[0]);
+    $.getJSON('/bigscreen/population/urbanization')
+        .done(function(data) {
+            urbanizationChart.setOption(data);
+        })
+        .fail(function(jqXHR, textStatus, errorThrown) {
+            showError($('#urbanizationMessage')[0], errorThrown || '网络响应异常');
+        })
+        .always(function() {
+            hideLoading(urbanizationChart);
+        });
+}
+
+// 页面加载完成后自动加载图表
+$(document).ready(function() {
+    // 绑定标签页切换事件
+    $('.tab').on('click', function() {
+        $('.tab').removeClass('active');
+        $('.tab-content').removeClass('active');
+        $(this).addClass('active');
+        $('#' + $(this).data('tab') + '-tab').addClass('active');
+        populationChart.resize();
+        urbanizationChart.resize();
+    });
+
+    // 绑定按钮点击事件
+    $('#loadPopulationChart').on('click', loadPopulationChartData);
+    $('#loadUrbanizationChart').on('click', loadUrbanizationRateChartData);
+
+    // 自动加载图表
+    loadPopulationChartData();
+    loadUrbanizationRateChartData();
+});
+
+// 窗口大小变化时调整图表
+$(window).on('resize', function() {
+    populationChart.resize();
+    urbanizationChart.resize();
+});