|
|
@ -40,6 +40,7 @@ |
|
|
<script> |
|
|
<script> |
|
|
import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue"; |
|
|
import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue"; |
|
|
import * as echarts from "echarts"; |
|
|
import * as echarts from "echarts"; |
|
|
|
|
|
import {color, legend, series, title} from "@/views/dataBoard/renfang/visualizing/components/pie_config"; |
|
|
|
|
|
|
|
|
function dataFormatter(arr) { |
|
|
function dataFormatter(arr) { |
|
|
return arr.map((item) => { |
|
|
return arr.map((item) => { |
|
|
@ -49,6 +50,7 @@ function dataFormatter(arr) { |
|
|
}; |
|
|
}; |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
export default { |
|
|
export default { |
|
|
name: "dibaorenyuan", |
|
|
name: "dibaorenyuan", |
|
|
props: { |
|
|
props: { |
|
|
@ -87,7 +89,8 @@ export default { |
|
|
this.dbryData1 = dataFormatter(res.data); |
|
|
this.dbryData1 = dataFormatter(res.data); |
|
|
this.dbryDataCharts1(); |
|
|
this.dbryDataCharts1(); |
|
|
}) |
|
|
}) |
|
|
.catch(() => {}); |
|
|
.catch(() => { |
|
|
|
|
|
}); |
|
|
this.$http |
|
|
this.$http |
|
|
.get("/actual/base/peopleRoomOverview/lowIncomePie?type=1") |
|
|
.get("/actual/base/peopleRoomOverview/lowIncomePie?type=1") |
|
|
.then(({data: res}) => { |
|
|
.then(({data: res}) => { |
|
|
@ -97,7 +100,8 @@ export default { |
|
|
this.dbryData2 = dataFormatter(res.data); |
|
|
this.dbryData2 = dataFormatter(res.data); |
|
|
this.dbryDataCharts2(); |
|
|
this.dbryDataCharts2(); |
|
|
}) |
|
|
}) |
|
|
.catch(() => {}); |
|
|
.catch(() => { |
|
|
|
|
|
}); |
|
|
this.$http |
|
|
this.$http |
|
|
.get("/actual/base/peopleRoomOverview/lowIncomePie?type=2") |
|
|
.get("/actual/base/peopleRoomOverview/lowIncomePie?type=2") |
|
|
.then(({data: res}) => { |
|
|
.then(({data: res}) => { |
|
|
@ -107,7 +111,8 @@ export default { |
|
|
this.dbryData3 = dataFormatter(res.data); |
|
|
this.dbryData3 = dataFormatter(res.data); |
|
|
this.dbryDataCharts3(); |
|
|
this.dbryDataCharts3(); |
|
|
}) |
|
|
}) |
|
|
.catch(() => {}); |
|
|
.catch(() => { |
|
|
|
|
|
}); |
|
|
this.$http |
|
|
this.$http |
|
|
.get("/actual/base/peopleRoomOverview/lowIncomePie?type=3") |
|
|
.get("/actual/base/peopleRoomOverview/lowIncomePie?type=3") |
|
|
.then(({data: res}) => { |
|
|
.then(({data: res}) => { |
|
|
@ -117,7 +122,8 @@ export default { |
|
|
this.dbryData4 = dataFormatter(res.data); |
|
|
this.dbryData4 = dataFormatter(res.data); |
|
|
this.dbryDataCharts4(); |
|
|
this.dbryDataCharts4(); |
|
|
}) |
|
|
}) |
|
|
.catch(() => {}); |
|
|
.catch(() => { |
|
|
|
|
|
}); |
|
|
this.$http |
|
|
this.$http |
|
|
.get("/actual/base/peopleRoomOverview/findPeoplePie/SUBSISTENCE_ALLOWANCE_FLAG") |
|
|
.get("/actual/base/peopleRoomOverview/findPeoplePie/SUBSISTENCE_ALLOWANCE_FLAG") |
|
|
.then(({data: res}) => { |
|
|
.then(({data: res}) => { |
|
|
@ -127,120 +133,21 @@ export default { |
|
|
this.resiService = dataFormatter(res.data); |
|
|
this.resiService = dataFormatter(res.data); |
|
|
this.initResiServiceCharts(); |
|
|
this.initResiServiceCharts(); |
|
|
}) |
|
|
}) |
|
|
.catch(() => {}); |
|
|
.catch(() => { |
|
|
|
|
|
}); |
|
|
}, |
|
|
}, |
|
|
dbryDataCharts1() { |
|
|
dbryDataCharts1() { |
|
|
let div = document.getElementById("dbryChart1"); |
|
|
let div = document.getElementById("dbryChart1"); |
|
|
this.myChart1 = echarts.init(div); |
|
|
this.myChart1 = echarts.init(div); |
|
|
const option = { |
|
|
const option = { |
|
|
color: [ |
|
|
|
|
|
"#15a7ed", |
|
|
|
|
|
"#22b998", |
|
|
|
|
|
"#5f6ff4", |
|
|
|
|
|
"#a66eeb", |
|
|
|
|
|
"#faa834", |
|
|
|
|
|
"#fd6200", |
|
|
|
|
|
"#fb3905", |
|
|
|
|
|
], |
|
|
|
|
|
tooltip: { |
|
|
|
|
|
show: true, |
|
|
|
|
|
}, |
|
|
|
|
|
legend: { |
|
|
|
|
|
orient: "vertical", |
|
|
|
|
|
top: 20, |
|
|
|
|
|
left: 10, |
|
|
|
|
|
icon: "rect", |
|
|
|
|
|
itemHeight: 14, |
|
|
|
|
|
itemWidth: 14, |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
color: "#ffffff", |
|
|
|
|
|
rich: { |
|
|
|
|
|
name: { |
|
|
|
|
|
width: 90, |
|
|
|
|
|
fontSize: 12, |
|
|
|
|
|
color: "#dddee7", |
|
|
|
|
|
}, |
|
|
|
|
|
value: { |
|
|
|
|
|
width: 30, |
|
|
|
|
|
align: "right", |
|
|
|
|
|
fontSize: 18, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
data: this.dbryData1, |
|
|
|
|
|
tooltip: { |
|
|
tooltip: { |
|
|
show: true, |
|
|
trigger: "item", |
|
|
}, |
|
|
|
|
|
formatter: (name) => { |
|
|
|
|
|
if (this.dbryData1.length) { |
|
|
|
|
|
const item = this.dbryData1.filter( |
|
|
|
|
|
(item) => item.name === name |
|
|
|
|
|
)[0]; |
|
|
|
|
|
return `{name|${echarts.format.truncateText( |
|
|
|
|
|
name, |
|
|
|
|
|
100, |
|
|
|
|
|
"14px Microsoft Yahei", |
|
|
|
|
|
"…" |
|
|
|
|
|
)}}{value| ${item.value}}`; |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
}, |
|
|
}, |
|
|
color, |
|
|
toolbox: { |
|
|
legend: legend(this.dbryData1), |
|
|
show: false, |
|
|
title: title(this.dbryData1), |
|
|
feature: { |
|
|
series: series(this.dbryData1) |
|
|
mark: { show: true }, |
|
|
|
|
|
dataView: { show: true, readOnly: false }, |
|
|
|
|
|
restore: { show: true }, |
|
|
|
|
|
saveAsImage: { show: true }, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
title: { |
|
|
|
|
|
show: !this.dbryData1 || this.dbryData1.length == 0, // 是否要展示“暂无数据”矢量图 |
|
|
|
|
|
text: " {a|}", // 写入占位符a，以便后续填充内容 |
|
|
|
|
|
x: "center", |
|
|
|
|
|
y: "center", |
|
|
|
|
|
subtext: "暂无数据", // 子标题 |
|
|
|
|
|
itemGap: -10, // 设置主副标题间隔 |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
rich: { |
|
|
|
|
|
a: { |
|
|
|
|
|
height: 126, // 设置图片高度 |
|
|
|
|
|
width: 268, // 设置图片宽度 |
|
|
|
|
|
backgroundColor: { |
|
|
|
|
|
// 引入图片，作为背景图，填写相对路径 |
|
|
|
|
|
image: require("@/assets/images/overview/zanwu.png"), |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
subtextStyle: { |
|
|
|
|
|
// 配置副标题的文字样式 |
|
|
|
|
|
fontSize: 12, |
|
|
|
|
|
color: "#ffffff", |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
series: [ |
|
|
|
|
|
{ |
|
|
|
|
|
type: "pie", |
|
|
|
|
|
radius: this.dbryData1 && this.dbryData1.length > 0?[30, 130]:[0,0], |
|
|
|
|
|
center: ["50%", "50%"], |
|
|
|
|
|
roseType: "area", |
|
|
|
|
|
itemStyle: { |
|
|
|
|
|
borderRadius: 0, |
|
|
|
|
|
}, |
|
|
|
|
|
top: 20, |
|
|
|
|
|
left: -40, |
|
|
|
|
|
label: { |
|
|
|
|
|
position: "inside", |
|
|
|
|
|
formatter: "{d}%", |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
color: "#ffffff", |
|
|
|
|
|
fontSize: 12, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
data: this.dbryData1, |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}; |
|
|
}; |
|
|
this.myChart1.setOption(option); |
|
|
this.myChart1.setOption(option); |
|
|
this.myChart1.on("click", (e) => { |
|
|
this.myChart1.on("click", (e) => { |
|
|
@ -262,114 +169,13 @@ export default { |
|
|
let div = document.getElementById("dbryChart2"); |
|
|
let div = document.getElementById("dbryChart2"); |
|
|
this.myChart2 = echarts.init(div); |
|
|
this.myChart2 = echarts.init(div); |
|
|
const option = { |
|
|
const option = { |
|
|
color: [ |
|
|
|
|
|
"#15a7ed", |
|
|
|
|
|
"#22b998", |
|
|
|
|
|
"#5f6ff4", |
|
|
|
|
|
"#a66eeb", |
|
|
|
|
|
"#faa834", |
|
|
|
|
|
"#fd6200", |
|
|
|
|
|
"#fb3905", |
|
|
|
|
|
], |
|
|
|
|
|
tooltip: { |
|
|
|
|
|
show: true, |
|
|
|
|
|
}, |
|
|
|
|
|
legend: { |
|
|
|
|
|
orient: "vertical", |
|
|
|
|
|
top: 20, |
|
|
|
|
|
left: 10, |
|
|
|
|
|
icon: "rect", |
|
|
|
|
|
itemHeight: 14, |
|
|
|
|
|
itemWidth: 14, |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
color: "#ffffff", |
|
|
|
|
|
rich: { |
|
|
|
|
|
name: { |
|
|
|
|
|
width: 90, |
|
|
|
|
|
fontSize: 12, |
|
|
|
|
|
color: "#dddee7", |
|
|
|
|
|
}, |
|
|
|
|
|
value: { |
|
|
|
|
|
width: 30, |
|
|
|
|
|
align: "right", |
|
|
|
|
|
fontSize: 18, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
data: this.dbryData2, |
|
|
|
|
|
tooltip: { |
|
|
tooltip: { |
|
|
show: true, |
|
|
trigger: "item", |
|
|
}, |
|
|
|
|
|
formatter: (name) => { |
|
|
|
|
|
if (this.dbryData2.length) { |
|
|
|
|
|
const item = this.dbryData2.filter( |
|
|
|
|
|
(item) => item.name === name |
|
|
|
|
|
)[0]; |
|
|
|
|
|
return `{name|${echarts.format.truncateText( |
|
|
|
|
|
name, |
|
|
|
|
|
100, |
|
|
|
|
|
"14px Microsoft Yahei", |
|
|
|
|
|
"…" |
|
|
|
|
|
)}}{value| ${item.value}}`; |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
toolbox: { |
|
|
|
|
|
show: false, |
|
|
|
|
|
feature: { |
|
|
|
|
|
mark: { show: true }, |
|
|
|
|
|
dataView: { show: true, readOnly: false }, |
|
|
|
|
|
restore: { show: true }, |
|
|
|
|
|
saveAsImage: { show: true }, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
title: { |
|
|
|
|
|
show: !this.dbryData2 || this.dbryData2.length == 0, // 是否要展示“暂无数据”矢量图 |
|
|
|
|
|
text: " {a|}", // 写入占位符a，以便后续填充内容 |
|
|
|
|
|
x: "center", |
|
|
|
|
|
y: "center", |
|
|
|
|
|
subtext: "暂无数据", // 子标题 |
|
|
|
|
|
itemGap: -10, // 设置主副标题间隔 |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
rich: { |
|
|
|
|
|
a: { |
|
|
|
|
|
height: 126, // 设置图片高度 |
|
|
|
|
|
width: 268, // 设置图片宽度 |
|
|
|
|
|
backgroundColor: { |
|
|
|
|
|
// 引入图片，作为背景图，填写相对路径 |
|
|
|
|
|
image: require("@/assets/images/overview/zanwu.png"), |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
}, |
|
|
subtextStyle: { |
|
|
color, |
|
|
// 配置副标题的文字样式 |
|
|
legend: legend(this.dbryData2), |
|
|
fontSize: 12, |
|
|
title: title(this.dbryData2), |
|
|
color: "#ffffff", |
|
|
series: series(this.dbryData2) |
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
series: [ |
|
|
|
|
|
{ |
|
|
|
|
|
type: "pie", |
|
|
|
|
|
radius: this.dbryData2 && this.dbryData2.length > 0?[30, 130]:[0,0], |
|
|
|
|
|
center: ["50%", "50%"], |
|
|
|
|
|
roseType: "area", |
|
|
|
|
|
itemStyle: { |
|
|
|
|
|
borderRadius: 0, |
|
|
|
|
|
}, |
|
|
|
|
|
top: 20, |
|
|
|
|
|
left: -40, |
|
|
|
|
|
label: { |
|
|
|
|
|
position: "inside", |
|
|
|
|
|
formatter: "{d}%", |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
color: "#ffffff", |
|
|
|
|
|
fontSize: 12, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
data: this.dbryData2, |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}; |
|
|
}; |
|
|
this.myChart2.setOption(option); |
|
|
this.myChart2.setOption(option); |
|
|
this.myChart2.on("click", (a, b) => { |
|
|
this.myChart2.on("click", (a, b) => { |
|
|
@ -391,116 +197,13 @@ export default { |
|
|
let div = document.getElementById("dbryChart3"); |
|
|
let div = document.getElementById("dbryChart3"); |
|
|
this.myChart3 = echarts.init(div); |
|
|
this.myChart3 = echarts.init(div); |
|
|
const option = { |
|
|
const option = { |
|
|
color: [ |
|
|
|
|
|
"#15a7ed", |
|
|
|
|
|
"#22b998", |
|
|
|
|
|
"#5f6ff4", |
|
|
|
|
|
"#a66eeb", |
|
|
|
|
|
"#faa834", |
|
|
|
|
|
"#fd6200", |
|
|
|
|
|
"#fb3905", |
|
|
|
|
|
], |
|
|
|
|
|
tooltip: { |
|
|
tooltip: { |
|
|
show: true, |
|
|
trigger: "item", |
|
|
}, |
|
|
|
|
|
legend: { |
|
|
|
|
|
type: "scroll", |
|
|
|
|
|
orient: "vertical", |
|
|
|
|
|
top: 20, |
|
|
|
|
|
left: 10, |
|
|
|
|
|
icon: "rect", |
|
|
|
|
|
itemHeight: 14, |
|
|
|
|
|
itemWidth: 14, |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
width: 120, |
|
|
|
|
|
color: "#ffffff", |
|
|
|
|
|
rich: { |
|
|
|
|
|
name: { |
|
|
|
|
|
width: 90, |
|
|
|
|
|
fontSize: 12, |
|
|
|
|
|
color: "#dddee7", |
|
|
|
|
|
}, |
|
|
|
|
|
value: { |
|
|
|
|
|
width: 30, |
|
|
|
|
|
align: "right", |
|
|
|
|
|
fontSize: 18, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
data: this.dbryData3, |
|
|
|
|
|
tooltip: { |
|
|
|
|
|
show: true, |
|
|
|
|
|
}, |
|
|
|
|
|
formatter: (name) => { |
|
|
|
|
|
if (this.dbryData3.length) { |
|
|
|
|
|
const item = this.dbryData3.filter( |
|
|
|
|
|
(item) => item.name === name |
|
|
|
|
|
)[0]; |
|
|
|
|
|
return `{name|${echarts.format.truncateText( |
|
|
|
|
|
name, |
|
|
|
|
|
100, |
|
|
|
|
|
"14px Microsoft Yahei", |
|
|
|
|
|
"…" |
|
|
|
|
|
)}}{value| ${item.value}}`; |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
}, |
|
|
toolbox: { |
|
|
color, |
|
|
show: false, |
|
|
legend: legend(this.dbryData3), |
|
|
feature: { |
|
|
title: title(this.dbryData3), |
|
|
mark: { show: true }, |
|
|
series: series(this.dbryData3) |
|
|
dataView: { show: true, readOnly: false }, |
|
|
|
|
|
restore: { show: true }, |
|
|
|
|
|
saveAsImage: { show: true }, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
title: { |
|
|
|
|
|
show: !this.dbryData3 || this.dbryData3.length == 0, // 是否要展示“暂无数据”矢量图 |
|
|
|
|
|
text: " {a|}", // 写入占位符a，以便后续填充内容 |
|
|
|
|
|
x: "center", |
|
|
|
|
|
y: "center", |
|
|
|
|
|
subtext: "暂无数据", // 子标题 |
|
|
|
|
|
itemGap: -10, // 设置主副标题间隔 |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
rich: { |
|
|
|
|
|
a: { |
|
|
|
|
|
height: 126, // 设置图片高度 |
|
|
|
|
|
width: 268, // 设置图片宽度 |
|
|
|
|
|
backgroundColor: { |
|
|
|
|
|
// 引入图片，作为背景图，填写相对路径 |
|
|
|
|
|
image: require("@/assets/images/overview/zanwu.png"), |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
subtextStyle: { |
|
|
|
|
|
// 配置副标题的文字样式 |
|
|
|
|
|
fontSize: 12, |
|
|
|
|
|
color: "#ffffff", |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
series: [ |
|
|
|
|
|
{ |
|
|
|
|
|
type: "pie", |
|
|
|
|
|
radius: this.dbryData3 && this.dbryData3.length > 0?[30, 130]:[0,0], |
|
|
|
|
|
center: ["50%", "50%"], |
|
|
|
|
|
roseType: "area", |
|
|
|
|
|
itemStyle: { |
|
|
|
|
|
borderRadius: 0, |
|
|
|
|
|
}, |
|
|
|
|
|
top: 20, |
|
|
|
|
|
left: -40, |
|
|
|
|
|
label: { |
|
|
|
|
|
position: "inside", |
|
|
|
|
|
formatter: "{d}%", |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
color: "#ffffff", |
|
|
|
|
|
fontSize: 12, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
data: this.dbryData3, |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}; |
|
|
}; |
|
|
this.myChart3.setOption(option); |
|
|
this.myChart3.setOption(option); |
|
|
this.myChart3.on("click", (a, b) => { |
|
|
this.myChart3.on("click", (a, b) => { |
|
|
@ -521,115 +224,13 @@ export default { |
|
|
let div = document.getElementById("dbryChart4"); |
|
|
let div = document.getElementById("dbryChart4"); |
|
|
this.myChart4 = echarts.init(div); |
|
|
this.myChart4 = echarts.init(div); |
|
|
const option = { |
|
|
const option = { |
|
|
color: [ |
|
|
|
|
|
"#15a7ed", |
|
|
|
|
|
"#22b998", |
|
|
|
|
|
"#5f6ff4", |
|
|
|
|
|
"#a66eeb", |
|
|
|
|
|
"#faa834", |
|
|
|
|
|
"#fd6200", |
|
|
|
|
|
"#fb3905", |
|
|
|
|
|
], |
|
|
|
|
|
tooltip: { |
|
|
|
|
|
show: true, |
|
|
|
|
|
}, |
|
|
|
|
|
legend: { |
|
|
|
|
|
type: "scroll", |
|
|
|
|
|
orient: "vertical", |
|
|
|
|
|
top: 20, |
|
|
|
|
|
left: 10, |
|
|
|
|
|
icon: "rect", |
|
|
|
|
|
itemHeight: 14, |
|
|
|
|
|
itemWidth: 14, |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
color: "#ffffff", |
|
|
|
|
|
rich: { |
|
|
|
|
|
name: { |
|
|
|
|
|
width: 90, |
|
|
|
|
|
fontSize: 12, |
|
|
|
|
|
color: "#dddee7", |
|
|
|
|
|
}, |
|
|
|
|
|
value: { |
|
|
|
|
|
width: 30, |
|
|
|
|
|
align: "right", |
|
|
|
|
|
fontSize: 18, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
data: this.dbryData4, |
|
|
|
|
|
tooltip: { |
|
|
tooltip: { |
|
|
show: true, |
|
|
trigger: "item", |
|
|
}, |
|
|
|
|
|
formatter: (name) => { |
|
|
|
|
|
if (this.dbryData4.length) { |
|
|
|
|
|
const item = this.dbryData4.filter( |
|
|
|
|
|
(item) => item.name === name |
|
|
|
|
|
)[0]; |
|
|
|
|
|
return `{name|${echarts.format.truncateText( |
|
|
|
|
|
name, |
|
|
|
|
|
100, |
|
|
|
|
|
"14px Microsoft Yahei", |
|
|
|
|
|
"…" |
|
|
|
|
|
)}}{value| ${item.value}}`; |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
toolbox: { |
|
|
|
|
|
show: false, |
|
|
|
|
|
feature: { |
|
|
|
|
|
mark: { show: true }, |
|
|
|
|
|
dataView: { show: true, readOnly: false }, |
|
|
|
|
|
restore: { show: true }, |
|
|
|
|
|
saveAsImage: { show: true }, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
title: { |
|
|
|
|
|
show: !this.dbryData4 || this.dbryData4.length == 0, // 是否要展示“暂无数据”矢量图 |
|
|
|
|
|
text: " {a|}", // 写入占位符a，以便后续填充内容 |
|
|
|
|
|
x: "center", |
|
|
|
|
|
y: "center", |
|
|
|
|
|
subtext: "暂无数据", // 子标题 |
|
|
|
|
|
itemGap: -10, // 设置主副标题间隔 |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
rich: { |
|
|
|
|
|
a: { |
|
|
|
|
|
height: 126, // 设置图片高度 |
|
|
|
|
|
width: 268, // 设置图片宽度 |
|
|
|
|
|
backgroundColor: { |
|
|
|
|
|
// 引入图片，作为背景图，填写相对路径 |
|
|
|
|
|
image: require("@/assets/images/overview/zanwu.png"), |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
subtextStyle: { |
|
|
|
|
|
// 配置副标题的文字样式 |
|
|
|
|
|
fontSize: 12, |
|
|
|
|
|
color: "#ffffff", |
|
|
|
|
|
}, |
|
|
}, |
|
|
}, |
|
|
color, |
|
|
series: [ |
|
|
legend: legend(this.dbryData4), |
|
|
{ |
|
|
title: title(this.dbryData4), |
|
|
type: "pie", |
|
|
series: series(this.dbryData4) |
|
|
radius: this.dbryData4 && this.dbryData4.length > 0?[30, 130]:[0,0], |
|
|
|
|
|
center: ["50%", "50%"], |
|
|
|
|
|
roseType: "area", |
|
|
|
|
|
itemStyle: { |
|
|
|
|
|
borderRadius: 0, |
|
|
|
|
|
}, |
|
|
|
|
|
top: 20, |
|
|
|
|
|
left: -40, |
|
|
|
|
|
label: { |
|
|
|
|
|
position: "inside", |
|
|
|
|
|
formatter: "{d}%", |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
color: "#ffffff", |
|
|
|
|
|
fontSize: 12, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
data: this.dbryData4, |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}; |
|
|
}; |
|
|
this.myChart4.setOption(option); |
|
|
this.myChart4.setOption(option); |
|
|
this.myChart4.on("click", (a, b) => { |
|
|
this.myChart4.on("click", (a, b) => { |
|
|
@ -651,102 +252,13 @@ export default { |
|
|
let div = document.getElementById("resiServiceChart"); |
|
|
let div = document.getElementById("resiServiceChart"); |
|
|
this.resiChart = echarts.init(div); |
|
|
this.resiChart = echarts.init(div); |
|
|
const option = { |
|
|
const option = { |
|
|
color: [ |
|
|
tooltip: { |
|
|
"#15a7ed", |
|
|
trigger: "item", |
|
|
"#22b998", |
|
|
|
|
|
"#5f6ff4", |
|
|
|
|
|
"#a66eeb", |
|
|
|
|
|
"#faa834", |
|
|
|
|
|
"#fd6200", |
|
|
|
|
|
"#fb3905", |
|
|
|
|
|
], |
|
|
|
|
|
legend: { |
|
|
|
|
|
orient: "vertical", |
|
|
|
|
|
top: 20, |
|
|
|
|
|
left: 10, |
|
|
|
|
|
icon: "rect", |
|
|
|
|
|
itemHeight: 14, |
|
|
|
|
|
itemWidth: 14, |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
color: "#ffffff", |
|
|
|
|
|
rich: { |
|
|
|
|
|
name: { |
|
|
|
|
|
width: 90, |
|
|
|
|
|
fontSize: 12, |
|
|
|
|
|
color: "#dddee7", |
|
|
|
|
|
}, |
|
|
|
|
|
value: { |
|
|
|
|
|
width: 30, |
|
|
|
|
|
align: "right", |
|
|
|
|
|
fontSize: 18, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
data: this.resiService, |
|
|
|
|
|
formatter: (name) => { |
|
|
|
|
|
if (this.resiService.length) { |
|
|
|
|
|
const item = this.resiService.filter((item) => item.name === name)[0]; |
|
|
|
|
|
return `{name|${name}}{value| ${item.value}}`; |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
toolbox: { |
|
|
|
|
|
show: false, |
|
|
|
|
|
feature: { |
|
|
|
|
|
mark: { show: true }, |
|
|
|
|
|
dataView: { show: true, readOnly: false }, |
|
|
|
|
|
restore: { show: true }, |
|
|
|
|
|
saveAsImage: { show: true }, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
title: { |
|
|
|
|
|
show: !this.resiService || this.resiService.length == 0, // 是否要展示“暂无数据”矢量图 |
|
|
|
|
|
text: " {a|}", // 写入占位符a，以便后续填充内容 |
|
|
|
|
|
x: "center", |
|
|
|
|
|
y: "center", |
|
|
|
|
|
subtext: "暂无数据", // 子标题 |
|
|
|
|
|
itemGap: -10, // 设置主副标题间隔 |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
rich: { |
|
|
|
|
|
a: { |
|
|
|
|
|
height: 128, // 设置图片高度 |
|
|
|
|
|
width: 268, // 设置图片宽度 |
|
|
|
|
|
backgroundColor: { |
|
|
|
|
|
// 引入图片，作为背景图，填写相对路径 |
|
|
|
|
|
image: require("@/assets/images/overview/zanwu.png"), |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
subtextStyle: { |
|
|
|
|
|
// 配置副标题的文字样式 |
|
|
|
|
|
fontSize: 12, |
|
|
|
|
|
color: "#ffffff", |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
series: [ |
|
|
|
|
|
{ |
|
|
|
|
|
type: "pie", |
|
|
|
|
|
radius: |
|
|
|
|
|
this.resiService && this.resiService.length > 0 ? [30, 130] : [0, 0], |
|
|
|
|
|
center: ["50%", "50%"], |
|
|
|
|
|
roseType: "area", |
|
|
|
|
|
itemStyle: { |
|
|
|
|
|
borderRadius: 0, |
|
|
|
|
|
}, |
|
|
|
|
|
top: 20, |
|
|
|
|
|
left: -40, |
|
|
|
|
|
label: { |
|
|
|
|
|
position: "inside", |
|
|
|
|
|
formatter: "{d}%", |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
color: "#ffffff", |
|
|
|
|
|
fontSize: 12, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
data: this.resiService, |
|
|
|
|
|
}, |
|
|
}, |
|
|
], |
|
|
color, |
|
|
|
|
|
legend: legend(this.resiService), |
|
|
|
|
|
title: title(this.resiService), |
|
|
|
|
|
series: series(this.resiService) |
|
|
}; |
|
|
}; |
|
|
this.resiChart.setOption(option); |
|
|
this.resiChart.setOption(option); |
|
|
this.resiChart.on("click", (e) => { |
|
|
this.resiChart.on("click", (e) => { |
|
|
@ -770,14 +282,15 @@ export default { |
|
|
|
|
|
|
|
|
<style |
|
|
<style |
|
|
lang="scss" |
|
|
lang="scss" |
|
|
src="@/assets/scss/dataBoard/renfang/index.scss" |
|
|
|
|
|
scoped |
|
|
scoped |
|
|
|
|
|
src="@/assets/scss/dataBoard/renfang/index.scss" |
|
|
></style> |
|
|
></style> |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
.dibaorenyuan { |
|
|
.dibaorenyuan { |
|
|
padding: 0px 240px; |
|
|
padding: 0px 130px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
#dbryChart3 { |
|
|
#dbryChart3 { |
|
|
.echarts-legend { |
|
|
.echarts-legend { |
|
|
white-space: normal; |
|
|
white-space: normal; |
|
|
@ -786,8 +299,8 @@ export default { |
|
|
|
|
|
|
|
|
:v-deep #dbryChart3 { |
|
|
:v-deep #dbryChart3 { |
|
|
.echarts-legend span { |
|
|
.echarts-legend span { |
|
|
padding: 5px 0; |
|
|
|
|
|
display: block; |
|
|
display: block; |
|
|
|
|
|
padding: 5px 0; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|
战立标
2 years ago