初始化
This commit is contained in:
aixianling
445
packages/meta/AppResident/residentSta.vue
Normal file
445
packages/meta/AppResident/residentSta.vue
Normal file
@@ -0,0 +1,445 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user