'commit'

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();
+});