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%; }