diff --git a/src/views/person/person_review.vue b/src/views/person/person_review.vue index bfbd67c..9243921 100644 --- a/src/views/person/person_review.vue +++ b/src/views/person/person_review.vue @@ -45,19 +45,19 @@
@@ -126,10 +175,12 @@ import "@/assets/js/jquery.fullPage.min.js"; import * as echarts from "echarts"; import * as personApi from "@/api/person"; +import { options } from "runjs"; export default { name: "PersonReview", data() { return { + // 人口特征 genderData: [], ageData: {}, nationData: [], @@ -141,6 +192,18 @@ export default { nationChart: null, regionChart: null, regionCityChart: null, + + // 教育 + fullEduData: [], + workEduData: {}, + degreeData: [], + fullSchoolData: {}, + workSchoolData: {}, + schoolCategory: ["211", "985"], + + fullEduChart: null, + workEduChart: null, + degreeChart: null, }; }, computed: { @@ -176,7 +239,6 @@ export default { return (manNum / womanNum).toFixed(1); }, }, - created() {}, mounted() { $(() => { $("#full_page").fullpage({ @@ -206,6 +268,20 @@ export default { // 地域 不播放动画 // this.showRegionPic() } + } else if (origin == 2) { + // 教育特征 + if (destination == 1) { + // 学历 + this.showFullEduPie(); + } else if (destination == 2) { + // 学位 + this.showDegreeBar(); + } else if (destination == 3) { + // 专业 + } else if (destination == 4) { + // 学校 + this.showFullSchoolPie(); + } } }, }); @@ -222,6 +298,16 @@ export default { this.regionChart = echarts.init(chartDom); chartDom = document.getElementById("pic_region_city"); this.regionCityChart = echarts.init(chartDom); + chartDom = document.getElementById("pic_full_edu"); + this.fullEduChart = echarts.init(chartDom); + chartDom = document.getElementById("pic_work_edu"); + this.workEduChart = echarts.init(chartDom); + chartDom = document.getElementById("pic_degree"); + this.degreeChart = echarts.init(chartDom); + chartDom = document.getElementById("pic_full_school"); + this.fullSchoolChart = echarts.init(chartDom); + chartDom = document.getElementById("pic_work_school"); + this.workSchoolChart = echarts.init(chartDom); // 请求人口数据 personApi.getReviewPopulation().then( @@ -321,23 +407,91 @@ export default { console.log("err: ", err); } ); - + // 请求教育数据 personApi.getReviewEducation().then( (res) => { - console.log(res) + let resData = res.data; + // 数据格式转换 + // 全日制学历 + let fullEduData = resData["全日制学历"]; + let tempArr = []; + let nameOrder = ["初中", "中专", "高中", "大专", "大学", "研究生"]; + for (let name of nameOrder) { + tempArr.push({ name: name, value: fullEduData[name] }); + } + this.fullEduData = tempArr; + // 在职学历 + let workEduData = resData["在职学历"]; + tempArr = []; + nameOrder = ["中专", "高中", "大专", "大学", "研究生"]; + for (let name of nameOrder) { + tempArr.push(workEduData[name]); + } + this.workEduData["xAxis"] = nameOrder; + this.workEduData["yAxis"] = tempArr; + // 学位 + tempArr = []; + let tempObj = { 类别: "全日制" }; + Object.assign(tempObj, resData["全日制学位"]); + tempArr.push(tempObj); + tempObj = { 类别: "在职" }; + Object.assign(tempObj, resData["在职学位"]); + tempArr.push(tempObj); + this.degreeData = tempArr; + // 学校 + function sortSchoolRecord(x, y) { + return y.value - x.value; + } + // 全日制学校 + tempArr = []; + let fullSchoolData = resData["全日制学校"]; + let schoolPersonData = fullSchoolData["人数"]; + for (let school in schoolPersonData) { + tempArr.push({ name: school, value: schoolPersonData[school] }); + } + tempArr.sort(sortSchoolRecord); + 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.fullSchoolData["人数"] = tempArr2; + // 级别 + tempArr = []; + for (let key of this.schoolCategory) { + tempArr.push(fullSchoolData["级别"][key]); + } + this.fullSchoolData["级别"] = tempArr; + // 在职学校 + tempArr = []; + let workSchoolData = resData["在职学校"]; + schoolPersonData = workSchoolData["人数"]; + for (let school in schoolPersonData) { + tempArr.push({ name: school, value: schoolPersonData[school] }); + } + tempArr.sort(sortSchoolRecord); + tempArr2 = tempArr.slice(0, 10); + restSum = tempArr.slice(10).reduce((sum, e) => { + return sum + Number(e.value || 0); + }, 0); + tempArr2.push({ name: "其他", value: restSum }); + this.workSchoolData["人数"] = tempArr2; + // 级别 + tempArr = []; + for (let key of this.schoolCategory) { + tempArr.push(workSchoolData["级别"][key]); + } + this.workSchoolData["级别"] = tempArr; }, (err) => { - console.log('err', err) + console.log("err", err); } - ) - - + ); }, methods: { showGenderPie() { - let option; - option = { + let option = { title: { text: "恩施卷烟厂员工性别分布饼图", // subtext: "", @@ -498,9 +652,204 @@ export default { }; option && this.regionCityChart.setOption(option); }, - handleTabClick(tab, event) { + handleRegionTabClick(tab, event) { if (tab.label == "城市") { - setTimeout(this.showRegionCityPie, 0) + setTimeout(this.showRegionCityPie, 10); + } + }, + showFullEduPie() { + let option = { + title: { + text: "恩施卷烟厂员工全日制学历分布饼图", + // subtext: "", + left: "center", + }, + tooltip: { + trigger: "item", + }, + legend: { + orient: "vertical", + left: "left", + }, + series: [ + { + // name: "Access From", + type: "pie", + radius: "50%", + data: this.fullEduData, + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: "rgba(0, 0, 0, 0.5)", + }, + }, + }, + ], + }; + this.fullEduChart.setOption(option); + }, + showWorkEduBar() { + let option = { + title: { + text: "恩施卷烟厂员工在职学历分布直方图", + left: "center", + }, + tooltip: { + trigger: "item", + }, + xAxis: { + type: "category", + data: this.workEduData.xAxis, + }, + yAxis: { + type: "value", + }, + series: [ + { + data: this.workEduData.yAxis, + type: "bar", + }, + ], + }; + this.workEduChart.setOption(option); + }, + showDegreeBar() { + let option = { + title: { + text: "恩施卷烟厂员工学位分布直方图", + }, + legend: { + orient: "vertical", + left: "right", + }, + tooltip: {}, + dataset: { + dimensions: ["类别", "学士", "硕士", "博士"], + source: this.degreeData, + }, + xAxis: { type: "category" }, + yAxis: {}, + series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }], + }; + this.degreeChart.setOption(option); + }, + handleEduTabClick(tab, event) { + if (tab.label == "在职") { + setTimeout(this.showWorkEduBar, 10); + } + }, + showFullSchoolPie() { + let option = { + grid: [ + { + x: "70%", + y: "20%", + width: "30%", + height: "60%", + }, + ], + xAxis: [ + { + gridIndex: 0, + type: "category", + data: this.schoolCategory, + }, + ], + yAxis: [ + { + gridIndex: 0, + }, + ], + title: [ + { + text: "全日制教育学校分布饼图", + x: "20%", + y: "3%", + }, + { + text: "全日制教育学校分类饼图", + x: "75%", + y: "3%", + }, + ], + tooltip: {}, + legend: { + x: "center", + y: "bottom", + }, + series: [ + { + type: "pie", + radius: "50%", + center: ["30%", "50%"], + data: this.fullSchoolData["人数"], + }, + { + type: "bar", + data: this.fullSchoolData["级别"], + }, + ], + }; + this.fullSchoolChart.setOption(option); + }, + showWorkSchoolPie() { + let option = { + grid: [ + { + x: "70%", + y: "20%", + width: "30%", + height: "60%", + }, + ], + xAxis: [ + { + gridIndex: 0, + type: "category", + data: this.schoolCategory, + }, + ], + yAxis: [ + { + gridIndex: 0, + }, + ], + title: [ + { + text: "在职教育学校分布饼图", + x: "20%", + y: "3%", + }, + { + text: "在职教育学校分类饼图", + x: "75%", + y: "3%", + }, + ], + tooltip: {}, + legend: { + x: "center", + y: "bottom", + }, + series: [ + { + type: "pie", + radius: "50%", + center: ["30%", "50%"], + data: this.workSchoolData["人数"], + }, + { + type: "bar", + data: this.workSchoolData["级别"], + }, + ], + }; + this.workSchoolChart.setOption(option); + }, + handleSchoolTabClick(tab, event) { + if (tab.label == "在职") { + setTimeout(this.showWorkSchoolPie, 10); } }, }, @@ -519,7 +868,7 @@ export default { margin: -10% auto 40px; } -.region-title { +.tab-title { margin: -8% auto 20px; } @@ -534,6 +883,11 @@ export default { flex: 1; } +.sbody-left2 { + flex: 2; + /* background-color: rgb(96, 52, 219); */ +} + .sbody-right { /* background-color: rgb(70, 211, 52); */ flex: 1; @@ -544,6 +898,10 @@ export default { margin-right: 5%; } +.tab-card2 { + margin-left: 15%; +} + .pic { height: 600px; width: 600px; @@ -552,7 +910,13 @@ export default { /* border: 1px #ddd solid; */ } -.pic-region { +.pic2 { + height: 600px; + width: 900px; + background-color: #fff; +} + +.tab-pic { margin: 0px auto; } @@ -561,6 +925,10 @@ export default { text-align: left; font-size: 30px; } + +.p2 { + margin-left: 20px; +}