完成人才盘点-人口特征的展示，以及教育界面的接口数据获取

src/api/person.js

@@ -23,3 +23,11 @@ export function getReviewPopulation(params) {
     params
   })
 }
+
+export function getReviewEducation(params) {
+  return request({
+    url: '/person/review/education',
+    method: 'get',
+    params
+  })
+}

src/views/person/person_review.vue

@@ -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">
-      <div class="slide"><h3>第二屏的第二屏</h3></div>
+        <h3>员工教育特征统计</h3>
-      <div class="slide"><h3>第二屏的第三屏</h3></div>
+      </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: [
+      genderData: [],
-        { name: "男", value: 0 },
+      ageData: {},
-        { name: "女", value: 0 },
-      ],
-      ageData: {
-        xAxis: [],
-        yAxis: [],
-      },
       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["xAxis"] = xAxis;
-        this.ageData.yAxis = yAxis;
+        this.ageData["yAxis"] = yAxis;
-        this.showAgeBar();
+        // 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 provinceNameMap = require("@/assets/json/province_name_map.json");
-        let regionData = resData["地域"]
+        let regionData = resData["地域"];
-        let provinceData = regionData["省份"], cityData = regionData["城市"]
+        let provinceData = regionData["省份"],
-        tempArr = []
+          cityData = regionData["城市"];
+        // 省份
+        tempArr = [];
         for (let key in provinceData) {
-          let pName = provinceNameMap[key]
+          let pName = provinceNameMap[key];
-          tempArr.push({name: pName, value: provinceData[key]})
+          tempArr.push({ name: pName, value: provinceData[key] });
         }
-        this.provinceData = tempArr
+        this.provinceData = tempArr;
-        this.showRegionPic()
+        // 直接绘制
-
+        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 && this.genderChart.setOption(option);
-      option && myChart.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>