duanliangtao
2 years ago
9 changed files with 1082 additions and 11 deletions
@ -0,0 +1,195 @@ |
|||
<template> |
|||
<div> |
|||
<div class="visualizing laonianren"> |
|||
<div class="visualizing-item"> |
|||
<div> |
|||
<data-title title="特殊人群享受服务情况统计" /> |
|||
</div> |
|||
<div id="resiServiceChart" style="height: 400px"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue"; |
|||
import * as echarts from "echarts"; |
|||
|
|||
function dataFormatter(arr) { |
|||
return arr.map((item) => { |
|||
return { |
|||
name: item.classification, |
|||
value: Number(item.classificationNum), |
|||
}; |
|||
}); |
|||
} |
|||
export default { |
|||
name: "teshurenqun", |
|||
props: { |
|||
title: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
org_id: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
components: { |
|||
dataTitle, |
|||
}, |
|||
data() { |
|||
return { |
|||
lnrService: [], |
|||
}; |
|||
}, |
|||
created() { |
|||
const query = this.$route.query; |
|||
this.getData(); |
|||
}, |
|||
activated() {}, |
|||
methods: { |
|||
getData() { |
|||
this.$http |
|||
.get("/actual/base/peopleRoomOverview/findPeoplePie/SPECIAL_CROWD_FLAG") |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} |
|||
this.lnrService = dataFormatter(res.data); |
|||
this.initResiServiceCharts(); |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
|
|||
initResiServiceCharts() { |
|||
let div = document.getElementById("resiServiceChart"); |
|||
this.myChart3 = echarts.init(div); |
|||
const option = { |
|||
color: [ |
|||
"#15a7ed", |
|||
"#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.lnrService, |
|||
formatter: (name) => { |
|||
if (this.lnrService.length) { |
|||
const item = this.lnrService.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.lnrService || this.lnrService.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.lnrService && this.lnrService.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.lnrService, |
|||
}, |
|||
], |
|||
}; |
|||
this.myChart3.setOption(option); |
|||
this.myChart3.on("click", (e) => { |
|||
this.$router.push({ |
|||
path: "/dataBoard/renfang/resi-class-new", |
|||
query: { |
|||
org_id: this.org_id, |
|||
type_id: "aged", |
|||
type_name: "特殊人群", |
|||
pageType: "normal", |
|||
type: "special", |
|||
serv_type: e.data.name, |
|||
}, |
|||
}); |
|||
}); |
|||
window.addEventListener("resize", () => this.myChart3.resize()); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/dataBoard/renfang/index.scss" |
|||
scoped |
|||
></style> |
|||
<style lang="scss" scoped> |
|||
.laonianren { |
|||
padding: 140px 240px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue