302 lines
13 KiB
HTML
302 lines
13 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" id="populationNumTemplateBox"></div>
|
|
<script type="text/html" id="populationNumTemplate">
|
|
{{# for ( var i = 0,item; item = d[i++];){ }}
|
|
<div class="layui-col-md3">
|
|
<div class="layui-card" style="border-radius: 5px;">
|
|
<div class="layui-card-header">
|
|
{{item.categoryName}}
|
|
</div>
|
|
<div class="layui-card-body layuiadmin-card-list">
|
|
<p class="layuiadmin-big-font">{{item.counts}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{# } }}
|
|
</script>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md12 layui-col-space5" style="margin-top: 5px;">
|
|
<div class="layui-col-md8">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">正常人群</div>
|
|
<div class="layui-card-body">
|
|
<div id="normalPopulation" style="height:300px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md4">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">男女比例</div>
|
|
<div class="layui-card-body">
|
|
<div id="genderCharts" style="height:300px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md12 layui-col-space5" style="margin-top: 5px;">
|
|
<div class="layui-col-md7">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">特殊人群</div>
|
|
<div class="layui-card-body">
|
|
<div id="specialPopulation" style="height:300px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md5">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">各类人员占比</div>
|
|
<div class="layui-card-body">
|
|
<div id="categoryCharts" 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 xAxisDataNormal = [];
|
|
var seriesDataNormal = [];
|
|
var xAxisDataSpecial = [];
|
|
var seriesDataSpecial = [];
|
|
|
|
|
|
var chartsHeight = $win.height() - 300;
|
|
$('#normalPopulation').css('height', chartsHeight/2);
|
|
$('#genderCharts').css('height', chartsHeight/2);
|
|
$('#specialPopulation').css('height', chartsHeight/2);
|
|
$('#categoryCharts').css('height', chartsHeight/2);
|
|
|
|
//基础人员信息统计
|
|
function initPopulationNum(){
|
|
top.restAjax.get(top.restAjax.path('api/populationcounts/listpopulationcategorycounts', []), {}, null, function(code, data) {
|
|
laytpl($('#populationNumTemplate').html()).render(data,function (html){
|
|
$('#populationNumTemplateBox').html(html);
|
|
});
|
|
}, function(code, data) {
|
|
top.dialog.message(data.msg);
|
|
});
|
|
}
|
|
initPopulationNum();
|
|
|
|
//正常人群图表
|
|
function initNormalPopulationECharts(){
|
|
top.restAjax.get(top.restAjax.path('api/populationcounts/getnormalpopulationecharts', []), {}, null, function(code, data) {
|
|
xAxisDataNormal = data.categoryName.split(',');
|
|
seriesDataNormal = data.counts.split(',');
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: {
|
|
data: xAxisDataNormal
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
name: "数量",
|
|
type: "bar",
|
|
data: seriesDataNormal,
|
|
markPoint: {
|
|
data: [
|
|
{type: 'max', name: '最大值'},
|
|
{type: 'min', name: '最小值'}
|
|
]
|
|
},
|
|
label: {
|
|
show: true
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: function(params) {
|
|
var colorList = eChartsColorBox;
|
|
return colorList[params.dataIndex]
|
|
}
|
|
}
|
|
},
|
|
}]
|
|
};
|
|
var normalPopulationChart = echarts.init(document.getElementById('normalPopulation'));
|
|
normalPopulationChart.setOption(option);
|
|
initSpecialPopulationECharts();
|
|
}, function(code, data) {
|
|
top.dialog.message(data.msg);
|
|
});
|
|
}
|
|
initNormalPopulationECharts();
|
|
|
|
//特殊人群图表
|
|
function initSpecialPopulationECharts(){
|
|
top.restAjax.get(top.restAjax.path('api/populationcounts/getspecialpopulationecharts', []), {}, null, function(code, data) {
|
|
xAxisDataSpecial = data.categoryName.split(',');
|
|
seriesDataSpecial = data.counts.split(',');
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: {
|
|
data: xAxisDataSpecial,
|
|
axisLabel:{
|
|
interval : 0
|
|
}
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
name: "数量",
|
|
type: "bar",
|
|
data: seriesDataSpecial,
|
|
markPoint: {
|
|
data: [
|
|
{type: 'max', name: '最大值'},
|
|
{type: 'min', name: '最小值'}
|
|
]
|
|
},
|
|
label: {
|
|
show: true
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: function(params) {
|
|
var colorList = eChartsColorBox;
|
|
return colorList[params.dataIndex]
|
|
}
|
|
},
|
|
},
|
|
}]
|
|
};
|
|
var specialPopulationChart = echarts.init(document.getElementById('specialPopulation'));
|
|
specialPopulationChart.setOption(option);
|
|
initCategoryECharts();
|
|
}, function(code, data) {
|
|
top.dialog.message(data.msg);
|
|
});
|
|
}
|
|
|
|
//男女占比统计图
|
|
function initGenderECharts(){
|
|
top.restAjax.get(top.restAjax.path('api/populationcounts/getgendercharts', []), {}, null, function(code, data) {
|
|
var xAxisData = data.categoryName.split(',');
|
|
var seriesList = data.counts.split(',');
|
|
var seriesData = [];
|
|
for(var i = 0; i < seriesList.length; i++){
|
|
var item = {
|
|
value : '0',
|
|
name : ''
|
|
}
|
|
item.name = xAxisData[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('genderCharts'));
|
|
specialPopulationChart.setOption(option);
|
|
}, function(code, data) {
|
|
top.dialog.message(data.msg);
|
|
});
|
|
}
|
|
initGenderECharts();
|
|
|
|
//各类人员占比情况
|
|
function initCategoryECharts(){
|
|
var xAxisData = xAxisDataNormal.concat(xAxisDataSpecial);
|
|
var seriesList = seriesDataNormal.concat(seriesDataSpecial);
|
|
var seriesData = [];
|
|
for(var i = 0; i < seriesList.length; i++){
|
|
var item = {
|
|
value : '0',
|
|
name : ''
|
|
}
|
|
item.name = xAxisData[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('categoryCharts'));
|
|
specialPopulationChart.setOption(option);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |