更新

src/api/population/population.js

@@ -2,9 +2,9 @@ import request from '@/utils/request'
 
 
 //获取近5年结婚离婚走势
-export const getMarryPerYear = data => {
+export const getFivesYearMarriageLine = data => {
     return request({
-        url: 'portal/admin/stats/getMarryPerYear',
+        url: 'portal/admin/stats/getFivesYearMarriageLine',
         method: 'POST',
         data
     })

src/views/population/population.vue

@@ -25,28 +25,35 @@
                 <div class="imgBox"></div>
                 <div>
                   <div class="marriedNum">结婚总数(对)</div>
-                  <div class="yellowNum">{{marriageStatistics.marryNum}}</div>
+                  <div class="yellowNum">{{ marriageStatistics.marryNum }}</div>
                 </div>
               </div>
               <div class="flexBox">
                 <div class="imgBox"></div>
                 <div>
                   <div class="marriedNum">申请离婚(对)</div>
-                  <div class="yellowNum">{{marriageStatistics.inDivorceNum}}</div>
+                  <div class="yellowNum">
+                    {{ marriageStatistics.inDivorceNum }}
+                  </div>
                 </div>
               </div>
               <div class="flexBox">
                 <div class="imgBox"></div>
                 <div>
                   <div class="marriedNum">成功离婚(对)</div>
-                  <div class="yellowNum">{{marriageStatistics.divorceNum}}</div>
+                  <div class="yellowNum">
+                    {{ marriageStatistics.divorceNum }}
+                  </div>
                 </div>
               </div>
               <div class="flexBox">
                 <div class="imgBox"></div>
                 <div>
                   <div class="marriedNum">跨地区结婚/离婚</div>
-                  <div class="yellowNum">{{marriageStatistics.crossMarryNum}} / {{marriageStatistics.crossDivorceNum}}</div>
+                  <div class="yellowNum">
+                    {{ marriageStatistics.crossMarryNum }} /
+                    {{ marriageStatistics.crossDivorceNum }}
+                  </div>
                 </div>
               </div>
             </div>
@@ -124,7 +131,11 @@
 
 <script>
 import * as echarts from "echarts";
-import { getMarryPerYear,getMarriageStats,getDemographicsLineData } from "@/api/population/population";
+import {
+  getFivesYearMarriageLine,
+  getMarriageStats,
+  getDemographicsLineData,
+} from "@/api/population/population";
 export default {
   data() {
     return {
@@ -143,39 +154,42 @@ export default {
         },
       ],
       value: "",
-      marriageMovements:[],
-      marriageStatistics:{},
+      marriageMovements: [],
+      marriageStatistics: {},
     };
   },
   created() {
-    this.getMarryPerYearFun()
-    this.getMarriageStatsFun()
-    this.getDemographicsLineDataFun()
+    this.getFivesYearMarriageLineFun();
+    this.getMarriageStatsFun();
+    this.getDemographicsLineDataFun();
   },
   methods: {
-    getMarryPerYearFun(){
-      getMarryPerYear({ areaCode: 450000000000 }).then(res =>{
-        console.log(res,'获取近5年结婚离婚走势')
-        this.marriageMovements = res.data
-      })
+    getFivesYearMarriageLineFun() {
+      getFivesYearMarriageLine({ areaCode: 450000000000 }).then((res) => {
+        console.log(res, "获取近5年结婚离婚走势");
+        this.marriageMovements = res.data.admin;
+        this.married(res.data.admin);
+        this.divorce(res.data.admin);
+      });
     },
 
-    getMarriageStatsFun(){
-      getMarriageStats({}).then(res =>{
-        console.log(res,'获取结婚离婚人数')
-        this.marriageStatistics = res.data
-      })
+    getMarriageStatsFun() {
+      getMarriageStats({}).then((res) => {
+        console.log(res, "获取结婚离婚人数");
+        this.marriageStatistics = res.data;
+      });
     },
 
-    getDemographicsLineDataFun(){
-      getDemographicsLineData().then(res =>{
-        console.log(res,'获取人口统计走势图')
-        this.demographicNum = res.data
-      })
+    getDemographicsLineDataFun() {
+      getDemographicsLineData().then((res) => {
+        console.log(res, "获取人口统计走势图");
+        this.demographicNum = res.data;
+      });
     },
 
     // 结婚
-    married() {
+    married(data) {
+      console.log(data, "======================  ");
       var chartDom = document.getElementById("married");
       var myChart = echarts.init(chartDom, "dark");
       var option;
@@ -187,16 +201,22 @@ export default {
           left: "3%",
           text: "近五年结婚走向",
         },
+        grid: {
+          left: "4%",
+          right: "1%",
+          bottom: "3%",
+          containLabel: true,
+        },
         xAxis: {
           type: "category",
-          data: this.marriageMovements.iaLineData.dateList,
+          data: data.iaLineData.dateList,
         },
         yAxis: {
           type: "value",
         },
         series: [
           {
-            data: this.marriageMovements.iaLineData.amountList,
+            data: data.iaLineData.amountList,
             type: "line",
           },
         ],
@@ -206,7 +226,8 @@ export default {
     },
 
     // 离婚
-    divorce() {
+    divorce(data) {
+      console.log(data, "======================  ");
       var chartDom = document.getElementById("divorce");
       var myChart = echarts.init(chartDom, "dark");
       var option;
@@ -218,16 +239,22 @@ export default {
           left: "3%",
           text: "近五年离婚走向",
         },
+        grid: {
+          left: "4%",
+          right: "1%",
+          bottom: "3%",
+          containLabel: true,
+        },
         xAxis: {
           type: "category",
-          data: this.marriageMovements.ibLineData.dateList,
+          data: data.ibLineData.dateList,
         },
         yAxis: {
           type: "value",
         },
         series: [
           {
-            data: this.marriageMovements.ibLineData.amountList,
+            data: data.ibLineData.amountList,
             type: "line",
           },
         ],
@@ -486,8 +513,7 @@ export default {
 
   mounted() {
     setTimeout(() => {
-      this.married();
-      this.divorce();
+      this.getFivesYearMarriageLineFun();
       this.socialAssistance();
       this.childWelfare();
       this.funeral();
@@ -502,6 +528,7 @@ export default {
   width: 100%;
   height: 1120px;
   background-color: #0b0f4e;
+  padding: 10px 20px 0 20px;
 }
 
 .top {
@@ -606,7 +633,8 @@ export default {
 }
 
 .marriageStatistics {
+  width: 100%;
   height: 300px;
-  border: 2px solid red;
+  background-color: #071453;
 }
 </style>>