From 57d108bfacae9970e1072c7d71241a44697aa61f Mon Sep 17 00:00:00 2001 From: shijingjing <1789544664@qq.com> Date: Mon, 12 Dec 2022 13:46:45 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E7=89=B9=E6=AE=8A=E4=BA=BA=E7=BE=A4?= =?UTF-8?q?=E7=8E=AF=E7=8A=B6=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AppDataStatistics/components/resident.vue | 95 ++++++++++++++++++- 1 file changed, 93 insertions(+), 2 deletions(-) diff --git a/src/project/saas/AppDataStatistics/components/resident.vue b/src/project/saas/AppDataStatistics/components/resident.vue index d302d6a4..74ba5783 100644 --- a/src/project/saas/AppDataStatistics/components/resident.vue +++ b/src/project/saas/AppDataStatistics/components/resident.vue @@ -18,16 +18,96 @@

特殊人群

-
- +
+
@@ -63,7 +143,18 @@ export default { .specialPeople { margin-top: 32px; + .specialBox { + margin-top: 24px; + width: 100%; + height: 480px; + border-radius: 8px; + background: #FFF; + #specialEcharts { + width: 100%; + height: 100%; + } + } } } From 984e4c57ae0257a265a61d3fffe0a8d3b727781f Mon Sep 17 00:00:00 2001 From: shijingjing <1789544664@qq.com> Date: Mon, 12 Dec 2022 14:56:57 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E5=B9=B4=E9=BE=84=E5=88=86=E5=B8=83?= =?UTF-8?q?=EF=BC=8C=E7=94=B7=E5=A5=B3=E6=AF=94=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AppDataStatistics/components/resident.vue | 146 +++++++++++++++++- 1 file changed, 138 insertions(+), 8 deletions(-) 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%; } From c5c2b3887e8d47081824f46a2014cdc83b729606 Mon Sep 17 00:00:00 2001 From: shijingjing <1789544664@qq.com> Date: Mon, 12 Dec 2022 15:02:59 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E9=A2=9C=E8=89=B2=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/project/saas/AppDataStatistics/components/resident.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/project/saas/AppDataStatistics/components/resident.vue b/src/project/saas/AppDataStatistics/components/resident.vue index 4dd90dff..bab06f86 100644 --- a/src/project/saas/AppDataStatistics/components/resident.vue +++ b/src/project/saas/AppDataStatistics/components/resident.vue @@ -77,6 +77,7 @@ export default { }, }, }, + color: ['#4980CB','#F3A963','#6B79BB','#97D1B3'], series: [ { name: '特殊人群', @@ -188,6 +189,7 @@ export default { }, }, }, + series: [ { name: '特殊人群',