完成人才盘点人口特征的接口请求、数据格式转换以及可视化
yzw
parent
d3b28b21bd
commit
9fac67d465
|
|
@ -14,4 +14,12 @@ export function getPersonTag(params) {
|
|||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function getReviewPopulation(params) {
|
||||
return request({
|
||||
url: '/person/review/population',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
{"上海": "上海市", "云南": "云南省", "内蒙古": "内蒙古自治区", "北京": "北京市", "台湾": "台湾省", "吉林": "吉林省", "四川": "四川省", "天津": "天津市", "宁夏": "宁夏回族自治区", "安徽": "安徽省", "山东": "山东省", "山西": "山西省", "广东": "广东省", "广西": "广西壮族自治区", "新疆": "新疆维吾尔自治区", "江苏": "江苏省", "江西": "江西省", "河北": "河北省", "河南": "河南省", "浙江": "浙江省", "海南": "海南省", "湖北": "湖北省", "湖南": "湖南省", "澳门": "澳门特别行政区", "甘肃": "甘肃省", "福建": "福建省", "西藏": "西藏自治区", "贵州": "贵州省", "辽宁": "辽宁省", "重庆": "重庆市", "陕西": "陕西省", "青海": "青海省", "香港": "香港特别行政区", "黑龙江": "黑龙江省"}
|
||||
|
|
@ -1,8 +1,5 @@
|
|||
<template>
|
||||
|
||||
<div id="full_page">
|
||||
|
||||
|
||||
<div class="section">
|
||||
<div class="slide">
|
||||
<h3>恩施卷烟厂人才盘点</h3>
|
||||
|
|
@ -58,17 +55,17 @@
|
|||
</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>
|
||||
|
||||
|
||||
<div class="section">
|
||||
<h3>第三屏</h3>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section">
|
||||
<h3>第四屏</h3>
|
||||
<p>这是最后一屏</p>
|
||||
|
|
@ -81,42 +78,22 @@ import "@/assets/css/jquery.fullPage.css";
|
|||
import "@/assets/js/jquery.fullPage.min.js";
|
||||
|
||||
import * as echarts from "echarts";
|
||||
import * as personApi from "@/api/person";
|
||||
export default {
|
||||
name: "",
|
||||
data() {
|
||||
return {
|
||||
genderData: [
|
||||
{ value: 588, name: "男" },
|
||||
{ value: 177, name: "女" },
|
||||
{ name: "男", value: 0 },
|
||||
{ name: "女", value: 0 },
|
||||
],
|
||||
ageData: {
|
||||
xAxis: [
|
||||
"21~25",
|
||||
"26~30",
|
||||
"31~35",
|
||||
"36~40",
|
||||
"41~45",
|
||||
"46~50",
|
||||
"51~55",
|
||||
"56~60",
|
||||
"61~65",
|
||||
],
|
||||
yAxis: [58, 170, 39, 23, 68, 109, 180, 116, 2],
|
||||
xAxis: [],
|
||||
yAxis: [],
|
||||
},
|
||||
nationData: [
|
||||
{ value: 423, name: "汉族" },
|
||||
{ value: 265, name: "土家族" },
|
||||
{ value: 62, name: "苗族" },
|
||||
{ value: 2, name: "白族" },
|
||||
{ value: 2, name: "回族" },
|
||||
{ value: 2, name: "满族" },
|
||||
{ value: 2, name: "畲族" },
|
||||
{ value: 2, name: "侗族" },
|
||||
{ value: 2, name: "蒙古族" },
|
||||
{ value: 1, name: "藏族" },
|
||||
{ value: 1, name: "瑶族" },
|
||||
{ value: 1, name: "壮族" },
|
||||
],
|
||||
nationData: [],
|
||||
provinceData: null
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -146,23 +123,99 @@ export default {
|
|||
return (manNum / womanNum).toFixed(1);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
$(function () {
|
||||
$("#full_page").fullpage({
|
||||
sectionsColor: ["#1bbc9b", "#4BBFC3", "#7BAABE", "#f90"],
|
||||
navigation: true,
|
||||
navigationTooltips: ["人口", "二", "三", "四"],
|
||||
// navigation: true,
|
||||
// navigationTooltips: ["人口", "二", "三", "四"],
|
||||
slidesNavigation: true,
|
||||
slidesNavPosition: null,
|
||||
loopHorizontal: false,
|
||||
});
|
||||
});
|
||||
this.showGenderPie();
|
||||
this.showAgeBar();
|
||||
this.showNationPie();
|
||||
|
||||
// 请求数据
|
||||
personApi.getReviewPopulation().then(
|
||||
(res) => {
|
||||
let resData = res.data;
|
||||
// 数据格式转换
|
||||
// 性别
|
||||
let tempArr = [];
|
||||
let genderData = resData["性别"];
|
||||
for (let key in genderData) {
|
||||
tempArr.push({ name: key, value: genderData[key] });
|
||||
}
|
||||
this.genderData = tempArr;
|
||||
this.showGenderPie();
|
||||
|
||||
// 年龄
|
||||
let ageData = resData["年龄"];
|
||||
tempArr = [];
|
||||
for (let key in ageData) {
|
||||
tempArr.push({ name: key, value: ageData[key] });
|
||||
}
|
||||
// 调整顺序
|
||||
function sortAgeRecord(x, y) {
|
||||
return x.name.localeCompare(y.name);
|
||||
}
|
||||
tempArr.sort(sortAgeRecord);
|
||||
let thisYear = new Date().getFullYear();
|
||||
let yearName = `${String(thisYear)[2]}0后`;
|
||||
let index = -1;
|
||||
for (let i in tempArr) {
|
||||
let record = tempArr[i];
|
||||
if (record.name > yearName) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (index > 0) {
|
||||
let tailArr = tempArr.splice(index);
|
||||
tailArr.push(...tempArr);
|
||||
tempArr = tailArr;
|
||||
}
|
||||
let [xAxis, yAxis] = [[], []];
|
||||
for (let record of tempArr) {
|
||||
xAxis.push(record.name);
|
||||
yAxis.push(record.value);
|
||||
}
|
||||
this.ageData.xAxis = xAxis;
|
||||
this.ageData.yAxis = yAxis;
|
||||
this.showAgeBar();
|
||||
|
||||
// 民族
|
||||
let nationData = resData["民族"];
|
||||
tempArr = [];
|
||||
for (let key in nationData) {
|
||||
tempArr.push({ name: key, value: nationData[key] });
|
||||
}
|
||||
function sortNationRecord(x, y) {
|
||||
return y.value - x.value;
|
||||
}
|
||||
tempArr.sort(sortNationRecord);
|
||||
this.nationData = tempArr;
|
||||
this.showNationPie();
|
||||
|
||||
// 地域
|
||||
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]})
|
||||
}
|
||||
this.provinceData = tempArr
|
||||
this.showRegionPic()
|
||||
|
||||
},
|
||||
(err) => {
|
||||
console.log("err: ", err);
|
||||
}
|
||||
);
|
||||
|
||||
},
|
||||
methods: {
|
||||
showGenderPie() {
|
||||
|
|
@ -266,6 +319,44 @@ export default {
|
|||
|
||||
option && myChart.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: "恩施卷烟厂员工籍贯分布",
|
||||
x: "center",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 1000,
|
||||
text: ["高", "低"],
|
||||
realtime: false,
|
||||
calculable: true,
|
||||
inRange: {
|
||||
color: ["lightskyblue", "yellow", "orangered"],
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "员工地域分布",
|
||||
type: "map",
|
||||
map: "中国",
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
data: this.provinceData,
|
||||
},
|
||||
],
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -308,8 +399,6 @@ export default {
|
|||
.sbody-right > p {
|
||||
margin-right: 10%;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue