Browse Source

统计legend

jly/task002
tianqian 3 years ago
parent
commit
f810b5bf8d
  1. 10
      src/views/modules/census/census-houseList.vue
  2. 47
      src/views/modules/census/census-residentList.vue
  3. 14
      src/views/modules/communityParty/dyhx/party.vue

10
src/views/modules/census/census-houseList.vue

@ -62,7 +62,7 @@
<div class="flex1">
<div class="box">
<div class="legend">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData.data" @click="handleClickItem(item)">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartDataData" @click="handleClickItem(item)">
<div class="kuai" :style="{ backgroundColor: color1[index] }"></div>
<div class="content">
<div class="name">{{ item.name }}</div>
@ -91,7 +91,7 @@
<div class="flex1">
<div class="box">
<div class="legend2">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData2.data" @click="handleClickItem2(item)">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData2Data" @click="handleClickItem2(item)">
<div class="kuai" v-if="item.name == '自住'"><img src="../../../assets/img/census/自住.png" /></div>
<div class="kuai" v-if="item.name == '出租'"><img src="../../../assets/img/census/出租.png" /></div>
<div class="kuai" v-if="item.name == '闲置'"><img src="../../../assets/img/census/闲置.png" /></div>
@ -242,7 +242,9 @@ export default {
orgId: '',
purpose: '',
rentFlag: '',
orgIdPath: ''
orgIdPath: '',
chartDataData:[],
chartData2Data:[]
};
},
computed: {
@ -413,6 +415,7 @@ export default {
radio: item.count == 0 ? '0' : ((item.count / this.pieData.total) * 100).toFixed(2)
};
});
this.chartDataData=this.chartData.data ;
this.$forceUpdate();
this.iniPieChart(this.chartData);
},
@ -433,6 +436,7 @@ export default {
radio: item.count == 0 ? '0' : ((item.count / this.pieData2.total) * 100).toFixed(2)
};
});
this.chartData2Data=this.chartData2.data ;
this.$forceUpdate();
this.iniPieChart2(this.chartData2);
},

47
src/views/modules/census/census-residentList.vue

@ -40,7 +40,7 @@
<div class="flex1">
<div class="box">
<div class="legend">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData.data" @click="handleClickItem(item)">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartDataData" @click="handleClickItem(item)">
<div class="kuai" :style="{ backgroundColor: color[index] }"></div>
<div class="content">
<div class="name">{{ item.name }}</div>
@ -69,7 +69,7 @@
<div class="flex1">
<div class="box">
<div class="legend">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData2.data" @click="handleClickItem2(item)">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData2Data" @click="handleClickItem2(item)">
<div class="kuai" :style="{ backgroundColor: color[index] }"></div>
<div class="content">
<div class="name">{{ item.name }}</div>
@ -211,7 +211,9 @@ export default {
code: '',
pieDatatotal: 0,
pieDatatotal2: 0,
codeType: 'education'
codeType: 'education',
chartDataData: [],
chartData2Data: []
};
},
computed: {
@ -362,34 +364,35 @@ export default {
}
},
setPieData() {
let data = [...this.pieData];
this.pieDatatotal = data
.map(item => item.totalResi)
.reduce(function(prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
});
let data = [...this.pieData.list];
// this.pieDatatotal = data
// .map(item => item.totalResi)
// .reduce(function(prev, cur, index, arr) {
// console.log(prev, cur, index);
// return prev + cur;
// });
this.chartData.name = data.map(item => item.codeName);
this.chartData.data = data.map(item => {
return {
value: item.totalResi,
name: item.codeName,
code: item.code,
radio: item.totalResi == 0 ? '0' : ((item.totalResi / this.pieDatatotal) * 100).toFixed(2)
radio: item.totalResi == 0 ? '0' : ((item.totalResi / this.pieData.total) * 100).toFixed(2)
};
});
this.chartDataData = this.chartData.data;
console.log('chartData', this.chartData);
this.iniPieChart(this.chartData);
},
setPieData2() {
let data = [...this.pieData2];
let data = [...this.pieData2.list];
this.pieDatatotal2 = data
.map(item => item.totalResi)
.reduce(function(prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
});
// this.pieDatatotal2 = data
// .map(item => item.totalResi)
// .reduce(function(prev, cur, index, arr) {
// console.log(prev, cur, index);
// return prev + cur;
// });
this.chartData2.name = data.map(item => item.codeName);
this.chartData2.data = data.map(item => {
@ -397,10 +400,10 @@ export default {
value: item.totalResi,
name: item.codeName,
code: item.code,
radio: item.totalResi == 0 ? '0' : ((item.totalResi / this.pieDatatotal2) * 100).toFixed(2)
radio: item.totalResi == 0 ? '0' : ((item.totalResi / this.pieData2.total) * 100).toFixed(2)
};
});
this.chartData2Data = this.chartData2.data;
console.log('chartData', this.chartData2);
this.iniPieChart2(this.chartData2);
},
@ -420,7 +423,7 @@ export default {
},
color: this.color,
title: {
text: this.pieDatatotal,
text: this.pieData.total,
subtext: '总数',
x: 'center',
y: 'center',
@ -530,7 +533,7 @@ export default {
},
color: this.color,
title: {
text: this.pieDatatotal2,
text: this.pieData2.total,
subtext: '总数',
x: 'center',
y: 'center',

14
src/views/modules/communityParty/dyhx/party.vue

@ -37,7 +37,7 @@
<div class="flex1">
<div class="box">
<div class="legend">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData.data" @click="handleClickItem(item)">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartDataData" @click="handleClickItem(item)">
<div class="kuai" :style="{ backgroundColor: color[index] }"></div>
<div class="content">
<div class="name">{{ item.name }}</div>
@ -103,7 +103,7 @@
<div class="flex1">
<div class="box">
<div class="legend">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData2.data" @click="handleClickItem(item)">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData2Data" @click="handleClickItem(item)">
<div class="kuai" :style="{ backgroundColor: color[index] }"></div>
<div class="content">
<div class="name">{{ item.name }}</div>
@ -269,7 +269,9 @@ export default {
pieEduOptions: null,
formData: {
orgId: ''
}
},
chartDataData: [],
chartData2Data: []
};
},
computed: {
@ -671,7 +673,7 @@ export default {
console.log(prev, cur, index);
return prev + cur;
});
console.log('this.pieDatatotal',this.pieDatatotal);
console.log('this.pieDatatotal', this.pieDatatotal);
this.chartData.name = data.map(item => item.value);
this.chartData.data = data.map(item => {
return {
@ -681,6 +683,7 @@ export default {
radio: item.radio
};
});
this.chartDataData = this.chartData.data;
console.log('chartData', this.chartData);
this.$forceUpdate();
this.initAgeCharts(this.chartData);
@ -705,7 +708,7 @@ export default {
radio: item.radio
};
});
this.chartData2Data = this.chartData2.data;
console.log('chartData', this.chartData2);
this.$forceUpdate();
this.initEduCharts(this.chartData2);
@ -1026,5 +1029,4 @@ export default {
}
}
}
</style>

Loading…
Cancel
Save