318 lines
12 KiB
Vue
318 lines
12 KiB
Vue
<template>
|
|
<div class="resident">
|
|
<div class="resident_num">
|
|
<div class="num_item" v-for="(item,index) in cardArray" :key="index">
|
|
<p class="num_item_name">{{ item }}</p>
|
|
<p class="num_item_data">{{ Number(data[item]).toLocaleString('en-US') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 特殊人群 -->
|
|
<div class="specialPeople">
|
|
<h3>特殊人群</h3>
|
|
<div class="specialBox">
|
|
<div id="specialEcharts" v-if="specialFlag"></div>
|
|
<AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
|
|
</div>
|
|
</div>
|
|
<!-- 年龄分布 -->
|
|
<div class="ageDistribution">
|
|
<h3>年龄分布</h3>
|
|
<div class="ageBox">
|
|
<div id="ageEcharts" v-if="ageFlag"></div>
|
|
<AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
|
|
</div>
|
|
</div>
|
|
<!-- 男女比例 -->
|
|
<div class="ageProportion">
|
|
<h3>男女比例</h3>
|
|
<div class="proportionBox">
|
|
<div id="proportionEcharts" v-if="sexFlag"></div>
|
|
<AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from 'echarts';
|
|
export default {
|
|
name: "resident",
|
|
props: ['areaId'],
|
|
data() {
|
|
return {
|
|
data: {},
|
|
specialPeople: {},
|
|
specialFlag: true,
|
|
ageArray: [],
|
|
ageRange: [],
|
|
ageFlag: true,
|
|
sexArray: [],
|
|
sexFlag: true,
|
|
cardArray: ['居民总数','本地居民','流动人口']
|
|
}
|
|
},
|
|
created() {
|
|
this.getData()
|
|
},
|
|
mounted() {
|
|
this.getSpecialEcharts()
|
|
this.getAgeEcherts()
|
|
this.getAgeProportion()
|
|
},
|
|
methods: {
|
|
getData() {
|
|
this.$http.post(`/app/appresident/residentStatisticsByAreaId?areaId=${this.areaId}`).then(res=> {
|
|
if(res?.data) {
|
|
this.data = res.data
|
|
this.specialPeople = res.data.特殊人群
|
|
this.$nextTick(()=> {
|
|
let specialArr = Object.values(this.specialPeople)
|
|
this.specialFlag = !specialArr.every(e=> e==0)
|
|
})
|
|
this.ageArray = res.data.年龄层次.map(v=> v.v2)
|
|
this.ageRange = res.data.年龄层次.map(v=> v.v1)
|
|
this.ageFlag = !this.ageArray.every(e=> e==0)
|
|
this.sexArray = res.data.男女比例.map(v=> v.v2)
|
|
this.sexFlag = !this.sexArray.every(e=> e==0)
|
|
this.getSpecialEcharts()
|
|
this.getAgeProportion()
|
|
this.getAgeEcherts(this.ageArray)
|
|
}
|
|
})
|
|
},
|
|
// 特殊人群
|
|
getSpecialEcharts() {
|
|
let specialDom = document.getElementById('specialEcharts');
|
|
let mySpecialChart = echarts.init(specialDom);
|
|
let option = {
|
|
title: {
|
|
zlevel: 0,
|
|
text: ['{name|特殊人群}'],
|
|
top: 'center',
|
|
left: '48%',
|
|
textAlign: 'center',
|
|
textStyle: {
|
|
rich: {
|
|
name: {
|
|
color: '#999999',
|
|
fontSize: 13,
|
|
lineHeight: 15
|
|
},
|
|
},
|
|
},
|
|
},
|
|
color: ['#4980CB','#F3A963','#6B79BB','#97D1B3'],
|
|
series: [
|
|
{
|
|
name: '特殊人群',
|
|
type: 'pie',
|
|
radius: ['30%', '60%'],
|
|
avoidLabelOverlap: false,
|
|
hoverAnimation: false,
|
|
emphasis: {
|
|
disabled: false,
|
|
scale: false,
|
|
scaleSize: 0,
|
|
},
|
|
label: {
|
|
alignTo: 'labelLine',
|
|
formatter: '{name|{b}}\n{value|{c}}',
|
|
padding: [0, -70],
|
|
minMargin: 5,
|
|
edgeDistance: 10,
|
|
lineHeight: 15,
|
|
rich: {
|
|
time: {
|
|
fontSize: 10,
|
|
color: '#999'
|
|
}
|
|
}
|
|
},
|
|
labelLine: {
|
|
length: 15,
|
|
length2: 70,
|
|
maxSurfaceAngle: 80
|
|
},
|
|
data: [
|
|
{ value: this.specialPeople.吸毒人员, name: '吸毒人员' },
|
|
{ value: this.specialPeople.残疾人, name: '残疾人' },
|
|
{ value: this.specialPeople.刑满释放人员, name: '刑满释放人员' },
|
|
{ value: this.specialPeople.社区矫正人群, name: '社区矫正人群' },
|
|
{ value: this.specialPeople.精神病人, name: '精神病人' },
|
|
]
|
|
}
|
|
]
|
|
};
|
|
option && mySpecialChart.setOption(option);
|
|
},
|
|
// 年龄分布
|
|
getAgeEcherts(ageArray) {
|
|
let ageDom = document.getElementById('ageEcharts');
|
|
let myAgeChart = echarts.init(ageDom);
|
|
let option;
|
|
option = {
|
|
xAxis: {
|
|
type: 'category',
|
|
data: this.ageRange,
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
data: ageArray,
|
|
type: 'bar',
|
|
itemStyle: {
|
|
normal: {
|
|
// 每个柱子的颜色
|
|
color: function(params) {
|
|
var colorList = ['#3975C6','#3975C6', '#3975C6', '#3975C6', '#F3A963',];
|
|
return colorList[params.dataIndex]
|
|
},
|
|
label: {
|
|
show: true, //开启显示
|
|
position: 'top', //在上方显示
|
|
textStyle: {
|
|
fontSize: 13,
|
|
color: '#4980CB'
|
|
}
|
|
},
|
|
},
|
|
},
|
|
barWidth: 22,
|
|
barGap: '20%',
|
|
}
|
|
]
|
|
};
|
|
option && myAgeChart.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
|
|
},
|
|
},
|
|
},
|
|
},
|
|
color: ['#3975C6','#F3A963'],
|
|
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: this.sexArray?.[1] , name: '男' },
|
|
{ value: this.sexArray?.[0] , name: '女' },
|
|
]
|
|
}
|
|
]
|
|
};
|
|
option && myChart.setOption(option);
|
|
},
|
|
},
|
|
destroyed() {
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.resident {
|
|
padding: 0 30px;
|
|
box-sizing: border-box;
|
|
|
|
.resident_num {
|
|
width: 100%;
|
|
height: 160px;
|
|
background: #FFF;
|
|
margin-top: 32px;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
.num_item {
|
|
width: 33%;
|
|
height: 100%;
|
|
text-align: center;
|
|
margin-top: 32px;
|
|
|
|
.num_item_name {
|
|
color: #666666;
|
|
}
|
|
|
|
.num_item_data {
|
|
margin-top: 10px;
|
|
color: #000000;
|
|
font-size: 36px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.specialPeople,
|
|
.ageDistribution,
|
|
.ageProportion {
|
|
margin-top: 32px;
|
|
.specialBox,
|
|
.ageBox,
|
|
.proportionBox {
|
|
margin-top: 24px;
|
|
width: 100%;
|
|
height: 480px;
|
|
border-radius: 8px;
|
|
background: #FFF;
|
|
|
|
#specialEcharts,
|
|
#ageEcharts,
|
|
#proportionEcharts {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style> |