'commit'
This commit is contained in:
@@ -39,118 +39,80 @@ class RuYuanZaiYuanModel:
|
||||
years = [str(year) for year in range(2015, 2025)]
|
||||
|
||||
# 构建学前教育数据
|
||||
urban_enroll = [] # 城区入园人数
|
||||
town_enroll = [] # 镇区入园人数
|
||||
rural_enroll = [] # 乡村入园人数
|
||||
urban_in_school = [] # 城区在园人数
|
||||
town_in_school = [] # 镇区在园人数
|
||||
rural_in_school = [] # 乡村在园人数
|
||||
enroll_total = [] # 入园总数
|
||||
in_school_total = [] # 在园总数
|
||||
|
||||
for year in years:
|
||||
# 入园人数(招生数据)
|
||||
pre_enroll = yunnan_enroll.get("education_data", {}).get("preschool", {}).get(year, {})
|
||||
urban_enroll.append(pre_enroll.get("urban", 0))
|
||||
town_enroll.append(pre_enroll.get("town", 0))
|
||||
rural_enroll.append(pre_enroll.get("rural", 0))
|
||||
# 入园总数(招生数据)
|
||||
enroll_data = yunnan_enroll["education_data"]["preschool"].get(year, {})
|
||||
enroll_total.append(enroll_data.get("total", 0))
|
||||
|
||||
# 在园人数(在校生数据)
|
||||
pre_in_school = yunnan_in_school.get("education_data", {}).get("preschool", {}).get(year, {})
|
||||
urban_in_school.append(pre_in_school.get("urban", 0))
|
||||
town_in_school.append(pre_in_school.get("town", 0))
|
||||
rural_in_school.append(pre_in_school.get("rural", 0))
|
||||
# 在园总数(在校生数据)
|
||||
in_school_data = yunnan_in_school["student_data"]["preschool"].get(year, {})
|
||||
in_school_total.append(in_school_data.get("total", 0))
|
||||
|
||||
# 构建option数据结构
|
||||
# 构建ECharts配置
|
||||
option = {
|
||||
"grid": {
|
||||
"left": 0,
|
||||
"right": 0,
|
||||
"top": 40,
|
||||
"bottom": 10,
|
||||
"containLabel": True,
|
||||
},
|
||||
"textStyle": {
|
||||
"color": "#fff",
|
||||
"title": {
|
||||
"text": "云南省学前教育人数统计",
|
||||
"left": "center",
|
||||
"textStyle": {"color": "#333"}
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis",
|
||||
"axisPointer": {
|
||||
"type": "cross",
|
||||
"crossStyle": { "color": "#999" },
|
||||
},
|
||||
"textStyle": { "color": "#fff" },
|
||||
"backgroundColor": "rgba(96,98,102,0.8)",
|
||||
"borderColor": "rgba(255,255,255,0.3)",
|
||||
"borderWidth": 1,
|
||||
"axisPointer": {"type": "shadow"}
|
||||
},
|
||||
"legend": {
|
||||
"data": ["城区入园人数", "镇区入园人数", "乡村入园人数",
|
||||
"城区在园人数", "镇区在园人数", "乡村在园人数"],
|
||||
"top": 0,
|
||||
"textStyle": { "color": "#fff" },
|
||||
"icon": "roundRect",
|
||||
"itemWidth": 12,
|
||||
"itemHeight": 12,
|
||||
"data": ["入园总数", "在园总数"],
|
||||
"top": 30,
|
||||
"textStyle": {"color": "#333"}
|
||||
},
|
||||
"xAxis": [
|
||||
{
|
||||
"type": "category",
|
||||
"data": years,
|
||||
"axisPointer": { "type": "shadow" },
|
||||
"axisLine": { "lineStyle": { "color": "#fff" } },
|
||||
"axisLabel": { "color": "#fff" },
|
||||
"nameTextStyle": { "color": "#fff" },
|
||||
"xAxis": {
|
||||
"type": "category",
|
||||
"data": years,
|
||||
"axisLabel": {"color": "#333"},
|
||||
"axisLine": {"lineStyle": {"color": "#333"}}
|
||||
},
|
||||
"yAxis": {
|
||||
"type": "value",
|
||||
"name": "人数",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"interval": 30,
|
||||
"axisLabel": {
|
||||
"formatter": "{value} 万人",
|
||||
"color": "#333"
|
||||
},
|
||||
],
|
||||
"yAxis": [
|
||||
{
|
||||
"type": "value",
|
||||
"axisLabel": { "formatter": "{value} 人", "color": "#fff" },
|
||||
}
|
||||
],
|
||||
"axisLine": {"lineStyle": {"color": "#333"}},
|
||||
"splitLine": {"lineStyle": {"color": "rgba(0,0,0,0.1)"}}
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"name": "城区入园人数",
|
||||
"name": "入园总数",
|
||||
"type": "bar",
|
||||
"data": urban_enroll,
|
||||
"itemStyle": { "borderRadius": [6, 6, 0, 0] },
|
||||
"data": enroll_total,
|
||||
"itemStyle": {
|
||||
"color": "#5470c6",
|
||||
"borderRadius": [4, 4, 0, 0]
|
||||
},
|
||||
"barWidth": "40%"
|
||||
},
|
||||
{
|
||||
"name": "镇区入园人数",
|
||||
"type": "bar",
|
||||
"data": town_enroll,
|
||||
"itemStyle": { "borderRadius": [6, 6, 0, 0] },
|
||||
},
|
||||
{
|
||||
"name": "乡村入园人数",
|
||||
"type": "bar",
|
||||
"data": rural_enroll,
|
||||
"itemStyle": { "borderRadius": [6, 6, 0, 0] },
|
||||
},
|
||||
{
|
||||
"name": "城区在园人数",
|
||||
"name": "在园总数",
|
||||
"type": "line",
|
||||
"data": urban_in_school,
|
||||
"yAxisIndex": 0,
|
||||
"lineStyle": { "width": 3 },
|
||||
"symbolSize": 8,
|
||||
},
|
||||
{
|
||||
"name": "镇区在园人数",
|
||||
"type": "line",
|
||||
"data": town_in_school,
|
||||
"yAxisIndex": 0,
|
||||
"lineStyle": { "width": 3 },
|
||||
"symbolSize": 8,
|
||||
},
|
||||
{
|
||||
"name": "乡村在园人数",
|
||||
"type": "line",
|
||||
"data": rural_in_school,
|
||||
"yAxisIndex": 0,
|
||||
"lineStyle": { "width": 3 },
|
||||
"data": in_school_total,
|
||||
"lineStyle": {"color": "#91cc75", "width": 3},
|
||||
"symbol": "circle",
|
||||
"symbolSize": 8,
|
||||
"itemStyle": {"color": "#91cc75"}
|
||||
}
|
||||
],
|
||||
"grid": {
|
||||
"left": "3%",
|
||||
"right": "4%",
|
||||
"bottom": "3%",
|
||||
"containLabel": True
|
||||
}
|
||||
}
|
||||
|
||||
return option
|
||||
Binary file not shown.
@@ -3,26 +3,73 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>学前教育数据测试</title>
|
||||
<title>云南省学前教育数据</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
||||
<script src="js/jquery-3.7.1.min.js"></script>
|
||||
<style>
|
||||
.chart-controls {
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.btn-group {
|
||||
display: inline-flex;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
background: #f0f0f0;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.btn.active {
|
||||
background: #409eff;
|
||||
color: white;
|
||||
}
|
||||
.btn:hover:not(.active) {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>学前教育招生人数统计</h1>
|
||||
<div id="preschoolChart" style="width: 100%; height: 600px;"></div>
|
||||
<h1>云南省学前教育人数统计</h1>
|
||||
|
||||
<div class="chart-controls">
|
||||
<div class="btn-group">
|
||||
<button class="btn active" data-type="both">全部显示</button>
|
||||
<button class="btn" data-type="enroll">入园数总量</button>
|
||||
<button class="btn" data-type="inschool">在园数总量</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="preschoolChart" style="width: 100%; height: 500px;"></div>
|
||||
<div id="message" class="message"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 初始化图表
|
||||
var preschoolChart = echarts.init(document.getElementById('preschoolChart'));
|
||||
var chartData = null;
|
||||
var currentType = 'both';
|
||||
|
||||
// 显示加载状态
|
||||
function showLoading() {
|
||||
preschoolChart.showLoading();
|
||||
$('#message').text('数据加载中...');
|
||||
}
|
||||
|
||||
// 隐藏加载状态
|
||||
@@ -36,13 +83,29 @@
|
||||
console.error(message);
|
||||
}
|
||||
|
||||
// 渲染图表
|
||||
function renderChart() {
|
||||
if (!chartData) return;
|
||||
|
||||
var option = JSON.parse(JSON.stringify(chartData));
|
||||
|
||||
// 根据当前选择的类型过滤数据
|
||||
if (currentType === 'enroll') {
|
||||
option.series = [option.series[0]]; // 只显示入园总数
|
||||
} else if (currentType === 'inschool') {
|
||||
option.series = [option.series[1]]; // 只显示在园总数
|
||||
}
|
||||
|
||||
preschoolChart.setOption(option);
|
||||
}
|
||||
|
||||
// 加载学前教育数据
|
||||
function loadPreschoolData() {
|
||||
showLoading();
|
||||
$.getJSON('/bigscreen/school/preschool/chart')
|
||||
.done(function(data) {
|
||||
preschoolChart.setOption(data);
|
||||
$('#message').text('数据加载成功');
|
||||
chartData = data;
|
||||
renderChart();
|
||||
})
|
||||
.fail(function(jqXHR, textStatus, errorThrown) {
|
||||
showError(errorThrown || '获取数据失败，请检查接口是否正常');
|
||||
@@ -52,14 +115,21 @@
|
||||
});
|
||||
}
|
||||
|
||||
// 页面加载时加载数据
|
||||
// 按钮点击事件
|
||||
$(document).ready(function() {
|
||||
loadPreschoolData();
|
||||
});
|
||||
|
||||
// 窗口大小变化时调整图表
|
||||
$(window).resize(function() {
|
||||
preschoolChart.resize();
|
||||
$('.btn').click(function() {
|
||||
$('.btn').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
currentType = $(this).data('type');
|
||||
renderChart();
|
||||
});
|
||||
|
||||
// 窗口大小变化时调整图表
|
||||
$(window).resize(function() {
|
||||
preschoolChart.resize();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user