kubbo/dvcp_v2_wxcp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

年龄分布，男女比例

Browse Source
This commit is contained in:
shijingjing
2022-12-12 14:56:57 +08:00
parent 57d108bfac
commit 984e4c57ae
1 changed files with 138 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
src/project/saas/AppDataStatistics/components/resident.vue
View File

@@ -22,6 +22,20 @@
<div id="specialEcharts"></div>
</div>
</div>
<!-- 年龄分布 -->
<div class="ageDistribution">
<h3>年龄分布</h3>
<div class="ageBox">
<div id="ageEcharts"></div>
</div>
</div>
<!-- 男女比例 -->
<div class="ageProportion">
<h3>男女比例</h3>
<div class="proportionBox">
<div id="proportionEcharts"></div>
</div>
</div>
</div>
</template>
@@ -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,7 +118,116 @@ 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%;
}