From dc1e4fb2aec77fbbdbf3ef763c17e742df99c992 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 29 Jan 2024 12:18:07 +0800
Subject: [PATCH] 居民监管，图表显示调整，住房监管，柱状图数据对接
---
src/views/propertySupervision/houseHoldSupervision.vue | 143 ++++++++++++++++++++---------------
src/styles/avue-ui.scss | 39 ++++++---
src/views/propertySupervision/residentSupervision.vue | 29 +++----
3 files changed, 122 insertions(+), 89 deletions(-)
diff --git a/src/styles/avue-ui.scss b/src/styles/avue-ui.scss
index 10ca041..48e52a6 100644
--- a/src/styles/avue-ui.scss
+++ b/src/styles/avue-ui.scss
@@ -70,21 +70,24 @@
justify-content: space-between;
- .echarts-cell:nth-child(1),
- .echarts-cell:nth-child(2) {
- height: 300px;
- width: calc(50% - 5px);
- }
+ // .echarts-cell:nth-child(1),
+ // .echarts-cell:nth-child(2) {
+ // height: 300px;
+ // width: calc(50% - 5px);
+ // }
- .echarts-cell:nth-child(3),
- .echarts-cell:nth-child(4),
- .echarts-cell:nth-child(5) {
- margin-top: 10px;
- height: 300px;
- width: calc((100% / 3) - 6.66px);
- }
+ // .echarts-cell:nth-child(3),
+ // .echarts-cell:nth-child(4),
+ // .echarts-cell:nth-child(5) {
+ // margin-top: 10px;
+ // height: 300px;
+ // width: calc((100% / 3) - 6.66px);
+ // }
.echarts-cell {
+ margin: 0 5px;
+ height: 300px;
+ width: calc(20% - 10px);
display: flex;
flex-direction: column;
background: #fff;
@@ -104,4 +107,16 @@
padding: 10px;
background: #fff;
}
+}
+
+.cur-house-hold-supervision-page {
+ .echarts-cell:nth-child(1) {
+ width: 0;
+ flex: 1;
+ }
+
+ .echarts-cell:nth-child(2) {
+ width: 0;
+ flex: 2;
+ }
}
\ No newline at end of file
diff --git a/src/views/propertySupervision/houseHoldSupervision.vue b/src/views/propertySupervision/houseHoldSupervision.vue
index bafe0c7..b7435ed 100644
--- a/src/views/propertySupervision/houseHoldSupervision.vue
+++ b/src/views/propertySupervision/houseHoldSupervision.vue
@@ -833,29 +833,27 @@
setEchartsOption (data) {
let option = {
- // title: {
- // text:"房屋",
- // left: 'center',
- // top:20,
- // },
tooltip: {
- trigger: 'item'
+ trigger: 'item',
+ confine: true
},
legend: {
orient: 'vertical',
- right: 30,
- bottom: 10
+ right: 60,
+ bottom: 0,
+ padding: [30, 0],
+ formatter: function (name) {
+ return name.length > 6 ? name.substr(0, 6) + '...' : name
+ }
},
- // labelLine: {
- // length: 15,
- // length2: 0,
- // maxSurfaceAngle: 80
- // },
series: [{
type: 'pie',
center: ['36%', '50%'],
radius: '80%', //修改大小
data: [],
+ label: {
+ show: false
+ },
emphasis: {
itemStyle: {
shadowBlur: 10,
@@ -883,14 +881,25 @@
},
setBarEchartsOption (data) {
+ let legendData = ['商品房', '自建房', '安置房', '公房', '危房', '出租房']
+
var chartDom = document.getElementById('bar-echarts')
- var myChart = echarts.init(chartDom)
- var option = {
+ if (this.myChart) {
+ this.myChart.clear()
+ this.myChart.dispose()
+ }
+
+ this.myChart = echarts.init(chartDom)
+ let option = {
tooltip: {
trigger: 'axis',
+ confine: true,
axisPointer: {
type: 'shadow'
}
+ },
+ legend: {
+ show: true
},
grid: {
left: '3%',
@@ -906,63 +915,75 @@
}
},
yAxis: {
- type: 'value'
+ type: 'value',
+ minInterval: 1
},
series: []
}
- // option && myChart.setOption(option)
+ if (data && data.length) {
+ const rawData = data.reduce((pre, cur) => {
+ legendData.forEach(item => {
+ let curItem = cur.child.find(i => i.labelName == item)
- // for (let i = 0, ii = data.length; i < ii; i++) {
- // option.xAxis[0].data.push(data[i].name)
- // option.series[0].data.push(data[i].counts)
- // option && myChart.setOption(option)
- // }
+ if (curItem) {
+ let curPre = pre.find(i => i.name == item)
- const rawData = [
- [100, 302, 301, 334, 390, 330, 320],
- [320, 132, 101, 134, 90, 230, 210],
- [220, 182, 191, 234, 290, 330, 310],
- [150, 212, 201, 154, 190, 330, 410],
- [820, 832, 901, 934, 1290, 1330, 1320]
- ]
- const totalData = []
- for (let i = 0; i < rawData[0].length; ++i) {
- let sum = 0
- for (let j = 0; j < rawData.length; ++j) {
- sum += rawData[j][i]
+ if (curPre) {
+ pre = pre.map(i => {
+ if (i.name == item) i.data.push(curItem.num)
+
+ return i
+ })
+ } else {
+ pre.push({
+ name: item,
+ data: [curItem.num]
+ })
+ }
+ }
+ })
+
+ return pre
+ }, [])
+
+ let xData = data.map(item => item.name)
+
+ let typeData = legendData
+
+ option.xAxis.data = xData
+
+ option.series = typeData.map((name, sid) => {
+ return {
+ name,
+ type: 'bar',
+ stack: 'total',
+ barWidth: '60%',
+ label: {
+ show: false,
+ },
+ data: rawData[sid].data
+ }
+ })
+ } else {
+ option = {
+ title: {
+ text: '暂无数据',
+ x: 'center',
+ y: 'center',
+ textStyle: {
+ color: '#fff',
+ fontWeight: 'normal',
+ fontSize: 12
+ }
+ }
}
- totalData.push(sum)
}
- let xData = [
- 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'
- ]
- let typeData = ['Direct', 'Mail Ad', 'Affiliate Ad', 'Video Ad', 'Search Engine']
+ this.myChart.setOption(option)
- option.xAxis.data = xData
-
- option.series = typeData.map((name, sid) => {
- return {
- name,
- type: 'bar',
- stack: 'total',
- barWidth: '60%',
- label: {
- show: true,
- formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
- },
- data: rawData[sid].map((d, did) =>
- totalData[did] <= 0 ? 0 : d / totalData[did]
- )
- }
- })
-
- myChart.setOption(option)
-
- myChart.on('click', (params) => {
- console.log(params)
+ this.myChart.on('click', (params) => {
this.query.neiName = params.data.name
this.onLoad(this.page, this.query)
})
diff --git a/src/views/propertySupervision/residentSupervision.vue b/src/views/propertySupervision/residentSupervision.vue
index 8ff1764..cf37c00 100644
--- a/src/views/propertySupervision/residentSupervision.vue
+++ b/src/views/propertySupervision/residentSupervision.vue
@@ -796,12 +796,17 @@
setEchartsOption (data) {
let option = {
tooltip: {
- trigger: 'item'
+ trigger: 'item',
+ confine: true
},
legend: {
orient: 'vertical',
- right: 30,
- bottom: 10
+ right: 10,
+ bottom: 0,
+ padding: [30, 0],
+ formatter: function (name) {
+ return name.length > 6 ? name.substr(0, 6) + '...' : name
+ }
},
labelLine: {
length: 15,
@@ -810,10 +815,12 @@
},
series: [{
type: 'pie',
- center: ['36%', '50%'],
- radius: '80%', //修改大小
+ center: ['26%', '50%'],
+ radius: '60%', //修改大小
data: [],
-
+ label: {
+ show: false
+ },
emphasis: {
itemStyle: {
shadowBlur: 10,
@@ -834,16 +841,6 @@
name: data[i].children[k].name,
id: data[i].children[k].id,
})
- }
-
- if (data[i].children.length > 10) {
- option.series[0].label = {
- show: false
- }
- } else {
- option.series[0].label = {
- show: true
- }
}
option.legend.type = series.length > 4 ? "scroll" : "plain"
--
Gitblit v1.9.3