完成人才盘点人口特征的接口请求、数据格式转换以及可视化

src/api/person.js

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

src/assets/json/province_name_map.json

@@ -0,0 +1 @@
+{"上海": "上海市", "云南": "云南省", "内蒙古": "内蒙古自治区", "北京": "北京市", "台湾": "台湾省", "吉林": "吉林省", "四川": "四川省", "天津": "天津市", "宁夏": "宁夏回族自治区", "安徽": "安徽省", "山东": "山东省", "山西": "山西省", "广东": "广东省", "广西": "广西壮族自治区", "新疆": "新疆维吾尔自治区", "江苏": "江苏省", "江西": "江西省", "河北": "河北省", "河南": "河南省", "浙江": "浙江省", "海南": "海南省", "湖北": "湖北省", "湖南": "湖南省", "澳门": "澳门特别行政区", "甘肃": "甘肃省", "福建": "福建省", "西藏": "西藏自治区", "贵州": "贵州省", "辽宁": "辽宁省", "重庆": "重庆市", "陕西": "陕西省", "青海": "青海省", "香港": "香港特别行政区", "黑龙江": "黑龙江省"}

src/views/person/person_review.vue

@@ -1,8 +1,5 @@
 <template>
-
   <div id="full_page">
-    
-    
     <div class="section">
       <div class="slide">
         <h3>恩施卷烟厂人才盘点</h3>
@@ -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: "男" },
+        { name: "男", value: 0 },
-        { value: 177, name: "女" },
+        { name: "女", value: 0 },
       ],
       ageData: {
-        xAxis: [
+        xAxis: [],
-          "21~25",
+        yAxis: [],
-          "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],
       },
-      nationData: [
+      nationData: [],
-        { value: 423, name: "汉族" },
+      provinceData: null
-        { 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: "壮族" },
-      ],
     };
   },
   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,
+        // navigation: true,
-        navigationTooltips: ["人口", "二", "三", "四"],
+        // navigationTooltips: ["人口", "二", "三", "四"],
         slidesNavigation: true,
         slidesNavPosition: null,
         loopHorizontal: false,
       });
     });
+
+    // 请求数据
+    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>