完成人才盘点-人口特征的展示，以及教育界面的接口数据获取
yzw
parent
9fac67d465
commit
0e9e3e1b55
|
|
@ -22,4 +22,12 @@ export function getReviewPopulation(params) {
|
|||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function getReviewEducation(params) {
|
||||
return request({
|
||||
url: '/person/review/education',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
|
@ -3,11 +3,11 @@
|
|||
<div class="section">
|
||||
<div class="slide">
|
||||
<h3>恩施卷烟厂人才盘点</h3>
|
||||
<p>人口特征统计</p>
|
||||
<p>员工人口特征统计</p>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="section-title">性别特征</div>
|
||||
<div class="section-title">员工性别统计</div>
|
||||
<div class="section-body">
|
||||
<div class="sbody-left">
|
||||
<div id="pic_gender" class="pic"></div>
|
||||
|
|
@ -20,46 +20,93 @@
|
|||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="section-title">年龄特征</div>
|
||||
<div class="section-title">员工年龄统计</div>
|
||||
<div class="section-body">
|
||||
<div class="sbody-left">
|
||||
<div id="pic_age" class="pic"></div>
|
||||
</div>
|
||||
<div class="sbody-right">
|
||||
<p>哈哈哈哈哈哈哈哈哈</p>
|
||||
<p>员工中90后最多，达249人，占比32.4%，</p>
|
||||
<p>00后最少，仅4人。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="section-title">民族特征</div>
|
||||
<div class="section-title">员工民族统计</div>
|
||||
<div class="section-body">
|
||||
<div class="sbody-left">
|
||||
<div id="pic_nation" class="pic"></div>
|
||||
</div>
|
||||
<div class="sbody-right">
|
||||
<p>哈哈哈哈哈哈哈哈哈</p>
|
||||
<p>员工中汉族人数最多，其次是土家族以及苗族。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="section-title">地域特征</div>
|
||||
<div class="section-title region-title">员工地域统计</div>
|
||||
<div class="section-body">
|
||||
<div class="sbody-left">
|
||||
<div id="pic_region" class="pic"></div>
|
||||
<el-tabs
|
||||
type="border-card"
|
||||
class="tab-card"
|
||||
@tab-click="handleTabClick"
|
||||
>
|
||||
<el-tab-pane label="省份"
|
||||
><div id="pic_region" class="pic pic-region"></div
|
||||
></el-tab-pane>
|
||||
<el-tab-pane label="城市"
|
||||
><div id="pic_region_city" class="pic pic-region"></div
|
||||
></el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<div class="sbody-right">
|
||||
<p>哈哈哈哈哈哈哈哈哈</p>
|
||||
<p>按省份划分，来自湖北省的员工占绝大多数。</p>
|
||||
<p>按城市划分，来自利川的员工最多，其次是来凤以及恩施。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="slide"><h3>第二屏的第一屏</h3></div>
|
||||
<div class="slide"><h3>第二屏的第二屏</h3></div>
|
||||
<div class="slide"><h3>第二屏的第三屏</h3></div>
|
||||
<div class="slide">
|
||||
<h3>员工教育特征统计</h3>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="section-title">员工学历统计</div>
|
||||
<div class="section-body">
|
||||
<div class="sbody-left"></div>
|
||||
<div class="sbody-right">
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="section-title">员工学位统计</div>
|
||||
<div class="section-body">
|
||||
<div class="sbody-left"></div>
|
||||
<div class="sbody-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="section-title">员工专业统计</div>
|
||||
<div class="section-body">
|
||||
<div class="sbody-left"></div>
|
||||
<div class="sbody-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="section-title">员工学校统计</div>
|
||||
<div class="section-body">
|
||||
<div class="sbody-left"></div>
|
||||
<div class="sbody-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
|
|
@ -80,30 +127,37 @@ import "@/assets/js/jquery.fullPage.min.js";
|
|||
import * as echarts from "echarts";
|
||||
import * as personApi from "@/api/person";
|
||||
export default {
|
||||
name: "",
|
||||
name: "PersonReview",
|
||||
data() {
|
||||
return {
|
||||
genderData: [
|
||||
{ name: "男", value: 0 },
|
||||
{ name: "女", value: 0 },
|
||||
],
|
||||
ageData: {
|
||||
xAxis: [],
|
||||
yAxis: [],
|
||||
},
|
||||
genderData: [],
|
||||
ageData: {},
|
||||
nationData: [],
|
||||
provinceData: null
|
||||
provinceData: [],
|
||||
cityData: [],
|
||||
|
||||
genderChart: null,
|
||||
ageChart: null,
|
||||
nationChart: null,
|
||||
regionChart: null,
|
||||
regionCityChart: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
totalPersonNum() {
|
||||
if (!this.genderData) {
|
||||
return 0;
|
||||
}
|
||||
let total = this.genderData.reduce((sum, e) => {
|
||||
return sum + Number(e.value || 0);
|
||||
}, 0);
|
||||
return total;
|
||||
},
|
||||
personRate() {
|
||||
if (!this.genderData) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
let manNum = 1;
|
||||
let manIndex = this.genderData.findIndex((item, index) => {
|
||||
return item.name == "男";
|
||||
|
|
@ -119,13 +173,12 @@ export default {
|
|||
if (womanIndex > -1) {
|
||||
womanNum = this.genderData[womanIndex].value;
|
||||
}
|
||||
|
||||
return (manNum / womanNum).toFixed(1);
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
$(function () {
|
||||
$(() => {
|
||||
$("#full_page").fullpage({
|
||||
sectionsColor: ["#1bbc9b", "#4BBFC3", "#7BAABE", "#f90"],
|
||||
// navigation: true,
|
||||
|
|
@ -133,10 +186,44 @@ export default {
|
|||
slidesNavigation: true,
|
||||
slidesNavPosition: null,
|
||||
loopHorizontal: false,
|
||||
afterLoad: function (origin, destination, direction, trigger) {
|
||||
// console.log('origin', origin)
|
||||
// console.log('destination', destination)
|
||||
},
|
||||
afterSlideLoad: (section, origin, destination, direction, trigger) => {
|
||||
if (origin == 1) {
|
||||
// 人口特征
|
||||
if (destination == 1) {
|
||||
// 性别
|
||||
this.showGenderPie();
|
||||
} else if (destination == 2) {
|
||||
// 年龄
|
||||
this.showAgeBar();
|
||||
} else if (destination == 3) {
|
||||
// 民族
|
||||
this.showNationPie();
|
||||
} else if (destination == 4) {
|
||||
// 地域 不播放动画
|
||||
// this.showRegionPic()
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// 请求数据
|
||||
// 初始化echarts
|
||||
let chartDom = document.getElementById("pic_gender");
|
||||
this.genderChart = echarts.init(chartDom);
|
||||
chartDom = document.getElementById("pic_age");
|
||||
this.ageChart = echarts.init(chartDom);
|
||||
chartDom = document.getElementById("pic_nation");
|
||||
this.nationChart = echarts.init(chartDom);
|
||||
chartDom = document.getElementById("pic_region");
|
||||
this.regionChart = echarts.init(chartDom);
|
||||
chartDom = document.getElementById("pic_region_city");
|
||||
this.regionCityChart = echarts.init(chartDom);
|
||||
|
||||
// 请求人口数据
|
||||
personApi.getReviewPopulation().then(
|
||||
(res) => {
|
||||
let resData = res.data;
|
||||
|
|
@ -148,7 +235,7 @@ export default {
|
|||
tempArr.push({ name: key, value: genderData[key] });
|
||||
}
|
||||
this.genderData = tempArr;
|
||||
this.showGenderPie();
|
||||
// this.showGenderPie();
|
||||
|
||||
// 年龄
|
||||
let ageData = resData["年龄"];
|
||||
|
|
@ -181,9 +268,9 @@ export default {
|
|||
xAxis.push(record.name);
|
||||
yAxis.push(record.value);
|
||||
}
|
||||
this.ageData.xAxis = xAxis;
|
||||
this.ageData.yAxis = yAxis;
|
||||
this.showAgeBar();
|
||||
this.ageData["xAxis"] = xAxis;
|
||||
this.ageData["yAxis"] = yAxis;
|
||||
// this.showAgeBar();
|
||||
|
||||
// 民族
|
||||
let nationData = resData["民族"];
|
||||
|
|
@ -196,33 +283,60 @@ export default {
|
|||
}
|
||||
tempArr.sort(sortNationRecord);
|
||||
this.nationData = tempArr;
|
||||
this.showNationPie();
|
||||
// this.showNationPie();
|
||||
|
||||
// 地域
|
||||
let provinceNameMap = require("@/assets/json/province_name_map.json")
|
||||
let regionData = resData["地域"]
|
||||
let provinceData = regionData["省份"], cityData = regionData["城市"]
|
||||
tempArr = []
|
||||
let provinceNameMap = require("@/assets/json/province_name_map.json");
|
||||
let regionData = resData["地域"];
|
||||
let provinceData = regionData["省份"],
|
||||
cityData = regionData["城市"];
|
||||
// 省份
|
||||
tempArr = [];
|
||||
for (let key in provinceData) {
|
||||
let pName = provinceNameMap[key]
|
||||
tempArr.push({name: pName, value: provinceData[key]})
|
||||
let pName = provinceNameMap[key];
|
||||
tempArr.push({ name: pName, value: provinceData[key] });
|
||||
}
|
||||
this.provinceData = tempArr
|
||||
this.showRegionPic()
|
||||
|
||||
this.provinceData = tempArr;
|
||||
// 直接绘制
|
||||
this.showRegionPic();
|
||||
// 城市
|
||||
tempArr = [];
|
||||
for (let key in cityData) {
|
||||
tempArr.push({ name: key, value: cityData[key] });
|
||||
}
|
||||
function sortCityRecord(x, y) {
|
||||
return y.value - x.value;
|
||||
}
|
||||
tempArr.sort(sortCityRecord);
|
||||
// 取前10名单独为项，剩下求和
|
||||
let tempArr2 = tempArr.slice(0, 10);
|
||||
let restSum = tempArr.slice(10).reduce((sum, e) => {
|
||||
return sum + Number(e.value || 0);
|
||||
}, 0);
|
||||
tempArr2.push({ name: "其他", value: restSum });
|
||||
this.cityData = tempArr2;
|
||||
// this.showRegionCityPie();
|
||||
},
|
||||
(err) => {
|
||||
console.log("err: ", err);
|
||||
}
|
||||
);
|
||||
|
||||
// 请求教育数据
|
||||
personApi.getReviewEducation().then(
|
||||
(res) => {
|
||||
console.log(res)
|
||||
},
|
||||
(err) => {
|
||||
console.log('err', err)
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
showGenderPie() {
|
||||
let chartDom = document.getElementById("pic_gender");
|
||||
let myChart = echarts.init(chartDom);
|
||||
let option;
|
||||
|
||||
option = {
|
||||
title: {
|
||||
text: "恩施卷烟厂员工性别分布饼图",
|
||||
|
|
@ -252,19 +366,18 @@ export default {
|
|||
},
|
||||
],
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
option && this.genderChart.setOption(option);
|
||||
},
|
||||
showAgeBar() {
|
||||
let chartDom = document.getElementById("pic_age");
|
||||
let myChart = echarts.init(chartDom);
|
||||
let option;
|
||||
|
||||
option = {
|
||||
title: {
|
||||
text: "恩施卷烟厂员工年龄分布直方图",
|
||||
left: "center",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.ageData.xAxis,
|
||||
|
|
@ -280,13 +393,10 @@ export default {
|
|||
],
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
option && this.ageChart.setOption(option);
|
||||
},
|
||||
showNationPie() {
|
||||
let chartDom = document.getElementById("pic_nation");
|
||||
let myChart = echarts.init(chartDom);
|
||||
let option;
|
||||
|
||||
option = {
|
||||
title: {
|
||||
text: "恩施卷烟厂员工民族分布饼图",
|
||||
|
|
@ -317,17 +427,15 @@ export default {
|
|||
],
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
option && this.nationChart.setOption(option);
|
||||
},
|
||||
showRegionPic() {
|
||||
let chartDom = document.getElementById("pic_region");
|
||||
let myChart = echarts.init(chartDom);
|
||||
let mapJson = require("@/assets/json/china.json");
|
||||
echarts.registerMap("中国", mapJson);
|
||||
|
||||
let option = {
|
||||
title: {
|
||||
text: "恩施卷烟厂员工籍贯分布",
|
||||
text: "恩施卷烟厂员工籍贯省份分布",
|
||||
x: "center",
|
||||
},
|
||||
tooltip: {
|
||||
|
|
@ -355,7 +463,45 @@ export default {
|
|||
},
|
||||
],
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
option && this.regionChart.setOption(option);
|
||||
},
|
||||
showRegionCityPie() {
|
||||
let option;
|
||||
option = {
|
||||
title: {
|
||||
text: "恩施卷烟厂员工籍贯城市分布饼图",
|
||||
// subtext: "",
|
||||
left: "center",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
left: "left",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// name: "Access From",
|
||||
type: "pie",
|
||||
radius: "50%",
|
||||
data: this.cityData,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
option && this.regionCityChart.setOption(option);
|
||||
},
|
||||
handleTabClick(tab, event) {
|
||||
if (tab.label == "城市") {
|
||||
setTimeout(this.showRegionCityPie, 0)
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -373,6 +519,10 @@ export default {
|
|||
margin: -10% auto 40px;
|
||||
}
|
||||
|
||||
.region-title {
|
||||
margin: -8% auto 20px;
|
||||
}
|
||||
|
||||
.section-body {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
@ -389,15 +539,27 @@ export default {
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
.tab-card {
|
||||
margin-left: 20%;
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
.pic {
|
||||
height: 600px;
|
||||
width: 600px;
|
||||
margin-left: 30%;
|
||||
margin-left: 20%;
|
||||
background-color: #fff;
|
||||
/* border: 1px #ddd solid; */
|
||||
}
|
||||
|
||||
.pic-region {
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
.sbody-right > p {
|
||||
margin-right: 10%;
|
||||
text-align: left;
|
||||
font-size: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue