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