diff --git a/src/project/saas/AppDataStatistics/components/resident.vue b/src/project/saas/AppDataStatistics/components/resident.vue
index 74ba5783..4dd90dff 100644
--- a/src/project/saas/AppDataStatistics/components/resident.vue
+++ b/src/project/saas/AppDataStatistics/components/resident.vue
@@ -22,6 +22,20 @@
+
+
+
+
@@ -38,17 +52,18 @@ export default {
},
mounted() {
this.getSpecialEcharts()
+ this.getAgeEcherts()
+ this.getAgeProportion()
},
methods: {
+ // 特殊人群
getSpecialEcharts() {
let specialDom = document.getElementById('specialEcharts');
let myChart = echarts.init(specialDom);
let option = {
title: {
zlevel: 0,
- text: [
- '{name|特殊人群}',
- ].join('\n'),
+ text: ['{name|特殊人群}'],
top: 'center',
left: '48%',
textAlign: 'center',
@@ -103,10 +118,119 @@ export default {
]
};
option && myChart.setOption(option);
- }
+ },
+ // 年龄分布
+ getAgeEcherts() {
+ let ageDom = document.getElementById('ageEcharts');
+ let myChart = echarts.init(ageDom);
+ let option;
+ option = {
+ xAxis: {
+ type: 'category',
+ data: ['10以下', '10-18', '18-65', '65-80', '80以上']
+ },
+ yAxis: {
+ type: "value",
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ },
+ series: [
+ {
+ data: [136, 195, 162, 138, {
+ value: 98,
+ itemStyle: {
+ color: '#F3A963'
+ }
+ }],
+ type: 'bar',
+ itemStyle: {
+ normal: {
+ color: "#3975C6",
+ label: {
+ show: true, //开启显示
+ position: 'top', //在上方显示
+ textStyle: {
+ fontSize: 13,
+ color: '#4980CB'
+ }
+ },
+ },
+ },
+ barWidth: 22,
+ barGap: '20%',
+ }
+ ]
+ };
+ option && myChart.setOption(option);
+ },
+ // 男女比例
+ getAgeProportion() {
+ let proportionDom = document.getElementById('proportionEcharts');
+ let myChart = echarts.init(proportionDom);
+ let option = {
+ title: {
+ zlevel: 0,
+ text: ['{name|男女比例}'],
+ top: 'center',
+ left: '48%',
+ textAlign: 'center',
+ textStyle: {
+ rich: {
+ name: {
+ color: '#999999',
+ fontSize: 13,
+ lineHeight: 15
+ },
+ },
+ },
+ },
+ series: [
+ {
+ name: '特殊人群',
+ type: 'pie',
+ radius: ['30%', '60%'],
+ avoidLabelOverlap: false,
+ hoverAnimation: false,
+ emphasis: {
+ disabled: false,
+ scale: false,
+ scaleSize: 0,
+ },
+ label: {
+ alignTo: 'labelLine',
+ formatter: '{name|{b}}{value|{c}}\n',
+ padding: [0, -50],
+ minMargin: 5,
+ edgeDistance: 10,
+ lineHeight: 15,
+ rich: {
+ time: {
+ fontSize: 10,
+ color: '#999'
+ }
+ }
+ },
+ labelLine: {
+ length: 20,
+ length2: 50,
+ maxSurfaceAngle: 80
+ },
+ data: [
+ { value: 1048, name: '男',itemStyle: { color: '#3975C6'}},
+ { value: 735, name: '女' ,itemStyle: { color: '#F3A963'}},
+ ]
+ }
+ ]
+ };
+ option && myChart.setOption(option);
+ },
},
destroyed() {
-
+
},
}
@@ -141,16 +265,22 @@ export default {
}
}
- .specialPeople {
+ .specialPeople,
+ .ageDistribution,
+ .ageProportion {
margin-top: 32px;
- .specialBox {
+ .specialBox,
+ .ageBox,
+ .proportionBox {
margin-top: 24px;
width: 100%;
height: 480px;
border-radius: 8px;
background: #FFF;
- #specialEcharts {
+ #specialEcharts,
+ #ageEcharts,
+ #proportionEcharts {
width: 100%;
height: 100%;
}