438 lines
19 KiB
HTML
438 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/html">
|
|
<head>
|
|
<base href="/population/">
|
|
<meta charset="utf-8">
|
|
<meta name="renderer" content="webkit">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
|
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
|
|
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all"/>
|
|
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all"/>
|
|
</head>
|
|
<body>
|
|
<div class="layui-fluid">
|
|
<div class="layui-col-md12">
|
|
<div class="layui-card">
|
|
<div class="layui-col-md12 layui-col-space10">
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card" style="border-radius: 5px;">
|
|
<div class="layui-card-header">
|
|
人口总数
|
|
</div>
|
|
<div class="layui-card-body layuiadmin-card-list">
|
|
<p id="total" class="layuiadmin-big-font">0</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card" style="border-radius: 5px;">
|
|
<div class="layui-card-header">
|
|
稀土路街道
|
|
</div>
|
|
<div class="layui-card-body layuiadmin-card-list">
|
|
<p id="xiTuLu" style="font-size: 30px" class="layuiadmin-big-font">0</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card" style="border-radius: 5px;">
|
|
<div class="layui-card-header">
|
|
民馨路街道
|
|
</div>
|
|
<div class="layui-card-body layuiadmin-card-list">
|
|
<p id="minXinLu" style="font-size: 30px" class="layuiadmin-big-font">0</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card" style="border-radius: 5px;">
|
|
<div class="layui-card-header">
|
|
万水泉镇
|
|
</div>
|
|
<div class="layui-card-body layuiadmin-card-list">
|
|
<p id="wanShuiQuan" style="font-size: 30px" class="layuiadmin-big-font">0</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md12 layui-col-space5" style="margin-top: 5px;">
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">民族分布</div>
|
|
<div class="layui-card-body">
|
|
<div id="nation" style="height:300px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">学历分布</div>
|
|
<div class="layui-card-body">
|
|
<div id="education" style="height:300px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">政治面貌</div>
|
|
<div class="layui-card-body">
|
|
<div id="political" style="height:300px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">宗教信仰</div>
|
|
<div class="layui-card-body">
|
|
<div id="marital" style="height:300px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md12 layui-col-space5" style="margin-top: 5px;">
|
|
<div class="layui-col-md4">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">男女占比</div>
|
|
<div class="layui-card-body">
|
|
<div id="gender" style="height:300px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md8">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">年龄分布情况</div>
|
|
<div class="layui-card-body">
|
|
<div id="age" style="height:300px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="assets/js/vue.min.js"></script>
|
|
<script type="text/javascript" src="assets/js/echarts.min.js"></script>
|
|
<script src="assets/layuiadmin/layui/layui.js"></script>
|
|
<script>
|
|
layui.config({
|
|
base: 'assets/layuiadmin/' //静态资源所在路径
|
|
}).extend({
|
|
index: 'lib/index' //主入口模块
|
|
}).use(['index', 'laytpl'], function() {
|
|
var $ = layui.$;
|
|
var $win = $(window);
|
|
var laytpl = layui.laytpl;
|
|
var form = layui.form;
|
|
var eChartsColorBox = [
|
|
'#C1232B','#E87C25','#27727B',
|
|
'#FE8463','#F3A43B','#60C0DD',
|
|
'#D7504B','#F0805A','#26C0C0'
|
|
];
|
|
|
|
var chartsHeight = $win.height() - 300;
|
|
$('#nation').css('height', chartsHeight/2);
|
|
$('#education').css('height', chartsHeight/2);
|
|
$('#political').css('height', chartsHeight/2);
|
|
$('#marital').css('height', chartsHeight/2);
|
|
$('#gender').css('height', chartsHeight/2);
|
|
$('#age').css('height', chartsHeight/2);
|
|
|
|
function init() {
|
|
initPopulationNum();
|
|
initNationECharts();
|
|
initEducationECharts();
|
|
initPoliticalECharts();
|
|
initMaritalECharts();
|
|
initGenderECharts();
|
|
initAgeECharts();
|
|
}
|
|
init();
|
|
|
|
//基础人员信息统计
|
|
function initPopulationNum(){
|
|
top.restAjax.get(top.restAjax.path('app/data-external-release/get-default-panel-data-one', []), {}, null, function(code, data) {
|
|
$('#total').html(data.total + '人');
|
|
$('#xiTuLu').html(data.xiTuLu + '人');
|
|
$('#minXinLu').html(data.minXinLu + '人');
|
|
$('#wanShuiQuan').html(data.wanShuiQuan + '人');
|
|
}, function(code, data) {
|
|
top.dialog.message(data.msg);
|
|
});
|
|
}
|
|
|
|
// 民族分布
|
|
function initNationECharts(){
|
|
top.restAjax.get(top.restAjax.path('app/data-external-release/get-default-panel-data-two', []), {allShow : false}, null, function(code, data) {
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: {
|
|
data: data.xAxis,
|
|
axisLabel: {
|
|
interval:0,
|
|
rotate:30
|
|
}
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
name: "数量",
|
|
type: "bar",
|
|
data: data.counts,
|
|
markPoint: {
|
|
data: [
|
|
{type: 'max', name: '最大值'},
|
|
{type: 'min', name: '最小值'}
|
|
]
|
|
},
|
|
label: {
|
|
show: true
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: function(params) {
|
|
var colorList = eChartsColorBox;
|
|
return colorList[params.dataIndex]
|
|
}
|
|
}
|
|
},
|
|
}]
|
|
};
|
|
var nationChart = echarts.init(document.getElementById('nation'));
|
|
nationChart.setOption(option);
|
|
}, function(code, data) {
|
|
top.dialog.message(data.msg);
|
|
});
|
|
}
|
|
|
|
// 学历分布
|
|
function initEducationECharts(){
|
|
top.restAjax.get(top.restAjax.path('app/data-external-release/get-default-panel-data-three', []), {}, null, function(code, data) {
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: {
|
|
data: data.xAxis,
|
|
axisLabel: {
|
|
interval:0,
|
|
rotate: 30
|
|
}
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
name: "数量",
|
|
type: "bar",
|
|
data: data.counts,
|
|
markPoint: {
|
|
data: [
|
|
{type: 'max', name: '最大值'},
|
|
{type: 'min', name: '最小值'}
|
|
]
|
|
},
|
|
label: {
|
|
show: true
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: function(params) {
|
|
var colorList = eChartsColorBox;
|
|
return colorList[params.dataIndex]
|
|
}
|
|
}
|
|
},
|
|
}]
|
|
};
|
|
var educationChart = echarts.init(document.getElementById('education'));
|
|
educationChart.setOption(option);
|
|
}, function(code, data) {
|
|
top.dialog.message(data.msg);
|
|
})
|
|
}
|
|
|
|
// 政治面貌
|
|
function initPoliticalECharts(){
|
|
top.restAjax.get(top.restAjax.path('app/data-external-release/get-default-panel-data-four', []), {}, null, function(code, data) {
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: {
|
|
data: data.xAxis,
|
|
axisLabel: {
|
|
interval:0,
|
|
rotate:30
|
|
}
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
name: "数量",
|
|
type: "bar",
|
|
data: data.counts,
|
|
markPoint: {
|
|
data: [
|
|
{type: 'max', name: '最大值'},
|
|
{type: 'min', name: '最小值'}
|
|
]
|
|
},
|
|
label: {
|
|
show: true
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: function(params) {
|
|
var colorList = eChartsColorBox;
|
|
return colorList[params.dataIndex]
|
|
}
|
|
}
|
|
},
|
|
}]
|
|
};
|
|
var politicalChart = echarts.init(document.getElementById('political'));
|
|
politicalChart.setOption(option);
|
|
}, function(code, data) {
|
|
top.dialog.message(data.msg);
|
|
})
|
|
}
|
|
|
|
// 宗教信仰
|
|
function initMaritalECharts(){
|
|
top.restAjax.get(top.restAjax.path('app/data-external-release/get-default-panel-data-five', []), {}, null, function(code, data) {
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: {
|
|
data: data.xAxis,
|
|
axisLabel: {
|
|
interval:0,
|
|
rotate:30
|
|
}
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
name: "数量",
|
|
type: "bar",
|
|
data: data.counts,
|
|
markPoint: {
|
|
data: [
|
|
{type: 'max', name: '最大值'},
|
|
{type: 'min', name: '最小值'}
|
|
]
|
|
},
|
|
label: {
|
|
show: true
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: function(params) {
|
|
var colorList = eChartsColorBox;
|
|
return colorList[params.dataIndex]
|
|
}
|
|
}
|
|
},
|
|
}]
|
|
};
|
|
var maritalChart = echarts.init(document.getElementById('marital'));
|
|
maritalChart.setOption(option);
|
|
}, function(code, data) {
|
|
top.dialog.message(data.msg);
|
|
})
|
|
}
|
|
|
|
//男女占比统计图
|
|
function initGenderECharts(){
|
|
top.restAjax.get(top.restAjax.path('app/data-external-release/get-default-panel-data-six', []), {}, null, function(code, data) {
|
|
var xAxisData = data.xAxis;
|
|
var seriesList = data.counts;
|
|
var seriesData = [];
|
|
for(var i = 0; i < seriesList.length; i++){
|
|
var item = {
|
|
value : '0',
|
|
name : ''
|
|
}
|
|
item.name = xAxisData[i] + seriesList[i] + '人';
|
|
item.value = seriesList[i];
|
|
seriesData.push(item);
|
|
}
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
data: xAxisData
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'pie',
|
|
radius: '70%',
|
|
center: ['50%', '50%'],
|
|
data: seriesData,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
},
|
|
}
|
|
}
|
|
]
|
|
};
|
|
var specialPopulationChart = echarts.init(document.getElementById('gender'));
|
|
specialPopulationChart.setOption(option);
|
|
}, function(code, data) {
|
|
top.dialog.message(data.msg);
|
|
});
|
|
}
|
|
|
|
// 年龄分布情况
|
|
function initAgeECharts(){
|
|
top.restAjax.get(top.restAjax.path('app/data-external-release/get-default-panel-data-eight', []), {}, null, function(code, data) {
|
|
var seriesArray = [];
|
|
for(var i = 0,item; item = data.series[i++];){
|
|
var tempObj ={
|
|
name: item.name,
|
|
type: "bar",
|
|
data: item.data,
|
|
markPoint: {
|
|
data: [
|
|
{type: 'max', name: '最大值'},
|
|
{type: 'min', name: '最小值'}
|
|
]
|
|
},
|
|
label: {
|
|
show: true
|
|
},
|
|
}
|
|
seriesArray.push(tempObj);
|
|
}
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: data.legend
|
|
},
|
|
xAxis: [
|
|
{
|
|
data: data.xAxis,
|
|
}
|
|
],
|
|
yAxis: [{}],
|
|
series: seriesArray
|
|
};
|
|
var ageChart = echarts.init(document.getElementById('age'));
|
|
ageChart.setOption(option);
|
|
}, function(code, data) {
|
|
top.dialog.message(data.msg);
|
|
})
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |