diff --git a/src/api/person.js b/src/api/person.js index a90afa4..64b2a3d 100644 --- a/src/api/person.js +++ b/src/api/person.js @@ -22,4 +22,12 @@ export function getReviewPopulation(params) { method: 'get', params }) +} + +export function getReviewEducation(params) { + return request({ + url: '/person/review/education', + method: 'get', + params + }) } \ No newline at end of file diff --git a/src/views/person/person_review.vue b/src/views/person/person_review.vue index a0df18c..bfbd67c 100644 --- a/src/views/person/person_review.vue +++ b/src/views/person/person_review.vue @@ -3,11 +3,11 @@

恩施卷烟厂人才盘点

-

人口特征统计

+

员工人口特征统计

-
性别特征
+
员工性别统计
@@ -20,46 +20,93 @@
-
年龄特征
+
员工年龄统计
-

哈哈哈哈哈哈哈哈哈

+

员工中90后最多，达249人，占比32.4%，

+

00后最少，仅4人。

-
民族特征
+
员工民族统计
-

哈哈哈哈哈哈哈哈哈

+

员工中汉族人数最多，其次是土家族以及苗族。

-
地域特征
+
员工地域统计
-
+ +
+
+
-

哈哈哈哈哈哈哈哈哈

+

按省份划分，来自湖北省的员工占绝大多数。

+

按城市划分，来自利川的员工最多，其次是来凤以及恩施。

-

第二屏的第一屏

-

第二屏的第二屏

-

第二屏的第三屏

+
+

员工教育特征统计

+
+ +
+
员工学历统计
+
+
+
+

+
+
+
+ +
+
员工学位统计
+
+
+
+
+
+ +
+
员工专业统计
+
+
+
+
+
+ +
+
员工学校统计
+
+
+
+
+
@@ -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; }