You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
574 lines
15 KiB
574 lines
15 KiB
2 years ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="visualizing">
|
||
|
|
<div class="visualizing-item">
|
||
|
|
<div>
|
||
|
|
<data-title title="失业人员失业原因统计" />
|
||
|
|
</div>
|
||
|
|
<div id="syryChart1" style="height: 380px"></div>
|
||
|
|
</div>
|
||
|
|
<div class="visualizing-item">
|
||
|
|
<div>
|
||
|
|
<data-title title="失业人员就业愿望统计" />
|
||
|
|
</div>
|
||
|
|
<div id="syryChart2" style="height: 380px"></div>
|
||
|
|
</div>
|
||
|
|
<div class="visualizing-item">
|
||
|
|
<div>
|
||
|
|
<data-title title="失业人员年龄统计" />
|
||
|
|
</div>
|
||
|
|
<div id="syryChart3" style="height: 380px"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="visualizing dibaorenyuan">
|
||
|
|
<div class="visualizing-left">
|
||
|
|
<div>
|
||
|
|
<data-title title="技能找人统计" />
|
||
|
|
</div>
|
||
|
|
<div id="syryChart4" style="height: 380px"></div>
|
||
|
|
</div>
|
||
|
|
<div class="visualizing-right">
|
||
|
|
<div>
|
||
|
|
<data-title title="岗位找人统计" />
|
||
|
|
</div>
|
||
|
|
<div id="syryChart5" style="height: 380px"></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) => {
|
||
|
|
let name = "";
|
||
|
|
const arr = Array.from(item.classification);
|
||
|
|
arr.forEach((d, i) => {
|
||
|
|
name = name + d;
|
||
|
|
if ((i + 1) % 5 == 0&&i!=arr.length-1) {
|
||
|
|
name = name + d + "\n";
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return {
|
||
|
|
name: name,
|
||
|
|
value: Number(item.classificationNum),
|
||
|
|
};
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function dataFormatter1(arr) {
|
||
|
|
return arr.map((item) => {
|
||
|
|
return {
|
||
|
|
name: item.classification,
|
||
|
|
value: Number(item.classificationNum),
|
||
|
|
};
|
||
|
|
});
|
||
|
|
}
|
||
|
|
export default {
|
||
|
|
name: "shiyerenyuan",
|
||
|
|
props: {
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: "详情",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
dataTitle,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
syryData1: [],
|
||
|
|
syryData2: [],
|
||
|
|
syryData3: [],
|
||
|
|
syryData4: [],
|
||
|
|
syryData5: [],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
const query = this.$route.query;
|
||
|
|
this.getData();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getData() {
|
||
|
|
this.$http
|
||
|
|
.get("/actual/base/peopleRoomOverview/unemployedPie?type=0")
|
||
|
|
.then(({ data: res }) => {
|
||
|
|
if (res.code !== 0) {
|
||
|
|
return this.$message.error(res.msg);
|
||
|
|
}
|
||
|
|
this.syryData1 = dataFormatter(res.data);
|
||
|
|
this.syryDataCharts1();
|
||
|
|
})
|
||
|
|
.catch(() => {});
|
||
|
|
this.$http
|
||
|
|
.get("/actual/base/peopleRoomOverview/unemployedPie?type=1")
|
||
|
|
.then(({ data: res }) => {
|
||
|
|
if (res.code !== 0) {
|
||
|
|
return this.$message.error(res.msg);
|
||
|
|
}
|
||
|
|
this.syryData2 = dataFormatter1(res.data);
|
||
|
|
this.syryDataCharts2();
|
||
|
|
})
|
||
|
|
.catch(() => {});
|
||
|
|
this.$http
|
||
|
|
.get("/actual/base/peopleRoomOverview/unemployedPie?type=2")
|
||
|
|
.then(({ data: res }) => {
|
||
|
|
if (res.code !== 0) {
|
||
|
|
return this.$message.error(res.msg);
|
||
|
|
}
|
||
|
|
this.syryData3 = dataFormatter1(res.data);
|
||
|
|
this.syryDataCharts3();
|
||
|
|
})
|
||
|
|
.catch(() => {});
|
||
|
|
this.$http
|
||
|
|
.get("/actual/base/peopleRoomOverview/unemployedPie?type=3")
|
||
|
|
.then(({ data: res }) => {
|
||
|
|
if (res.code !== 0) {
|
||
|
|
return this.$message.error(res.msg);
|
||
|
|
}
|
||
|
|
this.syryData4 = dataFormatter(res.data);
|
||
|
|
this.syryDataCharts4();
|
||
|
|
})
|
||
|
|
.catch(() => {});
|
||
|
|
this.$http
|
||
|
|
.get("/actual/base/peopleRoomOverview/unemployedPie?type=4")
|
||
|
|
.then(({ data: res }) => {
|
||
|
|
if (res.code !== 0) {
|
||
|
|
return this.$message.error(res.msg);
|
||
|
|
}
|
||
|
|
this.syryData5 = dataFormatter(res.data);
|
||
|
|
this.syryDataCharts5();
|
||
|
|
})
|
||
|
|
.catch(() => {});
|
||
|
|
},
|
||
|
|
syryDataCharts1() {
|
||
|
|
let div = document.getElementById("syryChart1");
|
||
|
|
this.myChart1 = echarts.init(div);
|
||
|
|
var option = {
|
||
|
|
color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"],
|
||
|
|
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.syryData1,
|
||
|
|
formatter: (name) => {
|
||
|
|
if (this.syryData1.length) {
|
||
|
|
const item = this.syryData1.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 },
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: "Nightingale Chart",
|
||
|
|
type: "pie",
|
||
|
|
radius: [30, 130],
|
||
|
|
center: ["50%", "50%"],
|
||
|
|
roseType: "area",
|
||
|
|
itemStyle: {
|
||
|
|
borderRadius: 0,
|
||
|
|
},
|
||
|
|
top: 20,
|
||
|
|
left: -40,
|
||
|
|
label: {
|
||
|
|
position: "inside",
|
||
|
|
formatter: "{d}%",
|
||
|
|
textStyle: {
|
||
|
|
color: "#ffffff",
|
||
|
|
fontSize: 12,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data: this.syryData1,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
this.myChart1.setOption(option);
|
||
|
|
this.myChart1.on("click", (a, b) => {
|
||
|
|
this.$router.push({
|
||
|
|
path: "/dataBoard/renfang/resi-class",
|
||
|
|
query: {
|
||
|
|
org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28",
|
||
|
|
type_id: "aged",
|
||
|
|
type_name: "失业人员失业原因",
|
||
|
|
pageType: "normal",
|
||
|
|
},
|
||
|
|
});
|
||
|
|
});
|
||
|
|
window.addEventListener("resize", () => this.myChart1.resize());
|
||
|
|
},
|
||
|
|
syryDataCharts2() {
|
||
|
|
let div = document.getElementById("syryChart2");
|
||
|
|
this.myChart2 = echarts.init(div);
|
||
|
|
var option = {
|
||
|
|
color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
|
||
|
|
legend: {
|
||
|
|
orient: "vertical",
|
||
|
|
top: 20,
|
||
|
|
left: 10,
|
||
|
|
icon: "rect",
|
||
|
|
itemHeight: 14,
|
||
|
|
itemWidth: 14,
|
||
|
|
textStyle: {
|
||
|
|
color: "#ffffff",
|
||
|
|
rich: {
|
||
|
|
name: {
|
||
|
|
width: 80,
|
||
|
|
fontSize: 12,
|
||
|
|
color: "#dddee7",
|
||
|
|
},
|
||
|
|
value: {
|
||
|
|
width: 30,
|
||
|
|
align: "right",
|
||
|
|
fontSize: 18,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data: this.syryData2,
|
||
|
|
formatter: (name) => {
|
||
|
|
if (this.syryData2.length) {
|
||
|
|
const item = this.syryData2.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 },
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: "Nightingale Chart",
|
||
|
|
type: "pie",
|
||
|
|
radius: [30, 130],
|
||
|
|
center: ["50%", "50%"],
|
||
|
|
roseType: "area",
|
||
|
|
itemStyle: {
|
||
|
|
borderRadius: 0,
|
||
|
|
},
|
||
|
|
top: 20,
|
||
|
|
left: -40,
|
||
|
|
label: {
|
||
|
|
position: "inside",
|
||
|
|
formatter: "{d}%",
|
||
|
|
textStyle: {
|
||
|
|
color: "#ffffff",
|
||
|
|
fontSize: 12,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data: this.syryData2,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
this.myChart2.setOption(option);
|
||
|
|
this.myChart2.on("click", (a, b) => {
|
||
|
|
this.$router.push({
|
||
|
|
path: "/dataBoard/renfang/resi-class",
|
||
|
|
query: {
|
||
|
|
org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28",
|
||
|
|
type_id: "aged",
|
||
|
|
type_name: "失业人员就业愿望",
|
||
|
|
pageType: "normal",
|
||
|
|
},
|
||
|
|
});
|
||
|
|
});
|
||
|
|
window.addEventListener("resize", () => this.myChart2.resize());
|
||
|
|
},
|
||
|
|
syryDataCharts3() {
|
||
|
|
let div = document.getElementById("syryChart3");
|
||
|
|
this.myChart3 = echarts.init(div);
|
||
|
|
var option = {
|
||
|
|
color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"],
|
||
|
|
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.syryData3,
|
||
|
|
formatter: (name) => {
|
||
|
|
if (this.syryData3.length) {
|
||
|
|
const item = this.syryData3.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 },
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: "Nightingale Chart",
|
||
|
|
type: "pie",
|
||
|
|
radius: [30, 130],
|
||
|
|
center: ["50%", "50%"],
|
||
|
|
roseType: "area",
|
||
|
|
itemStyle: {
|
||
|
|
borderRadius: 0,
|
||
|
|
},
|
||
|
|
top: 20,
|
||
|
|
left: -40,
|
||
|
|
label: {
|
||
|
|
position: "inside",
|
||
|
|
formatter: "{d}%",
|
||
|
|
textStyle: {
|
||
|
|
color: "#ffffff",
|
||
|
|
fontSize: 12,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data: this.syryData3,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
this.myChart3.setOption(option);
|
||
|
|
this.myChart3.on("click", (a, b) => {
|
||
|
|
this.$router.push({
|
||
|
|
path: "/dataBoard/renfang/resi-class",
|
||
|
|
query: {
|
||
|
|
org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28",
|
||
|
|
type_id: "aged",
|
||
|
|
type_name: "失业人员年龄",
|
||
|
|
pageType: "normal",
|
||
|
|
},
|
||
|
|
});
|
||
|
|
});
|
||
|
|
window.addEventListener("resize", () => this.myChart3.resize());
|
||
|
|
},
|
||
|
|
syryDataCharts4() {
|
||
|
|
let div = document.getElementById("syryChart4");
|
||
|
|
this.myChart4 = echarts.init(div);
|
||
|
|
var option = {
|
||
|
|
color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
|
||
|
|
legend: {
|
||
|
|
type: "scroll",
|
||
|
|
orient: "vertical",
|
||
|
|
top: 20,
|
||
|
|
left: 10,
|
||
|
|
icon: "rect",
|
||
|
|
itemHeight: 14,
|
||
|
|
itemWidth: 14,
|
||
|
|
textStyle: {
|
||
|
|
color: "#ffffff",
|
||
|
|
rich: {
|
||
|
|
name: {
|
||
|
|
width: 80,
|
||
|
|
fontSize: 12,
|
||
|
|
color: "#dddee7",
|
||
|
|
},
|
||
|
|
value: {
|
||
|
|
width: 30,
|
||
|
|
align: "right",
|
||
|
|
fontSize: 18,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data: this.syryData4,
|
||
|
|
formatter: (name) => {
|
||
|
|
if (this.syryData4.length) {
|
||
|
|
const item = this.syryData4.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 },
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: "Nightingale Chart",
|
||
|
|
type: "pie",
|
||
|
|
radius: [30, 130],
|
||
|
|
center: ["50%", "50%"],
|
||
|
|
roseType: "area",
|
||
|
|
itemStyle: {
|
||
|
|
borderRadius: 0,
|
||
|
|
},
|
||
|
|
top: 20,
|
||
|
|
left: -40,
|
||
|
|
label: {
|
||
|
|
position: "inside",
|
||
|
|
formatter: "{d}%",
|
||
|
|
textStyle: {
|
||
|
|
color: "#ffffff",
|
||
|
|
fontSize: 12,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data: this.syryData4,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
this.myChart4.setOption(option);
|
||
|
|
window.addEventListener("resize", () => this.myChart4.resize());
|
||
|
|
},
|
||
|
|
syryDataCharts5() {
|
||
|
|
let div = document.getElementById("syryChart5");
|
||
|
|
this.myChart5 = echarts.init(div);
|
||
|
|
var option = {
|
||
|
|
color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
|
||
|
|
legend: {
|
||
|
|
type: "scroll",
|
||
|
|
orient: "vertical",
|
||
|
|
top: 20,
|
||
|
|
left: 10,
|
||
|
|
icon: "rect",
|
||
|
|
itemHeight: 14,
|
||
|
|
itemWidth: 14,
|
||
|
|
textStyle: {
|
||
|
|
color: "#ffffff",
|
||
|
|
rich: {
|
||
|
|
name: {
|
||
|
|
width: 80,
|
||
|
|
fontSize: 12,
|
||
|
|
color: "#dddee7",
|
||
|
|
},
|
||
|
|
value: {
|
||
|
|
width: 30,
|
||
|
|
align: "right",
|
||
|
|
fontSize: 18,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data: this.syryData5,
|
||
|
|
formatter: (name) => {
|
||
|
|
if (this.syryData5.length) {
|
||
|
|
const item = this.syryData5.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 },
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: "Nightingale Chart",
|
||
|
|
type: "pie",
|
||
|
|
radius: [30, 130],
|
||
|
|
center: ["50%", "50%"],
|
||
|
|
roseType: "area",
|
||
|
|
itemStyle: {
|
||
|
|
borderRadius: 0,
|
||
|
|
},
|
||
|
|
top: 20,
|
||
|
|
left: -40,
|
||
|
|
label: {
|
||
|
|
position: "inside",
|
||
|
|
formatter: "{d}%",
|
||
|
|
textStyle: {
|
||
|
|
color: "#ffffff",
|
||
|
|
fontSize: 12,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data: this.syryData5,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
this.myChart5.setOption(option);
|
||
|
|
window.addEventListener("resize", () => this.myChart5.resize());
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style
|
||
|
|
lang="scss"
|
||
|
|
src="@/assets/scss/dataBoard/renfang/index.scss"
|
||
|
|
scoped
|
||
|
|
></style>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.dibaorenyuan {
|
||
|
|
padding: 0px 240px;
|
||
|
|
}
|
||
|
|
#syryChart3 {
|
||
|
|
.echarts-legend {
|
||
|
|
white-space: normal;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
:v-deep #syryChart3 {
|
||
|
|
.echarts-legend span {
|
||
|
|
padding: 5px 0;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|