80 lines
2.5 KiB
JavaScript
80 lines
2.5 KiB
JavaScript
// 使用 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);
|
|
|
|
// 添加年份选择器变化事件监听
|
|
$('#yearSelect').on('change', loadPopulationChartData);
|
|
|
|
// 自动加载图表
|
|
loadPopulationChartData();
|
|
loadUrbanizationRateChartData();
|
|
});
|
|
|
|
// 窗口大小变化时调整图表
|
|
$(window).on('resize', function() {
|
|
populationChart.resize();
|
|
urbanizationChart.resize();
|
|
}); |