446 lines
11 KiB
Vue
446 lines
11 KiB
Vue
<template>
|
|
<section class="residentSta">
|
|
<div class="dataStatistic">
|
|
<div class="above">
|
|
<div class="data-item">
|
|
<div id="LocalResident" v-if="showStatis"/>
|
|
<ai-empty v-else/>
|
|
<h5 v-if="LocalResidentData">
|
|
更新时间:{{ statisticData.更新时间 }}
|
|
</h5>
|
|
</div>
|
|
<div class="data-item" style="width:66%;">
|
|
<div id="ResidentDistribution" v-if="showStatis"/>
|
|
<ai-empty v-else/>
|
|
</div>
|
|
</div>
|
|
<div class="above" style="margin-top:24px;">
|
|
<div class="data-item">
|
|
<div id="SexRatio" v-if="showStatis"/>
|
|
<ai-empty v-else/>
|
|
<div rightTop><i v-html="'有效数据:'"/> {{ LocalResidentData }}</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div id="MaritalSta" v-if="showStatis"/>
|
|
<ai-empty v-else/>
|
|
<div rightTop><i v-html="'有效数据:'"/>{{ LocalResidentData }}</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<div id="AgeDistribution" v-if="showStatis"/>
|
|
<ai-empty v-else/>
|
|
<div rightTop><i v-html="'有效数据:'"/>{{ LocalResidentData }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
|
|
export default {
|
|
name: "residentSta",
|
|
inject: ['resident'],
|
|
props: {
|
|
areaId: String
|
|
},
|
|
computed: {
|
|
LocalResidentData() {
|
|
return this.statisticData?.总人数 || 0
|
|
},
|
|
AgeDistributionData() {
|
|
return this.statisticData?.年龄层次 || []
|
|
},
|
|
MaritalStaData() {
|
|
return this.statisticData?.婚姻状况 || []
|
|
},
|
|
SexRatioData() {
|
|
return this.statisticData?.男女比例 || []
|
|
},
|
|
ResidentDistributionData() {
|
|
return this.statisticData?.人口分布 || []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
statisticData: {},
|
|
showStatis: true,
|
|
}
|
|
},
|
|
watch: {
|
|
areaId(v) {
|
|
v && this.getStaData()
|
|
}
|
|
},
|
|
methods: {
|
|
getStaData() {
|
|
this.resident.instance.post(`/app/appresident/queryCustInfoByAreaId`, null, {
|
|
params: {
|
|
areaId: this.areaId
|
|
}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.statisticData = res.data;
|
|
this.showStatis = this.LocalResidentData > 0;
|
|
this.showLocalResident();
|
|
this.showSexRatio();
|
|
this.showAgeDistribution();
|
|
this.showResidentDistribution();
|
|
this.showMaritalSta();
|
|
}
|
|
})
|
|
},
|
|
showAgeDistribution() {
|
|
//年龄分布
|
|
let myChart = echarts.init(document.getElementById("AgeDistribution"));
|
|
if (!this.showStatis) {
|
|
return myChart.dispose();
|
|
}
|
|
myChart.setOption({
|
|
title: {
|
|
text: "年龄层次统计",
|
|
subtext: "",
|
|
x: "left"
|
|
},
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
|
},
|
|
legend: {
|
|
orient: "vertical",
|
|
bottom: "bottom",
|
|
data: this.AgeDistributionData.map(e => e.v1)
|
|
},
|
|
series: [
|
|
{
|
|
name: "年龄层次统计",
|
|
type: "pie",
|
|
radius: ["40%", "55%"],
|
|
center: ["50%", "50%"],
|
|
data: this.AgeDistributionData.map(e => ({value: e.v2 * 1, name: e.v1})),
|
|
itemStyle: {
|
|
emphasis: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: "rgba(0, 0, 0, 0.5)"
|
|
},
|
|
normal: {
|
|
color: function (params) {
|
|
//自定义颜色
|
|
var colorList = [
|
|
"#FB3C3C",
|
|
"#fc5947",
|
|
"#81E84F",
|
|
"#3C76FF",
|
|
"#6995FF",
|
|
"#FFD500",
|
|
"#FEF517",
|
|
"#B1E598",
|
|
"#81E84F",
|
|
"#B1E598",
|
|
"#FEBB8E"
|
|
];
|
|
return colorList[params.dataIndex];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
});
|
|
},
|
|
showLocalResident() {
|
|
//本地居民
|
|
let myChart = echarts.init(document.getElementById("LocalResident"));
|
|
if (!this.showStatis) {
|
|
return myChart.dispose();
|
|
}
|
|
let option = {
|
|
title: {
|
|
text: "本地居民",
|
|
subtext: "",
|
|
x: "left"
|
|
},
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
|
},
|
|
series: [
|
|
{
|
|
name: "本地居民",
|
|
type: "pie",
|
|
radius: ["50%", "65%"],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: "center",
|
|
textStyle: {
|
|
fontSize: "40",
|
|
fontWeight: "normal",
|
|
color: "#333333"
|
|
}
|
|
},
|
|
emphasis: {
|
|
show: true,
|
|
textStyle: {
|
|
fontSize: "40",
|
|
fontWeight: "normal",
|
|
color: "#333333"
|
|
}
|
|
}
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: [{value: this.LocalResidentData, name: this.LocalResidentData}],
|
|
itemStyle: {
|
|
emphasis: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: "rgba(0, 0, 0, 0.5)"
|
|
},
|
|
normal: {
|
|
color: function (params) {
|
|
//自定义颜色
|
|
var colorList = ["#5088FF"];
|
|
return colorList[params.dataIndex];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
},
|
|
showMaritalSta() {
|
|
//婚姻状况
|
|
let myChart = echarts.init(document.getElementById("MaritalSta"));
|
|
if (!this.showStatis) {
|
|
return myChart.dispose();
|
|
}
|
|
let option = {
|
|
color: [
|
|
"#FB3C3C",
|
|
"#FC5947",
|
|
"#FE8B3F",
|
|
"#3C76FF",
|
|
"#6995FF",
|
|
"#FFD500",
|
|
"#FEF517",
|
|
"#B1E598",
|
|
"#81E84F",
|
|
"#B1E598",
|
|
"#FEBB8E"
|
|
],
|
|
backgroundColor: "#FFFFFF",
|
|
title: {
|
|
text: "婚姻状况统计",
|
|
x: "left"
|
|
},
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
|
},
|
|
legend: {
|
|
orient: "vertical",
|
|
bottom: "bottom",
|
|
width: "auto",
|
|
height: 50,
|
|
data: this.MaritalStaData.map(e => e.v1)
|
|
},
|
|
series: [
|
|
{
|
|
name: "婚姻状况",
|
|
type: "pie",
|
|
radius: ["40%", "55%"],
|
|
center: ["50%", "50%"],
|
|
data: this.MaritalStaData.map(e => ({value: e.v2 * 1, name: e.v1})),
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
},
|
|
showResidentDistribution() {
|
|
//人口分布/居民分布
|
|
let myChart = echarts.init(document.getElementById("ResidentDistribution"));
|
|
if (!this.showStatis) {
|
|
return myChart.dispose();
|
|
}
|
|
let option = {
|
|
title: {
|
|
text: "人口分布统计",
|
|
subtext: "",
|
|
x: "left"
|
|
},
|
|
color: ["#5088FF"],
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
// 坐标轴指示器，坐标轴触发有效
|
|
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
|
|
},
|
|
formatter: "{a} <br/>{b} : {c} "
|
|
},
|
|
grid: {
|
|
left: "3%",
|
|
right: "4%",
|
|
bottom: "3%",
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
data: this.ResidentDistributionData.map(e => e.name),
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value"
|
|
}
|
|
],
|
|
dataZoom: [
|
|
{
|
|
id: "dataZoomX",
|
|
type: "slider",
|
|
xAxisIndex: [0],
|
|
filterMode: "filter"
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: "人口数量",
|
|
type: "bar",
|
|
barWidth: "16",
|
|
data: this.ResidentDistributionData.map(e => e.v1)
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
},
|
|
showSexRatio() {
|
|
//男女比例
|
|
let myChart = echarts.init(document.getElementById("SexRatio"));
|
|
if (!this.showStatis) {
|
|
return myChart.dispose();
|
|
}
|
|
myChart.setOption({
|
|
title: {
|
|
text: "男女比例统计",
|
|
subtext: "",
|
|
x: "left"
|
|
},
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
|
},
|
|
legend: {
|
|
orient: "vertical",
|
|
bottom: "bottom",
|
|
data: this.SexRatioData.map(e => e.v1)
|
|
},
|
|
series: [
|
|
{
|
|
name: "男女比例",
|
|
type: "pie",
|
|
radius: ["40%", "55%"],
|
|
center: ["50%", "50%"],
|
|
data: this.SexRatioData.map(e => ({value: e.v2 * 1, name: e.v1})),
|
|
itemStyle: {
|
|
emphasis: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: "rgba(0, 0, 0, 0.5)"
|
|
},
|
|
normal: {
|
|
color: function (params) {
|
|
//自定义颜色
|
|
let colorList = [
|
|
"#FB3C3C",
|
|
"#3C76FF",
|
|
"#3C76FF",
|
|
"#FC5947",
|
|
"#6995FF",
|
|
"#FB3C3C",
|
|
"#FE8B3F",
|
|
"#B1E598",
|
|
"#81E84F",
|
|
"#FEBB8E"
|
|
];
|
|
return colorList[params.dataIndex];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
});
|
|
},
|
|
},
|
|
created() {
|
|
this.getStaData()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.residentSta {
|
|
height: 100%;
|
|
|
|
.dataStatistic {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
padding: 16px 0;
|
|
box-sizing: border-box;
|
|
|
|
.above {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.data-item {
|
|
width: 32%;
|
|
height: 380px;
|
|
background: rgba(255, 255, 255, 1);
|
|
border-radius: 4px;
|
|
padding: 16px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
|
|
div[rightTop] {
|
|
position: absolute;
|
|
right: 16px;
|
|
top: 16px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
|
|
& > i {
|
|
font-style: normal;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
& > h5 {
|
|
width: 100%;
|
|
color: #999;
|
|
text-align: center;
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#LocalResident, #MaritalSta, #ResidentDistribution, #SexRatio, #AgeDistribution {
|
|
width: 100%;
|
|
height: 95%
|
|
}
|
|
}
|
|
</style>
|