SHA1
--- a/shuzhixiangzheng/config/index.js
+++ b/shuzhixiangzheng/config/index.js
@@ -11,13 +11,13 @@ module.exports = {
 
				     assetsSubDirectory: 'static',
			
 
				     assetsPublicPath: '/',
			
 
				     proxyTable: {
			
 
				-      '/api': {  //使用"/api"来代替"http://f.apiplus.c" 
			
 
				-        target: 'http://101.132.109.234:8099/', //源地址 
			
 
				-        changeOrigin: true, //改变源 
			
 
				-        pathRewrite: { 
			
 
				-          '^/api': 'http://101.132.109.234:8099/' //路径重写 
			
 
				-          } 
			
 
				-      } 
			
 
				+      // '/api': {  //使用"/api"来代替"http://f.apiplus.c" 
			
 
				+      //   target: 'http://101.132.109.234:8099/', //源地址 
			
 
				+      //   changeOrigin: true, //改变源 
			
 
				+      //   pathRewrite: { 
			
 
				+      //     '^/api': 'http://101.132.109.234:8099/' //路径重写 
			
 
				+      //     } 
			
 
				+      // } 
			
 
				     },
			
 
				 
			
 
				     // Various Dev Server settings
			
@@ -52,7 +52,6 @@ module.exports = {
 
				     assetsRoot: path.resolve(__dirname, '../dist'),
			
 
				     assetsSubDirectory: 'static',
			
 
				     assetsPublicPath: './',
			
 
				-
			
 
				     /**
			
 
				      * Source Maps
			
 
				      */
			
--- a/shuzhixiangzheng/index.html
+++ b/shuzhixiangzheng/index.html
@@ -8,7 +8,9 @@
 
				       @import url(./static/Cesium/Widgets/widgets.css);
			
 
				  
			
 
				     </style>
			
 
				+     <script src="./static/config.js"></script>
			
 
				     <script src="./static/Cesium/Cesium.js"></script>
			
 
				+   
			
 
				   </head>
			
 
				   <body>
			
 
				     <div id="app"></div>
			
--- a/shuzhixiangzheng/jiangxi_shuangzhongzheng.zip
+++ b/shuzhixiangzheng/jiangxi_shuangzhongzheng.zip
--- a/shuzhixiangzheng/package-lock.json
+++ b/shuzhixiangzheng/package-lock.json
@@ -2505,6 +2505,11 @@
 
				         }
			
 
				       }
			
 
				     },
			
 
				+    "claygl": {
			
 
				+      "version": "1.3.0",
			
 
				+      "resolved": "https://registry.npmjs.org/claygl/-/claygl-1.3.0.tgz",
			
 
				+      "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
			
 
				+    },
			
 
				     "clean-css": {
			
 
				       "version": "4.2.4",
			
 
				       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz",
			
@@ -4467,6 +4472,23 @@
 
				         "safer-buffer": "^2.1.0"
			
 
				       }
			
 
				     },
			
 
				+    "echarts": {
			
 
				+      "version": "4.9.0",
			
 
				+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
			
 
				+      "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
			
 
				+      "requires": {
			
 
				+        "zrender": "4.3.2"
			
 
				+      }
			
 
				+    },
			
 
				+    "echarts-gl": {
			
 
				+      "version": "1.1.2",
			
 
				+      "resolved": "https://registry.npmjs.org/echarts-gl/-/echarts-gl-1.1.2.tgz",
			
 
				+      "integrity": "sha512-EVGx9RS2eMzaCgAMJSDCeLId4g8oFCFn78Fdh+0xIXASiZw/gPnJqr1vQgnQhmXhiUKixkIhIzfdc//qrct/Hg==",
			
 
				+      "requires": {
			
 
				+        "claygl": "^1.2.1",
			
 
				+        "zrender": "^4.0.4"
			
 
				+      }
			
 
				+    },
			
 
				     "editorconfig": {
			
 
				       "version": "0.15.3",
			
 
				       "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
			
@@ -14339,6 +14361,11 @@
 
				       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
			
 
				       "dev": true
			
 
				     },
			
 
				+    "vuex": {
			
 
				+      "version": "3.6.2",
			
 
				+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
			
 
				+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw=="
			
 
				+    },
			
 
				     "w3c-hr-time": {
			
 
				       "version": "1.0.2",
			
 
				       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
			
@@ -15885,6 +15912,11 @@
 
				         "buffer-crc32": "~0.2.3",
			
 
				         "fd-slicer": "~1.1.0"
			
 
				       }
			
 
				+    },
			
 
				+    "zrender": {
			
 
				+      "version": "4.3.2",
			
 
				+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
			
 
				+      "integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
			
 
				     }
			
 
				   }
			
 
				 }
			
--- a/shuzhixiangzheng/package.json
+++ b/shuzhixiangzheng/package.json
@@ -14,9 +14,12 @@
 
				   },
			
 
				   "dependencies": {
			
 
				     "axios": "^0.25.0",
			
 
				+    "echarts": "^4.9.0",
			
 
				+    "echarts-gl": "^1.1.2",
			
 
				     "element-ui": "^2.15.6",
			
 
				     "vue": "^2.5.2",
			
 
				-    "vue-router": "^3.0.1"
			
 
				+    "vue-router": "^3.0.1",
			
 
				+    "vuex": "^3.6.2"
			
 
				   },
			
 
				   "devDependencies": {
			
 
				     "autoprefixer": "^7.1.2",
			
--- a/shuzhixiangzheng/src/App.vue
+++ b/shuzhixiangzheng/src/App.vue
@@ -7,10 +7,22 @@
 
				 <script>
			
 
				 import './assets/base.css'
			
 
				    import Map from "./assets/api/Map.js"
			
 
				+   import {SZZSY_httpGet,SZZSQSY_httpGet,SZZXQ_httpGet} from "./assets/api/loadData.js"
			
 
				 export default {
			
 
				   name: 'container',
			
 
				   mounted(){
			
 
				     window.cesiumMap=new Map();
			
 
				+    SZZSY_httpGet(result=>{
			
 
				+        this.$store.commit('setSzdata',result.data);   
			
 
				+      },reuslt=>{})
			
 
				+    SZZSQSY_httpGet("大中社区",result=>{
			
 
				+      console.log("大中社区",result);
			
 
				+      this.$store.commit('setDaZhongdata',result.data); 
			
 
				+    },result=>{})
			
 
				+    SZZXQ_httpGet("金湖国际",result=>{
			
 
				+      this.$store.commit('setJinghuguoji',result.data);
			
 
				+      // console.log("金湖国际",result);
			
 
				+    },result=>{})
			
 
				     },
			
 
				 }
			
 
				 </script>
			
--- a/shuzhixiangzheng/src/assets/api/charts.js
+++ b/shuzhixiangzheng/src/assets/api/charts.js
@@ -0,0 +1,113 @@
 
				+/**
			
 
				+ * 首页 参保情况环状图
			
 
				+ * @param {*} value1    占比数量值
			
 
				+ * @param {*} value2    总值
			
 
				+ * @param {*} value3    占比数量值
			
 
				+ * @param {*} value4    总值
			
 
				+ * @returns 
			
 
				+ */
			
 
				+export function chart_canbao(value1,value2,value3,value4) {
			
 
				+  return  {
			
 
				+    // tooltip: {
			
 
				+    //   trigger: 'item'
			
 
				+    // },
			
 
				+    // legend: {
			
 
				+    //    // name:"22",
			
 
				+    //     orient: 'vertical',
			
 
				+    //    // right: 10,
			
 
				+    //     top: 'center',
			
 
				+    //     //data:["111"]
			
 
				+    //     // x: '35%',
			
 
				+    //     // top:'27%',
			
 
				+    //    //  itemHeight: 10,//图例的高度
			
 
				+    //     // itemGap:1,//图例之间的间距
			
 
				+    //      data:['医保参保','\n','社保参保']
			
 
				+    // },
			
 
				+    series: [{
			
 
				+        name: 'Access From',
			
 
				+        type: 'pie',
			
 
				+        radius: ['75%', '80%'],
			
 
				+        avoidLabelOverlap: false,
			
 
				+        label: {
			
 
				+          show: false,
			
 
				+          formatter: '{c}%',
			
 
				+          position: 'center'
			
 
				+        },
			
 
				+        // emphasis: {
			
 
				+        //   label: {
			
 
				+        //     show: true,
			
 
				+        //     fontSize: '10',
			
 
				+        //     fontWeight: 'bold'
			
 
				+        //   }
			
 
				+        // },
			
 
				+        labelLine: {
			
 
				+          show: true
			
 
				+        },
			
 
				+        data: [
			
 
				+          {
			
 
				+              name:"医保参保",
			
 
				+            value: value1,
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                color: 'rgb(55,180,164)'
			
 
				+              }
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            // name:"2",
			
 
				+            value: value2,
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                color: 'transparent'
			
 
				+              }
			
 
				+            }
			
 
				+          }
			
 
				+        ]
			
 
				+      },
			
 
				+      {
			
 
				+        name: 'Access From',
			
 
				+        type: 'pie',
			
 
				+        radius: ['63%', '68%'],
			
 
				+        avoidLabelOverlap: false,
			
 
				+        label: {
			
 
				+          show: false,
			
 
				+          position:'center',
			
 
				+          formatter: '{c}%',
			
 
				+        },
			
 
				+        labelLayout:{
			
 
				+          y:"10%"
			
 
				+        },
			
 
				+        // emphasis: {
			
 
				+        //   label: {
			
 
				+        //     show: true,
			
 
				+        //     fontSize: '10',
			
 
				+        //     fontWeight: 'bold'
			
 
				+        //   }
			
 
				+        // },
			
 
				+        labelLine: {
			
 
				+          show: false
			
 
				+        },
			
 
				+        data: [{
			
 
				+            name:"社保参保",
			
 
				+            value: value3,
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                color: 'rgb(250,205,38)'
			
 
				+              }
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            value: value4,
			
 
				+            itemStyle: {
			
 
				+              normal: {
			
 
				+                color: 'transparent'
			
 
				+              }
			
 
				+            }
			
 
				+          }
			
 
				+        ]
			
 
				+      }
			
 
				+    ]
			
 
				+  };
			
 
				+}
			
 
				+
			
 
				+
			
--- a/shuzhixiangzheng/src/assets/api/loadData.js
+++ b/shuzhixiangzheng/src/assets/api/loadData.js
@@ -1,8 +1,7 @@
 
				 import axios  from "axios";
			
 
				-import { SZZ_URL } from "./urls";
			
 
				-const base_url="http://101.132.109.234:8099/"
			
 
				+import { SZZ_URL,SZZSY_URL,SZZSQSY_URL,SZZXQ_URL } from "./urls";
			
 
				 export function httpGet(url,param,sucessFun,errorFun){
			
 
				-    axios.get("/api"+url,{       // 还可以直接把参数拼接在url后边
			
 
				+    axios.get(BASE_URL+url,{       // 还可以直接把参数拼接在url后边
			
 
				         params:param
			
 
				     }).then(function(res){
			
 
				         sucessFun(res)
			
@@ -10,13 +9,21 @@ export function httpGet(url,param,sucessFun,errorFun){
 
				         errorFun(error)
			
 
				     });
			
 
				 }
			
 
				-
			
 
				+//金湖国际
			
 
				 export function jinghuguoji_httpGet(param,sucessFun,errorFun){
			
 
				-    axios.get("/api"+SZZ_URL,{       // 还可以直接把参数拼接在url后边
			
 
				-        params:param
			
 
				-    }).then(function(res){
			
 
				-        sucessFun(res)
			
 
				-    }).catch(function (error) {
			
 
				-        errorFun(error)
			
 
				-    });
			
 
				+    httpGet(SZZ_URL,param,sucessFun,errorFun)
			
 
				+}
			
 
				+//双钟镇首页概况
			
 
				+export function SZZSY_httpGet(sucessFun,errorFun){
			
 
				+    httpGet(SZZSY_URL,null,sucessFun,errorFun)
			
 
				+}
			
 
				+//双钟镇社区首页概况
			
 
				+//community 社区名字
			
 
				+export function SZZSQSY_httpGet(param,sucessFun,errorFun){
			
 
				+    httpGet(SZZSQSY_URL,{community:param},sucessFun,errorFun)
			
 
				+}
			
 
				+//双钟镇小区概况
			
 
				+//village 小区名字
			
 
				+export function SZZXQ_httpGet(param,sucessFun,errorFun){
			
 
				+    httpGet(SZZXQ_URL,{village :param},sucessFun,errorFun)
			
 
				 }
			
--- a/shuzhixiangzheng/src/assets/api/urls.js
+++ b/shuzhixiangzheng/src/assets/api/urls.js
@@ -1,2 +1,11 @@
 
				 //双钟镇楼幢用户信息
			
 
				-export const SZZ_URL="api/screen/findByRoomNumber";
			
 
				+export const SZZ_URL="api/screen/findByRoomNumber";
			
 
				+
			
 
				+//双钟镇首页概况
			
 
				+export const SZZSY_URL="api/screen/shuangzhongzhen/index";
			
 
				+
			
 
				+//双钟镇社区首页概况
			
 
				+export const SZZSQSY_URL="api/screen/shuangzhongzhen/community/index";
			
 
				+
			
 
				+//双钟镇小区概况
			
 
				+export const SZZXQ_URL="api/screen/shuangzhongzhen/village/index";
			
--- a/shuzhixiangzheng/src/assets/png/1.png
+++ b/shuzhixiangzheng/src/assets/png/1.png
--- a/shuzhixiangzheng/src/assets/png/2.png
+++ b/shuzhixiangzheng/src/assets/png/2.png
--- a/shuzhixiangzheng/src/assets/png/3.png
+++ b/shuzhixiangzheng/src/assets/png/3.png
--- a/shuzhixiangzheng/src/assets/png/4.png
+++ b/shuzhixiangzheng/src/assets/png/4.png
--- a/shuzhixiangzheng/src/assets/png/5.png
+++ b/shuzhixiangzheng/src/assets/png/5.png
--- a/shuzhixiangzheng/src/assets/png/6.png
+++ b/shuzhixiangzheng/src/assets/png/6.png
--- a/shuzhixiangzheng/src/assets/png/7.png
+++ b/shuzhixiangzheng/src/assets/png/7.png
--- a/shuzhixiangzheng/src/assets/png/blue.png
+++ b/shuzhixiangzheng/src/assets/png/blue.png
--- a/shuzhixiangzheng/src/assets/png/circle.png
+++ b/shuzhixiangzheng/src/assets/png/circle.png
--- a/shuzhixiangzheng/src/assets/png/dazhong.png
+++ b/shuzhixiangzheng/src/assets/png/dazhong.png
--- a/shuzhixiangzheng/src/assets/png/dizhizaihai.png
+++ b/shuzhixiangzheng/src/assets/png/dizhizaihai.png
--- a/shuzhixiangzheng/src/assets/png/first1.png
+++ b/shuzhixiangzheng/src/assets/png/first1.png
--- a/shuzhixiangzheng/src/assets/png/first2.png
+++ b/shuzhixiangzheng/src/assets/png/first2.png
--- a/shuzhixiangzheng/src/assets/png/green.png
+++ b/shuzhixiangzheng/src/assets/png/green.png
--- a/shuzhixiangzheng/src/assets/png/insured_status.png
+++ b/shuzhixiangzheng/src/assets/png/insured_status.png
--- a/shuzhixiangzheng/src/assets/png/people_status.png
+++ b/shuzhixiangzheng/src/assets/png/people_status.png
--- a/shuzhixiangzheng/src/assets/png/property.png
+++ b/shuzhixiangzheng/src/assets/png/property.png
--- a/shuzhixiangzheng/src/assets/png/registered.png
+++ b/shuzhixiangzheng/src/assets/png/registered.png
--- a/shuzhixiangzheng/src/assets/png/renkoujieguo.png
+++ b/shuzhixiangzheng/src/assets/png/renkoujieguo.png
--- a/shuzhixiangzheng/src/assets/png/ring_background.png
+++ b/shuzhixiangzheng/src/assets/png/ring_background.png
--- a/shuzhixiangzheng/src/assets/png/village.png
+++ b/shuzhixiangzheng/src/assets/png/village.png
--- a/shuzhixiangzheng/src/assets/png/xiaoqugaikuang.png
+++ b/shuzhixiangzheng/src/assets/png/xiaoqugaikuang.png
--- a/shuzhixiangzheng/src/assets/png/yellow.png
+++ b/shuzhixiangzheng/src/assets/png/yellow.png
--- a/shuzhixiangzheng/src/assets/png/yq_background.png
+++ b/shuzhixiangzheng/src/assets/png/yq_background.png
--- a/shuzhixiangzheng/src/assets/png/yq_border.png
+++ b/shuzhixiangzheng/src/assets/png/yq_border.png
--- a/shuzhixiangzheng/src/components/DaZhongPage.vue
+++ b/shuzhixiangzheng/src/components/DaZhongPage.vue
--- a/shuzhixiangzheng/src/components/MainPage.vue
+++ b/shuzhixiangzheng/src/components/MainPage.vue
@@ -6,9 +6,31 @@
 
				       <div id="time_day">2021.05.16</div> -->
			
 
				         <Time></Time>
			
 
				         <img class="img" id="img2" src="../assets/png/title.png"></img>
			
 
				-        <img class="img" id="first_img" src="../assets/png/first.png"></img>
			
 
				+        <img class="img" id="first_img" src="../assets/png/first1.png"></img>
			
 
				 
			
 
				-        <div id="click" v-on:click="to3DMap">
			
 
				+        <div id="left_div">
			
 
				+            <img class="menu" src="../assets/png/1.png"></img>
			
 
				+                <ViewPage></ViewPage>
			
 
				+            <img class="menu" id="peopleStatus" src="../assets/png/2.png"></img>
			
 
				+            <img id="person_status" src="../assets/png/people_status.png"></img>
			
 
				+                  <PersonStatusPage></PersonStatusPage>
			
 
				+            <img class="menu" id="insuredStatus" src="../assets/png/3.png"></img>
			
 
				+            <img id="insured_status" src="../assets/png/insured_status.png"></img>
			
 
				+                  <InsuredPage></InsuredPage>
			
 
				+    
			
 
				+       </div>
			
 
				+       <div id="right_div">
			
 
				+          <img class="menu" id="importantPersonStatus" src="../assets/png/4.png"></img>
			
 
				+          <KeyPopulationPage></KeyPopulationPage>
			
 
				+          <img class="menu" id="employmentSituation" src="../assets/png/5.png"></img>
			
 
				+          <EmploymentSituation></EmploymentSituation>
			
 
				+          <img class="menu" id="education" src="../assets/png/6.png"></img>
			
 
				+          <EducationPage></EducationPage>
			
 
				+          <img class="menu" id="vaccination" src="../assets/png/7.png"></img>
			
 
				+          <VaccinationPage></VaccinationPage>
			
 
				+       </div>
			
 
				+
			
 
				+        <div id="click" class="click_class" v-on:click="to3DMap">
			
 
				         </div>
			
 
				 
			
 
				         <div class="click_class" id="click_1" v-on:click="toZheji">
			
@@ -48,16 +70,36 @@
 
				 
			
 
				 <script>
			
 
				   import Time from "./Time.vue"
			
 
				+  import PersonStatusPage from "./MainPageChild/PersonStatusPage.vue"
			
 
				+  import ViewPage from "./MainPageChild/ViewPage.vue"
			
 
				+  import InsuredPage from "./MainPageChild/InsuredPage.vue"
			
 
				+  import KeyPopulationPage from "./MainPageChild/KeyPopulationPage.vue"
			
 
				+  import EmploymentSituation from "./MainPageChild/EmploymentSituation.vue"
			
 
				+  import VaccinationPage from "./MainPageChild/VaccinationPage.vue"
			
 
				+  import EducationPage from "./MainPageChild/EducationPage.vue"
			
 
				+  import {SZZSY_httpGet,SZZSQSY_httpGet,SZZXQ_httpGet} from "../assets/api/loadData.js"
			
 
				 export default {
			
 
				   name: 'MainPage',
			
 
				   components:{
			
 
				-    Time
			
 
				+    Time,
			
 
				+    PersonStatusPage,
			
 
				+    ViewPage,
			
 
				+    InsuredPage,
			
 
				+    KeyPopulationPage,
			
 
				+    EmploymentSituation,
			
 
				+    VaccinationPage,
			
 
				+    EducationPage,
			
 
				+    VaccinationPage
			
 
				   },
			
 
				   data () {
			
 
				     return {
			
 
				-      msg: '',
			
 
				+     
			
 
				+         
			
 
				     }
			
 
				   },
			
 
				+  created(){
			
 
				+  
			
 
				+  },
			
 
				   mounted(){
			
 
				     this.change();
			
 
				   },
			
@@ -67,11 +109,22 @@ export default {
 
				       let boxCollection=document.getElementsByClassName("click_class");
			
 
				       for(let i=0;i<boxCollection.length;i++){
			
 
				           boxCollection[i].addEventListener("click",(event)=>{
			
 
				-            window.name=  window.cesiumMap.addLocationName(event)   ;
			
 
				-     
			
 
				+            window.name=  window.cesiumMap.addLocationName(event) ;
			
 
				+            console.log("event",event);
			
 
				+            setTimeout(() => {
			
 
				+              this.changeData(event.view.name) ;
			
 
				+            }, 1000);
			
 
				+           
			
 
				           });
			
 
				-    }
			
 
				+      }
			
 
				+    },
			
 
				+    changeData(name){
			
 
				 
			
 
				+      SZZSQSY_httpGet(name,result=>{
			
 
				+        console.log(name,result);
			
 
				+        this.$store.commit('setDaZhongdata',result.data); 
			
 
				+        this.$store.commit('setSzdata',result.data);
			
 
				+      },result=>{})
			
 
				     },
			
 
				     to3DMap(){
			
 
				       setTimeout(()=>{
			
@@ -103,33 +156,72 @@ export default {
 
				 
			
 
				 
			
 
				 <style scoped>
			
 
				-  
			
 
				-  #time_time{
			
 
				-            z-index: 113;
			
 
				-            color: azure;
			
 
				-            position: fixed;
			
 
				-            font-size: 40px;
			
 
				-            top: 1.5%;
			
 
				-            right: 10%;
			
 
				-        }
			
 
				-        #time_week{
			
 
				-            position: fixed;
			
 
				-            width: 100px;
			
 
				-            top: 2%;
			
 
				-            right: 4%;
			
 
				-            z-index: 111;
			
 
				-            color: azure;
			
 
				-            font-size: 12px;
			
 
				-        }
			
 
				-        #time_day{
			
 
				-            position: fixed;
			
 
				-            width: 100px;
			
 
				-            top: 4%;
			
 
				-            right: 4%;
			
 
				-            z-index: 111;
			
 
				-            color: azure;
			
 
				-            font-size: 12px;
			
 
				-        }
			
 
				+  #peopleStatus{
			
 
				+    top:28%
			
 
				+  }
			
 
				+  #insuredStatus{
			
 
				+    top:75%
			
 
				+  }
			
 
				+  #importantPersonStatus{
			
 
				+    left: 10%;
			
 
				+  }
			
 
				+  #employmentSituation{
			
 
				+    top:22%
			
 
				+  }
			
 
				+  #vaccination{
			
 
				+    top:75%;
			
 
				+    width: 200px;
			
 
				+  }
			
 
				+ #education{
			
 
				+   top:45%
			
 
				+ }
			
 
				+#person_status{
			
 
				+  position: absolute;
			
 
				+  top:30%;
			
 
				+  left: 50%;
			
 
				+  width: 30%;
			
 
				+}
			
 
				+#insured_status{
			
 
				+  position: absolute;
			
 
				+  bottom:5%;
			
 
				+  left: 50%;
			
 
				+  width: 20%;
			
 
				+}
			
 
				+
			
 
				+ #right_div{
			
 
				+    position: absolute;
			
 
				+    z-index: 120;
			
 
				+    color: azure;
			
 
				+    width: 25%;
			
 
				+    height: 90%;
			
 
				+    top:10%;
			
 
				+    right: 1%;
			
 
				+    /* background-color: rgb(0,0,0,0.1); */
			
 
				+  }
			
 
				+
			
 
				+  #left_div{
			
 
				+    position: absolute;
			
 
				+    z-index: 120;
			
 
				+    color: azure;
			
 
				+    width: 25%;
			
 
				+    height: 90%;
			
 
				+    top:10%;
			
 
				+    /* background-color: rgb(0,0,0,0.1); */
			
 
				+  }
			
 
				+  .menu{
			
 
				+    position: absolute;
			
 
				+    width: 150px;
			
 
				+    left:10%
			
 
				+  }
			
 
				+
			
 
				+  .font_background_png{
			
 
				+    z-index: 119;
			
 
				+    position: absolute;
			
 
				+    top:-50%;
			
 
				+    
			
 
				+  }
			
 
				+
			
 
				+
			
 
				       #firstPage{
			
 
				           position: absolute;
			
 
				           width: 100%;
			
--- a/shuzhixiangzheng/src/components/MainPageChild/EducationPage.vue
+++ b/shuzhixiangzheng/src/components/MainPageChild/EducationPage.vue
@@ -1,36 +1,350 @@
 
				 <template>
			
 
				     <div id="educationPage">
			
 
				-      
			
 
				+        
			
 
				+      <tr id="schoolStatus">在校生情况</tr>
			
 
				+      <div id="table_head">
			
 
				+          <td id="td1">类型</td>
			
 
				+          <td id="td2">人数</td>
			
 
				+          <td id="td3">比例</td>
			
 
				+      </div>
			
 
				+      <div id="table_body">
			
 
				+        <tr id="tr_class">
			
 
				+            <td class="educate_type">学龄前</td>
			
 
				+            <td class="educate_num">{{xlq?xlq.num:0}}</td>
			
 
				+            <td class="educate_num1">{{xlq?xlq.rate:0}}%</td>
			
 
				+        </tr>
			
 
				+        <tr id="tr_class1">
			
 
				+          <td class="educate_type">小学</td>
			
 
				+          <td class="educate_num">{{xx?xx.num:0}}</td>
			
 
				+          <td class="educate_num1">{{xx?xx.rate:0}}%</td>
			
 
				+          </tr>
			
 
				+          <tr class="tr_class">
			
 
				+              <td class="educate_type">初中</td>
			
 
				+              <td class="educate_num">{{cz?cz.num:0}}</td>
			
 
				+              <td class="educate_num1">{{cz?cz.rate:0}}%</td>
			
 
				+          </tr>
			
 
				+          <tr class="tr_class">
			
 
				+              <td class="educate_type">高中</td>
			
 
				+              <td class="educate_num">{{gz?gz.num:0}}</td>
			
 
				+              <td class="educate_num1">{{gz?gz.rate:0}}%</td>
			
 
				+          </tr>
			
 
				+          <tr class="tr_class">
			
 
				+              <td class="educate_type">大学</td>
			
 
				+              <td class="educate_num">{{dx?dx.num:0}}</td>
			
 
				+              <td class="educate_num1">{{dx?dx.rate:0}}%</td>
			
 
				+          </tr>
			
 
				+          <tr class="tr_class" id="tr6">
			
 
				+              <td class="educate_type">研究生及以上</td>
			
 
				+              <td class="educate_num">{{yjs?yjs.num:0}}</td>
			
 
				+              <td class="educate_num1">{{yjs?yjs.rate:0}}%</td>
			
 
				+          </tr>
			
 
				+          <div id="back_div1">
			
 
				+        </div>
			
 
				+        <div id="back_div2">
			
 
				+        </div>
			
 
				+        <div id="back_div3">
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <tr id="educate_distribution">教育程度分布</tr>
			
 
				+      <div id="educate_chart">
			
 
				+        <ThreeDCharts></ThreeDCharts>
			
 
				+      </div>
			
 
				     </div>
			
 
				-    </template>
			
 
				-    
			
 
				-    <script>
			
 
				-     
			
 
				+</template>
			
 
				+    <script>  
			
 
				+     import ThreeDCharts from "../Utils/ThreeDCharts1.vue"
			
 
				     export default {
			
 
				       name: 'EducationPage',
			
 
				       components:{
			
 
				-        
			
 
				+        ThreeDCharts
			
 
				       },
			
 
				       data () {
			
 
				         return {
			
 
				-          msg: '',
			
 
				+            school: [
			
 
				+            {
			
 
				+                rate: 8.73,
			
 
				+                num: 2101,
			
 
				+                name: "学龄前",
			
 
				+                id: 1513
			
 
				+            },
			
 
				+            {
			
 
				+                rate: 15.79,
			
 
				+                num: 3800,
			
 
				+                name: "小学",
			
 
				+                id: 1514
			
 
				+            },
			
 
				+            {
			
 
				+                rate: 13.44,
			
 
				+                num: 3235,
			
 
				+                name: "初中",
			
 
				+                id: 1559
			
 
				+            },
			
 
				+            {
			
 
				+                rate: 29.65,
			
 
				+                num: 7136,
			
 
				+                name: "高中",
			
 
				+                id: 1515
			
 
				+            },
			
 
				+            {
			
 
				+                rate: 32.07,
			
 
				+                num: 7718,
			
 
				+                name: "大学",
			
 
				+                id: 1516
			
 
				+            },
			
 
				+            {
			
 
				+                rate: 0.32,
			
 
				+                num: 78,
			
 
				+                name: "研究生及以上",
			
 
				+                id: 1517
			
 
				+            }
			
 
				+        ],
			
 
				+        xlq:0
			
 
				+        ,xx:0,cz:0,gz:0,dx:0,yjs:0
			
 
				         }
			
 
				       },
			
 
				       mounted(){
			
 
				-        
			
 
				+         
			
 
				+        let clear= setInterval(() => {
			
 
				+          if(this.$store.getters.getSzdata.code===10000&&this.$store.getters.getSzdata.data.school) {
			
 
				+            this.school=this.$store.getters.getSzdata.data.school
			
 
				+            console.log(this.$store.getters.getSzdata.data)
			
 
				+           this.school.map(obj=>{
			
 
				+                if(obj.name=="学龄前"){
			
 
				+                        this.xlq={
			
 
				+                            num:obj.num,
			
 
				+                            rate:obj.rate
			
 
				+                        }
			
 
				+                    }else  if(obj.name=="小学"){
			
 
				+                        this.xx={
			
 
				+                            num:obj.num,
			
 
				+                            rate:obj.rate
			
 
				+                        }
			
 
				+                    }else  if(obj.name=="初中"){
			
 
				+                        this.cz={
			
 
				+                            num:obj.num,
			
 
				+                            rate:obj.rate
			
 
				+                        }
			
 
				+                    }else  if(obj.name=="高中"){
			
 
				+                        this.gz={
			
 
				+                            num:obj.num,
			
 
				+                            rate:obj.rate
			
 
				+                        }
			
 
				+                    }else  if(obj.name=="大学"){
			
 
				+                        this.dx={
			
 
				+                            num:obj.num,
			
 
				+                            rate:obj.rate
			
 
				+                        }
			
 
				+                    }else  if(obj.name=="研究生及以上"){
			
 
				+                        this.yjs={
			
 
				+                            num:obj.num,
			
 
				+                            rate:obj.rate
			
 
				+                        }
			
 
				+                    }
			
 
				+          })
			
 
				+            clearInterval(clear)
			
 
				+          }
			
 
				+        }, 500);
			
 
				+
			
 
				       },
			
 
				       methods:{
			
 
				-        
			
 
				+
			
 
				       }
			
 
				     }
			
 
				-    </script>
			
 
				+</script>
			
 
				     
			
 
				  <style scoped>
			
 
				+
			
 
				+
			
 
				+    #back_div1{
			
 
				+        position: absolute;
			
 
				+        width: 100%;
			
 
				+        height: 16%;
			
 
				+        background-color:rgb(96, 136, 206,0.2) ;
			
 
				+        top:14%;
			
 
				+    }
			
 
				+    #back_div2{
			
 
				+        position: absolute;
			
 
				+        width: 100%;
			
 
				+        height: 16%;
			
 
				+        background-color:rgb(96, 136, 206,0.2) ;
			
 
				+        top:44%;
			
 
				+    }
			
 
				+    #back_div3{
			
 
				+        position: absolute;
			
 
				+        width: 100%;
			
 
				+        height: 16%;
			
 
				+        background-color:rgb(96, 136, 206,0.2) ;
			
 
				+        top:73%;
			
 
				+    }
			
 
				+     .educate_num{
			
 
				+        position: absolute;
			
 
				+        width: 10%;
			
 
				+        left: 45%;
			
 
				+     }
			
 
				+     .educate_num1{
			
 
				+        position: absolute;
			
 
				+        width: 30%;
			
 
				+        left: 65%;
			
 
				+     }
			
 
				+     #td1{
			
 
				+        font-weight:bold;
			
 
				+        position: absolute;
			
 
				+        left:10%;
			
 
				+        top:15%
			
 
				+     }
			
 
				+     #td2{
			
 
				+        font-weight:bold;
			
 
				+        position: absolute;
			
 
				+        left:45%;
			
 
				+        top:15%
			
 
				+     }
			
 
				+     #td3{
			
 
				+        font-weight:bold;
			
 
				+        position: absolute;
			
 
				+        left:75%;
			
 
				+        top:15%
			
 
				+     }
			
 
				+     #educationPage{
			
 
				+        position: absolute;
			
 
				+        width: 100%;
			
 
				+        height: 25%;
			
 
				+        top:52%;
			
 
				+     }
			
 
				+     #schoolStatus{
			
 
				+         position: absolute;
			
 
				+         font-family: "宋体";
			
 
				+         font-weight:bold;
			
 
				+         left:18%
			
 
				+     }
			
 
				+     #table_head{
			
 
				+        position: absolute;
			
 
				+        background-color:rgb(10,98,197) ;
			
 
				+        font-size: 13px; 
			
 
				+        top:10%;
			
 
				+        width: 40%;
			
 
				+        height: 12%;
			
 
				+        left: 13%;
			
 
				+     }
			
 
				+     #table_body{
			
 
				+         position: absolute;
			
 
				+         font-size: 10px; 
			
 
				+         left:13%;
			
 
				+         top:25%;
			
 
				+         width: 40%;
			
 
				+         height: 70%;
			
 
				+         background-color: rgb(10,98,197,0.1);
			
 
				+         text-align:center;
			
 
				+         line-height:25px
			
 
				+     }
			
 
				+     #educate_distribution{
			
 
				+        position: absolute;
			
 
				+        font-family: "宋体";
			
 
				+         font-weight:bold;
			
 
				+         left:58%
			
 
				+     }
			
 
				+     #educate_chart{
			
 
				+        position: absolute;
			
 
				+        height: 100%;
			
 
				+        width: 50%;
			
 
				+        left: 55%;
			
 
				+        /* background-color: rgb(10,98,197,0.2); */
			
 
				+     }
			
 
				+
			
 
				+ @media screen and (max-height: 1000px) {
			
 
				+        #back_div1{
			
 
				+        position: absolute;
			
 
				+        width: 100%;
			
 
				+        height: 20%;
			
 
				+        background-color:rgb(96, 136, 206,0.2) ;
			
 
				+        top:16%;
			
 
				+    }
			
 
				+    #back_div2{
			
 
				+        position: absolute;
			
 
				+        width: 100%;
			
 
				+        height: 20%;
			
 
				+        background-color:rgb(96, 136, 206,0.2) ;
			
 
				+        top:49%;
			
 
				+    }
			
 
				+    #back_div3{
			
 
				+        position: absolute;
			
 
				+        width: 100%;
			
 
				+        height: 20%;
			
 
				+        background-color:rgb(96, 136, 206,0.2) ;
			
 
				+        top:85%;
			
 
				+    }
			
 
				+     .educate_num{
			
 
				+        position: absolute;
			
 
				+        width: 10%;
			
 
				+        left: 45%;
			
 
				+     }
			
 
				+     .educate_num1{
			
 
				+        position: absolute;
			
 
				+        width: 30%;
			
 
				+        left: 65%;
			
 
				+     }
			
 
				+     #td1{
			
 
				+        font-weight:bold;
			
 
				+        position: absolute;
			
 
				+        left:10%;
			
 
				+        top:15%
			
 
				+     }
			
 
				+     #td2{
			
 
				+        font-weight:bold;
			
 
				+        position: absolute;
			
 
				+        left:45%;
			
 
				+        top:15%
			
 
				+     }
			
 
				+     #td3{
			
 
				+        font-weight:bold;
			
 
				+        position: absolute;
			
 
				+        left:75%;
			
 
				+        top:15%
			
 
				+     }
			
 
				      #educationPage{
			
 
				         position: absolute;
			
 
				         width: 100%;
			
 
				+        height: 25%;
			
 
				+        top:52%;
			
 
				+     }
			
 
				+     #schoolStatus{
			
 
				+         position: absolute;
			
 
				+         font-family: "宋体";
			
 
				+         font-weight:bold;
			
 
				+         left:18%
			
 
				+     }
			
 
				+     #table_head{
			
 
				+        position: absolute;
			
 
				+        background-color:rgb(10,98,197) ;
			
 
				+        font-size: 13px; 
			
 
				+        top:10%;
			
 
				+        width: 40%;
			
 
				+        height: 12%;
			
 
				+        left: 13%;
			
 
				+     }
			
 
				+     #table_body{
			
 
				+         position: absolute;
			
 
				+         font-size: 10px; 
			
 
				+         left:13%;
			
 
				+         top:25%;
			
 
				+         width: 40%;
			
 
				+         height: 70%;
			
 
				+         background-color: rgb(10,98,197,0.1);
			
 
				+         text-align:center;
			
 
				+         line-height:25px
			
 
				+     }
			
 
				+     #educate_distribution{
			
 
				+        position: absolute;
			
 
				+        font-family: "宋体";
			
 
				+         font-weight:bold;
			
 
				+         left:58%
			
 
				+     }
			
 
				+     #educate_chart{
			
 
				+        position: absolute;
			
 
				         height: 100%;
			
 
				+        width: 50%;
			
 
				+        left: 55%;
			
 
				+        /* background-color: rgb(10,98,197,0.2); */
			
 
				      }
			
 
				- 
			
 
				-    </style>
			
 
				+  }
			
 
				+</style>
			
 
				     
			
--- a/shuzhixiangzheng/src/components/MainPageChild/EmploymentSituation.vue
+++ b/shuzhixiangzheng/src/components/MainPageChild/EmploymentSituation.vue
@@ -0,0 +1,68 @@
 
				+<template>
			
 
				+    <div id="employmentSituation">
			
 
				+        <img class="ring_background_png" src="../../assets/png/ring_background.png"></img>
			
 
				+        <div id="chart_1">
			
 
				+          <ThreeDCharts></ThreeDCharts>
			
 
				+        </div>
			
 
				+      
			
 
				+      
			
 
				+    </div>
			
 
				+</template>
			
 
				+    
			
 
				+<script>
			
 
				+     import ThreeDCharts from "../Utils/ThreeDCharts.vue"
			
 
				+    export default {
			
 
				+      name: 'EmploymentSituation',
			
 
				+      components:{
			
 
				+        ThreeDCharts
			
 
				+      },
			
 
				+      data () {
			
 
				+        return {
			
 
				+          msg: '',
			
 
				+        }
			
 
				+      },
			
 
				+      mounted(){
			
 
				+  
			
 
				+      },
			
 
				+      methods:{
			
 
				+        
			
 
				+      
			
 
				+      }
			
 
				+    }
			
 
				+</script>
			
 
				+    
			
 
				+    
			
 
				+ <style scoped>
			
 
				+   #chart_1{
			
 
				+     position: absolute;
			
 
				+     width: 100%;
			
 
				+     height: 100%;
			
 
				+     top: -70%;
			
 
				+    left: -26%
			
 
				+   }
			
 
				+
			
 
				+   @media screen and (max-height: 1000px) {
			
 
				+    #chart_1{
			
 
				+     position: absolute;
			
 
				+     width: 100%;
			
 
				+     height: 100%;
			
 
				+      top: -80%;
			
 
				+      left: -26%
			
 
				+   }
			
 
				+   }
			
 
				+
			
 
				+     #employmentSituation{
			
 
				+        position: absolute;
			
 
				+        width: 100%;
			
 
				+        height: 20%;
			
 
				+        top:28%;
			
 
				+        /* background-color: rgb(0, 0, 255,0.5); */
			
 
				+     }
			
 
				+     .ring_background_png{
			
 
				+          position: absolute; 
			
 
				+         width: 55%;
			
 
				+         left: 30%;
			
 
				+         top:10%
			
 
				+     }
			
 
				+</style>
			
 
				+    
			
--- a/shuzhixiangzheng/src/components/MainPageChild/InsuredPage.vue
+++ b/shuzhixiangzheng/src/components/MainPageChild/InsuredPage.vue
@@ -0,0 +1,134 @@
 
				+<template>
			
 
				+  <div id="insuredPage">
			
 
				+    <div id="myChart"></div>
			
 
				+    <div id="yb">{{yb[0]?yb[0].rate:0}}% {{yb[0]?yb[0].sum:0}}</div>
			
 
				+    <div id="sb">{{sb[0]?sb[0].rate:0}}% {{sb[0]?sb[0].sum:0}}</div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+  import {
			
 
				+    chart_canbao
			
 
				+  } from "../../assets/api/charts.js"
			
 
				+  export default {
			
 
				+    name: 'InsuredPage',
			
 
				+    components: {
			
 
				+
			
 
				+    },
			
 
				+    data() {
			
 
				+      return {
			
 
				+        insure: [ // -- 参保情况
			
 
				+          {
			
 
				+            rate: 99.94, //比例
			
 
				+            name: "医保参保", //类型
			
 
				+            sum: 1599 //数量
			
 
				+          },
			
 
				+          {
			
 
				+            rate: 96.5,
			
 
				+            name: "社保参保",
			
 
				+            sum: 1544
			
 
				+          }
			
 
				+        ],
			
 
				+        yb: 0,
			
 
				+        sb: 0,
			
 
				+        yb1: 0,
			
 
				+        sb1: 0
			
 
				+      }
			
 
				+    },
			
 
				+    mounted() {
			
 
				+      this.chart();
			
 
				+    },
			
 
				+    methods: {
			
 
				+      chart() {
			
 
				+        let clear = setInterval(() => {
			
 
				+          if (this.$store.getters.getSzdata.code === 10000) {
			
 
				+            this.insure = this.$store.getters.getSzdata.data.insure
			
 
				+            this.yb = this.insure.filter(result => result.name == "医保参保");
			
 
				+            this.sb = this.insure.filter(result => result.name == "社保参保");
			
 
				+            let myChart = this.$echarts.init(document.getElementById('myChart'));
			
 
				+            myChart.setOption(chart_canbao(this.sb[0].rate, 0, this.yb[0].rate, 0));
			
 
				+            clearInterval(clear)
			
 
				+          }
			
 
				+        }, 500);
			
 
				+
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+
			
 
				+<style scoped>
			
 
				+  #yb {
			
 
				+    position: absolute;
			
 
				+    width: 15%;
			
 
				+    height: 15%;
			
 
				+    top: 35%;
			
 
				+    left: 13%;
			
 
				+    font-size: 12px;
			
 
				+    color: rgb(250, 207, 44);
			
 
				+    font-weight: bold;
			
 
				+    
			
 
				+  }
			
 
				+
			
 
				+  #sb {
			
 
				+    position: absolute;
			
 
				+    width: 15%;
			
 
				+    height: 15%;
			
 
				+    top: 53%;
			
 
				+    left: 13%;
			
 
				+    font-size: 12px;
			
 
				+    color: rgb(55, 180, 164);
			
 
				+    font-weight: bold;
			
 
				+ 
			
 
				+  }
			
 
				+
			
 
				+  #insuredPage {
			
 
				+    position: absolute;
			
 
				+    width: 100%;
			
 
				+    height: 18%;
			
 
				+    bottom: 1%;
			
 
				+
			
 
				+  }
			
 
				+
			
 
				+  #myChart {
			
 
				+    position: absolute;
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    left: -30%;
			
 
				+    /* background-color: rgb(0, 0, 255,0.3); */
			
 
				+  }
			
 
				+
			
 
				+  @media screen and (max-height: 1000px) {
			
 
				+    #yb {
			
 
				+      position: absolute;
			
 
				+      width: 20%;
			
 
				+      height: 15%;
			
 
				+      top: 40%;
			
 
				+      left: 13%;
			
 
				+      font-size: 12px;
			
 
				+      color: rgb(250, 207, 44);
			
 
				+      font-weight: bold;
			
 
				+    }
			
 
				+
			
 
				+    #sb {
			
 
				+      position: absolute;
			
 
				+      width: 20%;
			
 
				+      height: 15%;
			
 
				+      top: 60%;
			
 
				+      left: 13%;
			
 
				+      font-size: 12px;
			
 
				+      color: rgb(55, 180, 164);
			
 
				+      font-weight: bold;
			
 
				+    }
			
 
				+
			
 
				+    #insuredPage {
			
 
				+      position: absolute;
			
 
				+      width: 100%;
			
 
				+      height: 18%;
			
 
				+      bottom: 1%;
			
 
				+
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+</style>
			
--- a/shuzhixiangzheng/src/components/MainPageChild/KeyPopulationPage.vue
+++ b/shuzhixiangzheng/src/components/MainPageChild/KeyPopulationPage.vue
@@ -0,0 +1,116 @@
 
				+<template>
			
 
				+    <div id="keyPopulationPage">
			
 
				+      <tr>
			
 
				+        <td>
			
 
				+          <span id="partyMemberNum">
			
 
				+            <span class="font">党员人数</span> <br>
			
 
				+            <span class="number">{{important.member}}</span> 
			
 
				+          </span>
			
 
				+          <span id="treatmentObjectNum">
			
 
				+            <span class="font" >优抚对象</span><br>
			
 
				+            <span class="number" >{{important.specialCare}}</span> 
			
 
				+          </span>
			
 
				+          <span id="subsistenceAllowanceObjectNum">
			
 
				+            <span class="font" >低保对象</span><br>
			
 
				+            <span class="number" >{{important.basicAllowance}}</span> 
			
 
				+          </span>
			
 
				+          <span id="shakeoffPovertyNum">
			
 
				+            <span class="font" >城市脱贫解困对象</span><br>
			
 
				+            <span class="number" >{{0}}</span> 
			
 
				+          </span>
			
 
				+          <span id="disabledNum">
			
 
				+            <span class="font" >残疾人</span><br>
			
 
				+            <span class="number" >{{important.deformed}}</span> 
			
 
				+          </span>
			
 
				+          <span id="liveAloneNum">
			
 
				+            <span class="font" >独居户</span><br>
			
 
				+            <span class="number" >{{important.alone}}</span> 
			
 
				+          </span>
			
 
				+        </td>
			
 
				+       </tr>
			
 
				+    </div>
			
 
				+</template>
			
 
				+    <script>   
			
 
				+    export default {
			
 
				+      name: 'KeyPopulationPage',
			
 
				+      components:{
			
 
				+  
			
 
				+      },
			
 
				+      data () {
			
 
				+        return {
			
 
				+           important:{                        // -- 重点人群
			
 
				+            specialCare:165,            //优抚对象
			
 
				+            alone:455,            		//独居户
			
 
				+            member:927,			//党员人数
			
 
				+            basicAllowance:1336,	//低保对象
			
 
				+            deformed:1102,                 //残疾人
			
 
				+          }
			
 
				+        }
			
 
				+      },
			
 
				+      mounted(){
			
 
				+        let clear= setInterval(() => {
			
 
				+          if(this.$store.getters.getSzdata.code===10000&&this.$store.getters.getSzdata.data.important) {
			
 
				+            this.important=this.$store.getters.getSzdata.data.important
			
 
				+            clearInterval(clear)
			
 
				+          }
			
 
				+        }, 500);
			
 
				+      },
			
 
				+      methods:{
			
 
				+        
			
 
				+      
			
 
				+      }
			
 
				+    }
			
 
				+    </script>
			
 
				+    
			
 
				+    
			
 
				+    <style scoped>
			
 
				+    #keyPopulationPage{
			
 
				+        position: absolute;
			
 
				+        width: 100%;
			
 
				+        height: 40%;
			
 
				+    }
			
 
				+    .font{
			
 
				+      font-size: 10px;
			
 
				+      color: rgb( 90,166,220);
			
 
				+    }
			
 
				+  .number{
			
 
				+    font-size: 30px;
			
 
				+  }
			
 
				+  #partyMemberNum{
			
 
				+    position: absolute;
			
 
				+    font-weight:bold;
			
 
				+    left: 15%;
			
 
				+    top:15%
			
 
				+  }
			
 
				+  #treatmentObjectNum{
			
 
				+    position: absolute;
			
 
				+    font-weight:bold;
			
 
				+    left: 45%;
			
 
				+    top:15%
			
 
				+  }
			
 
				+  #subsistenceAllowanceObjectNum{
			
 
				+    position: absolute;
			
 
				+    font-weight:bold;
			
 
				+    left: 75%;
			
 
				+    top:15%
			
 
				+  }
			
 
				+  #shakeoffPovertyNum{
			
 
				+    position: absolute;
			
 
				+    font-weight:bold;
			
 
				+    left: 15%;
			
 
				+    top:35%
			
 
				+  }
			
 
				+  #disabledNum{
			
 
				+    position: absolute;
			
 
				+    font-weight:bold;
			
 
				+    left: 45%;
			
 
				+    top:35%
			
 
				+  }
			
 
				+  #liveAloneNum{
			
 
				+    position: absolute;
			
 
				+    font-weight:bold;
			
 
				+    left: 75%;
			
 
				+    top:35%
			
 
				+  }
			
 
				+    </style>
			
 
				+    
			
--- a/shuzhixiangzheng/src/components/MainPageChild/PersonStatusPage.vue
+++ b/shuzhixiangzheng/src/components/MainPageChild/PersonStatusPage.vue
@@ -0,0 +1,148 @@
 
				+<template>
			
 
				+  <div id="personStatusPage">
			
 
				+    <div class="row" v-for="(item,i) in population">
			
 
				+      <div class="num1">{{item.floatPeople}}</div>
			
 
				+      <div :id="getId(item.floatPeople)" class="progress_container0"></div>
			
 
				+      <div class="num2">{{item.name}}</div>
			
 
				+      <div class="progress_both">
			
 
				+        <div :id="getId(item.household)" class="progress_container1"></div>
			
 
				+        <div :id="getId(item.people)" class="progress_container2"></div>
			
 
				+      </div>
			
 
				+      <div class="num3">{{item.household}}/{{item.people}}</div>
			
 
				+    </div>
			
 
				+
			
 
				+
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+  export default {
			
 
				+    name: 'PersonStatusPage',
			
 
				+    components: {
			
 
				+
			
 
				+    },
			
 
				+    data() {
			
 
				+      return {
			
 
				+        population: [ // -- 人口情况
			
 
				+          {
			
 
				+            name: "大中社区", //社区名称
			
 
				+            floatPeople: 501, //流动人口
			
 
				+            household: 893, //户数
			
 
				+            people: 2200 //人数
			
 
				+          },
			
 
				+        ],
			
 
				+      }
			
 
				+    },
			
 
				+    mounted() {
			
 
				+      let clear = setInterval(() => {
			
 
				+        if (this.$store.getters.getSzdata.code === 10000) {
			
 
				+          this.population = this.$store.getters.getSzdata.data.population
			
 
				+          
			
 
				+          clearInterval(clear)
			
 
				+        }
			
 
				+      }, 500);
			
 
				+      setTimeout(() => {
			
 
				+        this.getProgress();
			
 
				+      }, 1500);
			
 
				+
			
 
				+    },
			
 
				+    methods: {
			
 
				+      getId(num) {
			
 
				+        return "id_" + num;
			
 
				+      },
			
 
				+      getProgress() {
			
 
				+        this.showProgress("progress_container0", 15)
			
 
				+        this.showProgress("progress_container1", 30)
			
 
				+        this.showProgress("progress_container2", 10)
			
 
				+      },
			
 
				+      showProgress(className, length) {
			
 
				+        let proCollection = document.getElementsByClassName(className);
			
 
				+        let arr = [];
			
 
				+        for (let i = 0; i < proCollection.length; i++) {
			
 
				+          arr.push(+proCollection[i].id.split("_")[1]);
			
 
				+        }
			
 
				+        for (let i = 0; i < proCollection.length; i++) {
			
 
				+          proCollection[i].style.width = +proCollection[i].id.split("_")[1] * length / Math.max(...arr) + "%"
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+
			
 
				+<style scoped>
			
 
				+  .font {
			
 
				+    position: absolute;
			
 
				+    font-size: 10px;
			
 
				+  }
			
 
				+
			
 
				+  .row {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    width: 100%;
			
 
				+    height: 5%;
			
 
				+  }
			
 
				+
			
 
				+  #personStatusPage {
			
 
				+    position: absolute;
			
 
				+    width: 100%;
			
 
				+    height: 43%;
			
 
				+    /* background-color: rgb(48,115,248,0.1); */
			
 
				+    top: 36%
			
 
				+  }
			
 
				+
			
 
				+  .num1 {
			
 
				+    position: absolute;
			
 
				+    width: 5%;
			
 
				+    left: 15%;
			
 
				+    font-size: 10px;
			
 
				+  }
			
 
				+
			
 
				+  .num2 {
			
 
				+    position: absolute;
			
 
				+    left: 42%;
			
 
				+    width: 10%;
			
 
				+    font-size: 10px;
			
 
				+  }
			
 
				+
			
 
				+  .num3 {
			
 
				+    position: absolute;
			
 
				+    left: 84%;
			
 
				+    width: 10%;
			
 
				+    font-size: 10px;
			
 
				+  }
			
 
				+
			
 
				+  .progress_both {
			
 
				+    left: 52%;
			
 
				+    top: 2%;
			
 
				+    /* position: absolute; */
			
 
				+    width: 30%;
			
 
				+    height: 5px;
			
 
				+  }
			
 
				+
			
 
				+  .progress_container0 {
			
 
				+    right: 62%;
			
 
				+    position: absolute;
			
 
				+    width: 15%;
			
 
				+    height: 5px;
			
 
				+    background-color: rgb(48, 115, 248);
			
 
				+  }
			
 
				+
			
 
				+  .progress_container1 {
			
 
				+    position: absolute;
			
 
				+    width: 30%;
			
 
				+    left: 52%;
			
 
				+    height: 5px;
			
 
				+    background-color: rgb(55, 179, 163);
			
 
				+  }
			
 
				+
			
 
				+  .progress_container2 {
			
 
				+    position: absolute;
			
 
				+    width: 10%;
			
 
				+    height: 5px;
			
 
				+    left: 52%;
			
 
				+    background-color: rgb(245, 199, 49);
			
 
				+  }
			
 
				+
			
 
				+</style>
			
--- a/shuzhixiangzheng/src/components/MainPageChild/VaccinationPage.vue
+++ b/shuzhixiangzheng/src/components/MainPageChild/VaccinationPage.vue
@@ -0,0 +1,171 @@
 
				+<template>
			
 
				+    <div id="vaccinationPage">
			
 
				+      <img class="yq_back_img" id="img1" src="../../assets/png/yq_background.png"></img>
			
 
				+      <img class="yq_back_img" id="img2" src="../../assets/png/yq_background.png"></img>
			
 
				+      <img class="yq_border_img" id="img3" src="../../assets/png/yq_border.png"></img>
			
 
				+      <img class="yq_border_img" id="img4" src="../../assets/png/yq_border.png"></img>
			
 
				+      <img class="yq_border_img" id="img5" src="../../assets/png/yq_border.png"></img>
			
 
				+
			
 
				+        <span id="ym_name1">疫苗接种</span>
			
 
				+        <span id="ym_num">{{vaccin.total}}</span>
			
 
				+        <span id="ym_name2">疫苗总接种率</span>
			
 
				+        <span id="ym_num1">{{vaccin.allRate}}%</span>
			
 
				+
			
 
				+        <span id="ym_name3">3-12岁疫苗接种率</span>
			
 
				+        <span id="ym_num2">{{vaccin.threeToTwelveRate}}%</span>
			
 
				+        <span id="ym_name4">12-18岁疫苗接种率</span>
			
 
				+        <span id="ym_num3">{{vaccin.TwelveToEighteenRate}}%</span>
			
 
				+        <span id="ym_name5">18岁以上疫苗接种率</span>
			
 
				+        <span id="ym_num4">{{vaccin.eighteenRate}}%</span>
			
 
				+    </div>
			
 
				+</template>
			
 
				+    
			
 
				+<script>
			
 
				+    export default {
			
 
				+      name: 'VaccinationPage',
			
 
				+      components:{
			
 
				+  
			
 
				+      },
			
 
				+      data () {
			
 
				+        return {
			
 
				+           vaccin:{				// -- 疫苗接种情况
			
 
				+            allRate:94.27,		//总接种率
			
 
				+            total:73518,			//疫苗接种总数
			
 
				+            eighteenRate:93.96,	//18岁以上接种率
			
 
				+            threeToTwelveRate:93.96, 	//3-12岁以上接种率
			
 
				+            TwelveToEighteenRate:93.44	//12-18岁以上接种率
			
 
				+           }
			
 
				+        }
			
 
				+      },
			
 
				+      mounted(){
			
 
				+        let clear= setInterval(() => {
			
 
				+          if(this.$store.getters.getSzdata.code===10000&&this.$store.getters.getSzdata.data.vaccin) {
			
 
				+            this. vaccin=this.$store.getters.getSzdata.data.vaccin
			
 
				+            clearInterval(clear)
			
 
				+          }
			
 
				+        }, 500);
			
 
				+      },
			
 
				+      methods:{
			
 
				+        
			
 
				+      
			
 
				+      }
			
 
				+    }
			
 
				+</script>
			
 
				+  
			
 
				+    <style scoped>
			
 
				+
			
 
				+      #ym_num{
			
 
				+        position: absolute;
			
 
				+        left: 21%;
			
 
				+        top:28%;  
			
 
				+        font-size: 28px;
			
 
				+        color:  rgb(251,212,21);
			
 
				+        font-weight:bold;
			
 
				+      }
			
 
				+      #ym_name1{
			
 
				+        position: absolute;
			
 
				+        left: 26%;
			
 
				+        top:16%;
			
 
				+        font-size: 12px;
			
 
				+        color:  rgb(4,185,202);
			
 
				+        font-weight:bold;
			
 
				+      }
			
 
				+
			
 
				+    #ym_name2{
			
 
				+      position: absolute;
			
 
				+        left: 62%;
			
 
				+        top:16%;
			
 
				+        font-size: 12px;
			
 
				+        color:  rgb(4,185,202);
			
 
				+        font-weight:bold;
			
 
				+    }
			
 
				+    #ym_name3{
			
 
				+      position: absolute;
			
 
				+      font-weight:bold;
			
 
				+      top:70%;
			
 
				+      left: 12%;
			
 
				+      font-size: 12px;
			
 
				+    }
			
 
				+    #ym_name4{
			
 
				+      position: absolute;
			
 
				+      font-weight:bold;
			
 
				+      top:70%;
			
 
				+      left: 39%;
			
 
				+      font-size: 12px;
			
 
				+    }
			
 
				+    #ym_name5{
			
 
				+      position: absolute;
			
 
				+      font-weight:bold;
			
 
				+      top:70%;
			
 
				+      left: 67%;
			
 
				+      font-size: 12px;
			
 
				+    }
			
 
				+      #ym_num1{
			
 
				+        position: absolute;
			
 
				+        left: 60%;
			
 
				+        top:28%;
			
 
				+        font-size: 28px;
			
 
				+        color:  rgb(251,212,21);
			
 
				+        font-weight:bold;
			
 
				+      }
			
 
				+      #ym_num2{
			
 
				+        position: absolute;
			
 
				+        left: 16%;
			
 
				+        top:78%;
			
 
				+        font-size: 20px;
			
 
				+        font-weight:bold;
			
 
				+      }
			
 
				+      #ym_num3{
			
 
				+        position: absolute;
			
 
				+        left: 43%;
			
 
				+        top:78%;
			
 
				+        font-size: 20px;
			
 
				+        font-weight:bold;
			
 
				+      }
			
 
				+      #ym_num4{
			
 
				+        position: absolute;
			
 
				+        left: 72%;
			
 
				+        top:78%;
			
 
				+        font-size: 20px;
			
 
				+        font-weight:bold;
			
 
				+      }
			
 
				+      #img1{
			
 
				+        left: 15%;
			
 
				+        top: 6%;
			
 
				+      }
			
 
				+      #img2{
			
 
				+        left: 55%;
			
 
				+        top: 6%;
			
 
				+      }
			
 
				+      #img3{
			
 
				+        left: 5%;
			
 
				+        bottom: -10%;
			
 
				+      }
			
 
				+      #img4{
			
 
				+        left: 33%;
			
 
				+        bottom: -10%;
			
 
				+      }
			
 
				+      #img5{
			
 
				+        right: 4%;
			
 
				+        bottom: -10%;
			
 
				+      }
			
 
				+      .yq_back_img{
			
 
				+        position: absolute;
			
 
				+        width: 30%;
			
 
				+        height: 50%;
			
 
				+      }
			
 
				+      .yq_border_img{
			
 
				+        position: absolute;
			
 
				+        width: 35%;
			
 
				+        height: 60%;
			
 
				+      }
			
 
				+         #vaccinationPage{
			
 
				+        position: absolute;
			
 
				+        bottom:1%;
			
 
				+        width: 100%;
			
 
				+        height: 18%;
			
 
				+        /* background-color: rgb(0, 0, 255,0.1); */
			
 
				+      }
			
 
				+    
			
 
				+    </style>
			
 
				+    
			
--- a/shuzhixiangzheng/src/components/MainPageChild/ViewPage.vue
+++ b/shuzhixiangzheng/src/components/MainPageChild/ViewPage.vue
@@ -0,0 +1,153 @@
 
				+<template>
			
 
				+    <div id="shunagzhongView">
			
 
				+        <tr>
			
 
				+            <td><img class="sign_png" src="../../assets/png/registered.png"></img></td>
			
 
				+            <td>
			
 
				+              <span id="peopleNum">
			
 
				+                <span class="font">在籍人数</span> <br>
			
 
				+                <span class="number">{{szdata?szdata.peoples:0}}</span> 
			
 
				+              </span>
			
 
				+              <span id="houseNum">
			
 
				+                <span class="font" >户数</span><br>
			
 
				+                <span class="number" >{{szdata?szdata.households:0}}</span> 
			
 
				+              </span>
			
 
				+            </td>
			
 
				+           </tr>
			
 
				+           <tr>
			
 
				+            <td><img class="sign_png1" src="../../assets/png/village.png"></img></td>
			
 
				+            <td>
			
 
				+              <span id="villageNum">
			
 
				+                <span class="font">小区数量</span> <br>
			
 
				+                <span class="number">{{szdata?szdata.villages:0}}</span> 
			
 
				+              </span>
			
 
				+              <span id="buildNum">
			
 
				+                <span class="font" >建筑数量</span><br>
			
 
				+                <span class="number" >{{szdata?szdata.buildings:0}}</span> 
			
 
				+              </span>
			
 
				+            </td>
			
 
				+           </tr>
			
 
				+           <tr>
			
 
				+            <td><img class="sign_png2" src="../../assets/png/property.png"></img></td>
			
 
				+            <td>
			
 
				+              <span id="hasPropertyNum">
			
 
				+                <span class="font">有物业小区</span> <br>
			
 
				+                <span class="number">{{szdata?szdata.villagesWithCompany:0}}</span> 
			
 
				+              </span>
			
 
				+              <span id="nohasPropertyNum">
			
 
				+                <span class="font" >无物业小区</span><br>
			
 
				+                <span class="number" >{{szdata?szdata.villagesWithoutCompany:0}}</span> 
			
 
				+              </span>
			
 
				+            </td>
			
 
				+           </tr>
			
 
				+    </div>
			
 
				+    </template>
			
 
				+    
			
 
				+    <script>
			
 
				+     
			
 
				+    export default {
			
 
				+      name: 'View',
			
 
				+      // props: ['szdata'],
			
 
				+      components:{
			
 
				+  
			
 
				+      },
			
 
				+      data () {
			
 
				+        return {
			
 
				+          szdata:{				// -- 概况
			
 
				+            peoples:77849,	//在籍人数
			
 
				+            villages:42,		//小区数量
			
 
				+            villagesWithCompany:33,	//由物业小区
			
 
				+            buildings:8049,			//建筑数量
			
 
				+            households:23653,			//户数
			
 
				+            villagesWithoutCompany:8		//无物业小区
			
 
				+        },
			
 
				+        }
			
 
				+      },
			
 
				+      mounted(){
			
 
				+        
			
 
				+      let clear= setInterval(() => {
			
 
				+        console.log(1111)
			
 
				+          if(this.$store.getters.getSzdata.code===10000&&this.$store.getters.getSzdata.data.index) {
			
 
				+            this.szdata=this.$store.getters.getSzdata.data.index
			
 
				+            console.log("this.szdata",this.szdata)
			
 
				+            clearInterval(clear)
			
 
				+          }
			
 
				+        }, 500);
			
 
				+      },
			
 
				+      methods:{
			
 
				+        
			
 
				+      }
			
 
				+    }
			
 
				+    </script>
			
 
				+    
			
 
				+    
			
 
				+ <style scoped>
			
 
				+     #shunagzhongView{
			
 
				+        position: absolute;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+        color: #ffffff;
			
 
				+     }
			
 
				+  .sign_png{
			
 
				+    position: absolute;
			
 
				+    width: 80px;
			
 
				+    left: 10%;
			
 
				+    top:5%
			
 
				+  }
			
 
				+
			
 
				+  .sign_png1{
			
 
				+    position: absolute;
			
 
				+    width: 80px;
			
 
				+    left: 10%;
			
 
				+    top:12%
			
 
				+  }
			
 
				+  .sign_png2{
			
 
				+    position: absolute;
			
 
				+    width: 80px;
			
 
				+    left: 10%;
			
 
				+    top:20%
			
 
				+  }
			
 
				+  #peopleNum{
			
 
				+    position: absolute;
			
 
				+    font-weight:bold;
			
 
				+    left: 35%;
			
 
				+    top:7%
			
 
				+  }
			
 
				+  #houseNum{
			
 
				+    position: absolute;
			
 
				+    font-weight:bold;
			
 
				+    left: 75%;
			
 
				+    top:7%
			
 
				+  }
			
 
				+  #villageNum{
			
 
				+    position: absolute;
			
 
				+    font-weight:bold;
			
 
				+    left: 35%;
			
 
				+    top:14%
			
 
				+  }
			
 
				+  #buildNum{
			
 
				+    position: absolute;
			
 
				+      font-weight:bold;
			
 
				+      left: 75%;
			
 
				+      top:14%
			
 
				+  }
			
 
				+ #hasPropertyNum{
			
 
				+  position: absolute;
			
 
				+      font-weight:bold;
			
 
				+      left: 35%;
			
 
				+      top:21%
			
 
				+ }
			
 
				+
			
 
				+#nohasPropertyNum{
			
 
				+  position: absolute;
			
 
				+      font-weight:bold;
			
 
				+      left: 75%;
			
 
				+      top:21%
			
 
				+ }
			
 
				+ .font{
			
 
				+    font-size: 10px;
			
 
				+  }
			
 
				+  .number{
			
 
				+    font-size: 30px;
			
 
				+  }
			
 
				+    </style>
			
 
				+    
			
--- a/shuzhixiangzheng/src/components/OtherChilds/Dezhizhaihai.vue
+++ b/shuzhixiangzheng/src/components/OtherChilds/Dezhizhaihai.vue
@@ -0,0 +1,39 @@
 
				+<template>
			
 
				+    <div id="dezhizhaihaiPage">
			
 
				+        <div ></div>
			
 
				+    </div>
			
 
				+  </template>
			
 
				+  
			
 
				+  <script>
			
 
				+    export default {
			
 
				+      name: 'dezhizhaihaiPage',
			
 
				+      components: {
			
 
				+      },
			
 
				+      data() {
			
 
				+        return {
			
 
				+         
			
 
				+        }
			
 
				+      },
			
 
				+      mounted() {
			
 
				+        
			
 
				+      },
			
 
				+      methods: {
			
 
				+        
			
 
				+      }
			
 
				+    }
			
 
				+  
			
 
				+  </script>
			
 
				+  
			
 
				+  
			
 
				+  <style scoped>
			
 
				+ 
			
 
				+  #dezhizhaihaiPage{
			
 
				+      position: absolute;
			
 
				+      width: 100%;
			
 
				+      height: 25%;
			
 
				+      z-index: 2;
			
 
				+      top:75%;
			
 
				+      /* background-color: rgb(0, 0, 255,0.4); */
			
 
				+  }
			
 
				+  </style>
			
 
				+  
			
--- a/shuzhixiangzheng/src/components/OtherChilds/EdcationPage_shequ.vue
+++ b/shuzhixiangzheng/src/components/OtherChilds/EdcationPage_shequ.vue
@@ -0,0 +1,352 @@
 
				+<template>
			
 
				+    <div id="educationPage">
			
 
				+        
			
 
				+      <tr id="schoolStatus">在校生情况</tr>
			
 
				+      <div id="table_head">
			
 
				+          <td id="td1">类型</td>
			
 
				+          <td id="td2">人数</td>
			
 
				+          <td id="td3">比例</td>
			
 
				+      </div>
			
 
				+      <div id="table_body">
			
 
				+        <tr id="tr_class">
			
 
				+            <td class="educate_type">学龄前</td>
			
 
				+            <td class="educate_num">{{xlq?xlq.num:0}}</td>
			
 
				+            <td class="educate_num1">{{xlq?xlq.rate:0}}%</td>
			
 
				+        </tr>
			
 
				+        <tr id="tr_class1">
			
 
				+          <td class="educate_type">小学</td>
			
 
				+          <td class="educate_num">{{xx?xx.num:0}}</td>
			
 
				+          <td class="educate_num1">{{xx?xx.rate:0}}%</td>
			
 
				+          </tr>
			
 
				+          <tr class="tr_class">
			
 
				+              <td class="educate_type">初中</td>
			
 
				+              <td class="educate_num">{{cz?cz.num:0}}</td>
			
 
				+              <td class="educate_num1">{{cz?cz.rate:0}}%</td>
			
 
				+          </tr>
			
 
				+          <tr class="tr_class">
			
 
				+              <td class="educate_type">高中</td>
			
 
				+              <td class="educate_num">{{gz?gz.num:0}}</td>
			
 
				+              <td class="educate_num1">{{gz?gz.rate:0}}%</td>
			
 
				+          </tr>
			
 
				+          <tr class="tr_class">
			
 
				+              <td class="educate_type">大学</td>
			
 
				+              <td class="educate_num">{{dx?dx.num:0}}</td>
			
 
				+              <td class="educate_num1">{{dx?dx.rate:0}}%</td>
			
 
				+          </tr>
			
 
				+          <tr class="tr_class" id="tr6">
			
 
				+              <td class="educate_type">研究生及以上</td>
			
 
				+              <td class="educate_num">{{yjs?yjs.num:0}}</td>
			
 
				+              <td class="educate_num1">{{yjs?yjs.rate:0}}%</td>
			
 
				+          </tr>
			
 
				+          <div id="back_div1">
			
 
				+        </div>
			
 
				+        <div id="back_div2">
			
 
				+        </div>
			
 
				+        <div id="back_div3">
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <tr id="educate_distribution">教育程度分布</tr>
			
 
				+      <div id="educate_chart">
			
 
				+        <ThreeDCharts></ThreeDCharts>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+</template>
			
 
				+    <script>  
			
 
				+     import ThreeDCharts from "../Utils/ThreeDCharts5.vue"
			
 
				+    export default {
			
 
				+      name: 'EducationPage',
			
 
				+      components:{
			
 
				+        ThreeDCharts
			
 
				+      },
			
 
				+      data () {
			
 
				+        return {
			
 
				+            school: [
			
 
				+            {
			
 
				+                rate: 8.73,
			
 
				+                num: 2101,
			
 
				+                name: "学龄前",
			
 
				+                id: 1513
			
 
				+            },
			
 
				+            {
			
 
				+                rate: 15.79,
			
 
				+                num: 3800,
			
 
				+                name: "小学",
			
 
				+                id: 1514
			
 
				+            },
			
 
				+            {
			
 
				+                rate: 13.44,
			
 
				+                num: 3235,
			
 
				+                name: "初中",
			
 
				+                id: 1559
			
 
				+            },
			
 
				+            {
			
 
				+                rate: 29.65,
			
 
				+                num: 7136,
			
 
				+                name: "高中",
			
 
				+                id: 1515
			
 
				+            },
			
 
				+            {
			
 
				+                rate: 32.07,
			
 
				+                num: 7718,
			
 
				+                name: "大学",
			
 
				+                id: 1516
			
 
				+            },
			
 
				+            {
			
 
				+                rate: 0.32,
			
 
				+                num: 78,
			
 
				+                name: "研究生及以上",
			
 
				+                id: 1517
			
 
				+            }
			
 
				+        ],
			
 
				+        xlq:0
			
 
				+        ,xx:0,cz:0,gz:0,dx:0,yjs:0
			
 
				+        }
			
 
				+      },
			
 
				+      mounted(){
			
 
				+         
			
 
				+        let clear= setInterval(() => {
			
 
				+          if(this.$store.getters.getSzdata.code===10000&&this.$store.getters.getSzdata.data&&this.$store.getters.getSzdata.data.school) {
			
 
				+            this.school=this.$store.getters.getSzdata.data.school
			
 
				+            console.log(this.$store.getters.getSzdata.data)
			
 
				+           this.school.map(obj=>{
			
 
				+                if(obj.name=="学龄前"){
			
 
				+                        this.xlq={
			
 
				+                            num:obj.num,
			
 
				+                            rate:obj.rate
			
 
				+                        }
			
 
				+                    }else  if(obj.name=="小学"){
			
 
				+                        this.xx={
			
 
				+                            num:obj.num,
			
 
				+                            rate:obj.rate
			
 
				+                        }
			
 
				+                    }else  if(obj.name=="初中"){
			
 
				+                        this.cz={
			
 
				+                            num:obj.num,
			
 
				+                            rate:obj.rate
			
 
				+                        }
			
 
				+                    }else  if(obj.name=="高中"){
			
 
				+                        this.gz={
			
 
				+                            num:obj.num,
			
 
				+                            rate:obj.rate
			
 
				+                        }
			
 
				+                    }else  if(obj.name=="大学"){
			
 
				+                        this.dx={
			
 
				+                            num:obj.num,
			
 
				+                            rate:obj.rate
			
 
				+                        }
			
 
				+                    }else  if(obj.name=="研究生及以上"){
			
 
				+                        this.yjs={
			
 
				+                            num:obj.num,
			
 
				+                            rate:obj.rate
			
 
				+                        }
			
 
				+                    }
			
 
				+          })
			
 
				+               
			
 
				+           
			
 
				+            clearInterval(clear)
			
 
				+          }
			
 
				+        }, 500);
			
 
				+
			
 
				+      },
			
 
				+      methods:{
			
 
				+
			
 
				+      }
			
 
				+    }
			
 
				+</script>
			
 
				+    
			
 
				+ <style scoped>
			
 
				+
			
 
				+
			
 
				+    #back_div1{
			
 
				+        position: absolute;
			
 
				+        width: 100%;
			
 
				+        height: 16%;
			
 
				+        background-color:rgb(96, 136, 206,0.2) ;
			
 
				+        top:14%;
			
 
				+    }
			
 
				+    #back_div2{
			
 
				+        position: absolute;
			
 
				+        width: 100%;
			
 
				+        height: 16%;
			
 
				+        background-color:rgb(96, 136, 206,0.2) ;
			
 
				+        top:44%;
			
 
				+    }
			
 
				+    #back_div3{
			
 
				+        position: absolute;
			
 
				+        width: 100%;
			
 
				+        height: 16%;
			
 
				+        background-color:rgb(96, 136, 206,0.2) ;
			
 
				+        top:73%;
			
 
				+    }
			
 
				+     .educate_num{
			
 
				+        position: absolute;
			
 
				+        width: 10%;
			
 
				+        left: 45%;
			
 
				+     }
			
 
				+     .educate_num1{
			
 
				+        position: absolute;
			
 
				+        width: 30%;
			
 
				+        left: 65%;
			
 
				+     }
			
 
				+     #td1{
			
 
				+        font-weight:bold;
			
 
				+        position: absolute;
			
 
				+        left:10%;
			
 
				+        top:15%
			
 
				+     }
			
 
				+     #td2{
			
 
				+        font-weight:bold;
			
 
				+        position: absolute;
			
 
				+        left:45%;
			
 
				+        top:15%
			
 
				+     }
			
 
				+     #td3{
			
 
				+        font-weight:bold;
			
 
				+        position: absolute;
			
 
				+        left:75%;
			
 
				+        top:15%
			
 
				+     }
			
 
				+     #educationPage{
			
 
				+        position: absolute;
			
 
				+        width: 100%;
			
 
				+        height: 25%;
			
 
				+        top:52%;
			
 
				+     }
			
 
				+     #schoolStatus{
			
 
				+         position: absolute;
			
 
				+         font-family: "宋体";
			
 
				+         font-weight:bold;
			
 
				+         left:18%
			
 
				+     }
			
 
				+     #table_head{
			
 
				+        position: absolute;
			
 
				+        background-color:rgb(10,98,197) ;
			
 
				+        font-size: 13px; 
			
 
				+        top:10%;
			
 
				+        width: 40%;
			
 
				+        height: 12%;
			
 
				+        left: 13%;
			
 
				+     }
			
 
				+     #table_body{
			
 
				+         position: absolute;
			
 
				+         font-size: 10px; 
			
 
				+         left:13%;
			
 
				+         top:25%;
			
 
				+         width: 40%;
			
 
				+         height: 70%;
			
 
				+         background-color: rgb(10,98,197,0.1);
			
 
				+         text-align:center;
			
 
				+         line-height:25px
			
 
				+     }
			
 
				+     #educate_distribution{
			
 
				+        position: absolute;
			
 
				+        font-family: "宋体";
			
 
				+         font-weight:bold;
			
 
				+         left:58%
			
 
				+     }
			
 
				+     #educate_chart{
			
 
				+        position: absolute;
			
 
				+        height: 100%;
			
 
				+        width: 50%;
			
 
				+        left: 55%;
			
 
				+        /* background-color: rgb(10,98,197,0.2); */
			
 
				+     }
			
 
				+
			
 
				+ @media screen and (max-height: 1000px) {
			
 
				+        #back_div1{
			
 
				+        position: absolute;
			
 
				+        width: 100%;
			
 
				+        height: 20%;
			
 
				+        background-color:rgb(96, 136, 206,0.2) ;
			
 
				+        top:16%;
			
 
				+    }
			
 
				+    #back_div2{
			
 
				+        position: absolute;
			
 
				+        width: 100%;
			
 
				+        height: 20%;
			
 
				+        background-color:rgb(96, 136, 206,0.2) ;
			
 
				+        top:49%;
			
 
				+    }
			
 
				+    #back_div3{
			
 
				+        position: absolute;
			
 
				+        width: 100%;
			
 
				+        height: 20%;
			
 
				+        background-color:rgb(96, 136, 206,0.2) ;
			
 
				+        top:85%;
			
 
				+    }
			
 
				+     .educate_num{
			
 
				+        position: absolute;
			
 
				+        width: 10%;
			
 
				+        left: 45%;
			
 
				+     }
			
 
				+     .educate_num1{
			
 
				+        position: absolute;
			
 
				+        width: 30%;
			
 
				+        left: 65%;
			
 
				+     }
			
 
				+     #td1{
			
 
				+        font-weight:bold;
			
 
				+        position: absolute;
			
 
				+        left:10%;
			
 
				+        top:15%
			
 
				+     }
			
 
				+     #td2{
			
 
				+        font-weight:bold;
			
 
				+        position: absolute;
			
 
				+        left:45%;
			
 
				+        top:15%
			
 
				+     }
			
 
				+     #td3{
			
 
				+        font-weight:bold;
			
 
				+        position: absolute;
			
 
				+        left:75%;
			
 
				+        top:15%
			
 
				+     }
			
 
				+     #educationPage{
			
 
				+        position: absolute;
			
 
				+        width: 100%;
			
 
				+        height: 25%;
			
 
				+        top:52%;
			
 
				+     }
			
 
				+     #schoolStatus{
			
 
				+         position: absolute;
			
 
				+         font-family: "宋体";
			
 
				+         font-weight:bold;
			
 
				+         left:18%
			
 
				+     }
			
 
				+     #table_head{
			
 
				+        position: absolute;
			
 
				+        background-color:rgb(10,98,197) ;
			
 
				+        font-size: 13px; 
			
 
				+        top:10%;
			
 
				+        width: 40%;
			
 
				+        height: 12%;
			
 
				+        left: 13%;
			
 
				+     }
			
 
				+     #table_body{
			
 
				+         position: absolute;
			
 
				+         font-size: 10px; 
			
 
				+         left:13%;
			
 
				+         top:25%;
			
 
				+         width: 40%;
			
 
				+         height: 70%;
			
 
				+         background-color: rgb(10,98,197,0.1);
			
 
				+         text-align:center;
			
 
				+         line-height:25px
			
 
				+     }
			
 
				+     #educate_distribution{
			
 
				+        position: absolute;
			
 
				+        font-family: "宋体";
			
 
				+         font-weight:bold;
			
 
				+         left:58%
			
 
				+     }
			
 
				+     #educate_chart{
			
 
				+        position: absolute;
			
 
				+        height: 100%;
			
 
				+        width: 50%;
			
 
				+        left: 55%;
			
 
				+        /* background-color: rgb(10,98,197,0.2); */
			
 
				+     }
			
 
				+  }
			
 
				+</style>
			
 
				+    
			
--- a/shuzhixiangzheng/src/components/OtherChilds/LeftPage.vue
+++ b/shuzhixiangzheng/src/components/OtherChilds/LeftPage.vue
@@ -0,0 +1,75 @@
 
				+<template>
			
 
				+    <div id="leftPage">
			
 
				+            <img id="dazhong_img" src="../../assets/png/dazhong.png"> </img>
			
 
				+            <div id="viewPage_f">
			
 
				+              <ViewPage></ViewPage>
			
 
				+            </div>
			
 
				+            <img id="person_status_img" src="../../assets/png/2.png"></img>
			
 
				+            <PepoleStatus></PepoleStatus>
			
 
				+            <img id="dizhizaihai_img" src="../../assets/png/dizhizaihai.png"> </img>
			
 
				+            <Dezhizhaihai></Dezhizhaihai>
			
 
				+    </div>
			
 
				+  </template>
			
 
				+  
			
 
				+  <script>
			
 
				+   import ViewPage from "../MainPageChild/ViewPage.vue"
			
 
				+  import PepoleStatus from "../OtherChilds/PepoleStatus.vue"
			
 
				+  import Dezhizhaihai from "./Dezhizhaihai.vue"
			
 
				+    export default {
			
 
				+      name: '',
			
 
				+      components: {
			
 
				+        ViewPage,
			
 
				+        PepoleStatus,
			
 
				+        Dezhizhaihai
			
 
				+      },
			
 
				+      data() {
			
 
				+        return {
			
 
				+         
			
 
				+        }
			
 
				+      },
			
 
				+      mounted() {
			
 
				+        
			
 
				+      },
			
 
				+      methods: {
			
 
				+  
			
 
				+      }
			
 
				+    }
			
 
				+  
			
 
				+  </script>
			
 
				+  
			
 
				+  
			
 
				+  <style scoped>
			
 
				+        #viewPage_f {
			
 
				+    position: absolute;
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    left: -10%;
			
 
				+  }
			
 
				+
			
 
				+   #person_status_img {
			
 
				+    position: absolute;
			
 
				+    width: 150px;
			
 
				+    top: 30%
			
 
				+  }
			
 
				+  #leftPage{
			
 
				+    position: absolute;
			
 
				+    left: 2%;
			
 
				+    top: 7%;
			
 
				+    z-index: 2;
			
 
				+    height: 90%;
			
 
				+    width: 23%;
			
 
				+    background-color: rgba(4, 11, 30, 0.6);
			
 
				+  }
			
 
				+  #dazhong_img {
			
 
				+    position: absolute;
			
 
				+    width: 200px;
			
 
				+    top: -1%
			
 
				+  }
			
 
				+
			
 
				+  #dizhizaihai_img {
			
 
				+    position: absolute;
			
 
				+    width: 200px;
			
 
				+    top: 70%
			
 
				+  }
			
 
				+  </style>
			
 
				+  
			
--- a/shuzhixiangzheng/src/components/OtherChilds/PepoleStatus.vue
+++ b/shuzhixiangzheng/src/components/OtherChilds/PepoleStatus.vue
@@ -0,0 +1,180 @@
 
				+<template>
			
 
				+  <div id="pepoleStatusPage">
			
 
				+    <img src="../../assets/png/yq_background.png" class="yq_background_img"></img>
			
 
				+    <div class="czrk_name">常住人口</div>
			
 
				+    <div class="czrk_num">{{czrk.num}}</div>
			
 
				+    <img src="../../assets/png/yq_background.png" class="yq_background_img1"></img>
			
 
				+    <div class="ldrk_name">流动人口</div>
			
 
				+    <div class="ldrk_num">{{ldrk.num}}</div>
			
 
				+    <ThreeDCharts3></ThreeDCharts3>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+  import ThreeDCharts3 from "../Utils/ThreeDCharts3.vue"
			
 
				+  export default {
			
 
				+    name: 'PepoleStatusPage',
			
 
				+    components: {
			
 
				+      ThreeDCharts3
			
 
				+    },
			
 
				+    data() {
			
 
				+      return {
			
 
				+        population: [ // -- 人口情况
			
 
				+          {
			
 
				+            name: "流动人口",
			
 
				+            num: 501,
			
 
				+            rate: "22.77"
			
 
				+          },
			
 
				+          {
			
 
				+            name: "常住人口",
			
 
				+            num: 1699,
			
 
				+            rate: "77.23"
			
 
				+          }
			
 
				+        ],
			
 
				+        czrk: 0,
			
 
				+        ldrk: 0
			
 
				+      }
			
 
				+    },
			
 
				+    mounted() {
			
 
				+      let clear = setInterval(() => {
			
 
				+        if (this.$store.getters.getSzdata.code === 10000&&this.$store.getters.getDaZhongdata.data&&this.$store.getters.getDaZhongdata.data.population) {
			
 
				+          this.population = this.$store.getters.getDaZhongdata.data.population
			
 
				+          this.czrk = this.population.filter(result => result.name == '常住人口')[0];
			
 
				+          this.ldrk = this.population.filter(result => result.name == '流动人口')[0];
			
 
				+          clearInterval(clear)
			
 
				+        }
			
 
				+      }, 500);
			
 
				+    },
			
 
				+    methods: {
			
 
				+
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+
			
 
				+<style scoped>
			
 
				+  .czrk_name {
			
 
				+    position: absolute;
			
 
				+    color: rgb(4, 185, 202);
			
 
				+    font-weight: bold;
			
 
				+    left: 18%;
			
 
				+    top: 8%
			
 
				+  }
			
 
				+
			
 
				+  .czrk_num {
			
 
				+    position: absolute;
			
 
				+    left: 18%;
			
 
				+    top: 15%;
			
 
				+    color: rgb(250, 207, 44);
			
 
				+    font-size: 25px;
			
 
				+    font-weight: bold;
			
 
				+  }
			
 
				+
			
 
				+  .ldrk_name {
			
 
				+    position: absolute;
			
 
				+    color: rgb(4, 185, 202);
			
 
				+    font-weight: bold;
			
 
				+    left: 68%;
			
 
				+    top: 8%
			
 
				+  }
			
 
				+
			
 
				+  .ldrk_num {
			
 
				+    position: absolute;
			
 
				+    left: 70%;
			
 
				+    top: 15%;
			
 
				+    font-size: 25px;
			
 
				+    color: rgb(250, 207, 44);
			
 
				+    font-weight: bold;
			
 
				+  }
			
 
				+
			
 
				+  .yq_background_img {
			
 
				+    position: absolute;
			
 
				+    width: 30%;
			
 
				+    left: 10%;
			
 
				+    top: 5%
			
 
				+  }
			
 
				+
			
 
				+  .yq_background_img1 {
			
 
				+    position: absolute;
			
 
				+    width: 30%;
			
 
				+    left: 60%;
			
 
				+    top: 5%
			
 
				+  }
			
 
				+
			
 
				+  .font {
			
 
				+    position: absolute;
			
 
				+    font-size: 10px;
			
 
				+  }
			
 
				+
			
 
				+  .row {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    width: 100%;
			
 
				+    height: 5%;
			
 
				+  }
			
 
				+
			
 
				+  #pepoleStatusPage {
			
 
				+    position: absolute;
			
 
				+    width: 100%;
			
 
				+    height: 43%;
			
 
				+    /* background-color: rgb(48,115,248,0.1); */
			
 
				+    top: 36%;
			
 
				+    z-index: 2;
			
 
				+    color: rgb(255, 255, 255);
			
 
				+  }
			
 
				+
			
 
				+  .num1 {
			
 
				+    position: absolute;
			
 
				+    width: 5%;
			
 
				+    left: 15%;
			
 
				+    font-size: 10px;
			
 
				+  }
			
 
				+
			
 
				+  .num2 {
			
 
				+    position: absolute;
			
 
				+    left: 42%;
			
 
				+    width: 10%;
			
 
				+    font-size: 10px;
			
 
				+  }
			
 
				+
			
 
				+  .num3 {
			
 
				+    position: absolute;
			
 
				+    left: 84%;
			
 
				+    width: 10%;
			
 
				+    font-size: 10px;
			
 
				+  }
			
 
				+
			
 
				+  .progress_both {
			
 
				+    left: 52%;
			
 
				+    top: 2%;
			
 
				+    /* position: absolute; */
			
 
				+    width: 30%;
			
 
				+    height: 5px;
			
 
				+  }
			
 
				+
			
 
				+  .progress_container0 {
			
 
				+    right: 62%;
			
 
				+    position: absolute;
			
 
				+    width: 15%;
			
 
				+    height: 5px;
			
 
				+    background-color: rgb(48, 115, 248);
			
 
				+  }
			
 
				+
			
 
				+  .progress_container1 {
			
 
				+    position: absolute;
			
 
				+    width: 30%;
			
 
				+    left: 52%;
			
 
				+    height: 5px;
			
 
				+    background-color: rgb(55, 179, 163);
			
 
				+  }
			
 
				+
			
 
				+  .progress_container2 {
			
 
				+    position: absolute;
			
 
				+    width: 10%;
			
 
				+    height: 5px;
			
 
				+    left: 52%;
			
 
				+    background-color: rgb(245, 199, 49);
			
 
				+  }
			
 
				+
			
 
				+</style>
			
--- a/shuzhixiangzheng/src/components/OtherChilds/PopulationStructure.vue
+++ b/shuzhixiangzheng/src/components/OtherChilds/PopulationStructure.vue
@@ -0,0 +1,40 @@
 
				+<template>
			
 
				+    <div id="populationStructure">
			
 
				+        <div ></div>
			
 
				+    </div>
			
 
				+  </template>
			
 
				+  
			
 
				+  <script>
			
 
				+    import echarts from 'echarts'
			
 
				+    export default {
			
 
				+      name: 'populationStructure',
			
 
				+      components: {
			
 
				+      },
			
 
				+      data() {
			
 
				+        return {
			
 
				+         
			
 
				+        }
			
 
				+      },
			
 
				+      mounted() {
			
 
				+        
			
 
				+      },
			
 
				+      methods: {
			
 
				+        
			
 
				+      }
			
 
				+    }
			
 
				+  
			
 
				+  </script>
			
 
				+  
			
 
				+  
			
 
				+  <style scoped>
			
 
				+ 
			
 
				+  #populationStructure{
			
 
				+      position: absolute;
			
 
				+      width: 100%;
			
 
				+      height: 25%;
			
 
				+      z-index: 2;
			
 
				+      top:75%;
			
 
				+      /* background-color: rgb(0, 0, 255,0.4); */
			
 
				+  }
			
 
				+  </style>
			
 
				+  
			
--- a/shuzhixiangzheng/src/components/OtherChilds/RightPage.vue
+++ b/shuzhixiangzheng/src/components/OtherChilds/RightPage.vue
@@ -0,0 +1,103 @@
 
				+<template>
			
 
				+    <div id="rightPage">
			
 
				+        <img class="menu" id="importantPersonStatus" src="../../assets/png/4.png"></img>
			
 
				+        <KeyPopulationPage></KeyPopulationPage>
			
 
				+        <img class="menu" id="employmentSituation" src="../../assets/png/5.png"></img>
			
 
				+        <div id="chart_2">
			
 
				+          <ThreeDCharts4></ThreeDCharts4>
			
 
				+        </div>
			
 
				+        <img class="menu" id="education" src="../../assets/png/6.png"></img>
			
 
				+        <div id="education_dib">
			
 
				+          <EdcationPage_shequ></EdcationPage_shequ>
			
 
				+        </div>
			
 
				+        
			
 
				+        <img class="menu" id="vaccination" src="../../assets/png/7.png"></img>
			
 
				+        <VaccinationPage></VaccinationPage>
			
 
				+    </div>
			
 
				+  </template>
			
 
				+  
			
 
				+  <script>
			
 
				+   import KeyPopulationPage from "../MainPageChild/KeyPopulationPage"
			
 
				+   import ThreeDCharts4 from "../Utils/ThreeDCharts4"
			
 
				+   import EdcationPage_shequ from "./EdcationPage_shequ"
			
 
				+   import VaccinationPage from "../MainPageChild/VaccinationPage"
			
 
				+    export default {
			
 
				+      name: '',
			
 
				+      components: {
			
 
				+        KeyPopulationPage,
			
 
				+        ThreeDCharts4,
			
 
				+        EdcationPage_shequ,
			
 
				+        VaccinationPage
			
 
				+      },
			
 
				+      data() {
			
 
				+        return {
			
 
				+          population: [ // -- 人口情况
			
 
				+            {
			
 
				+              name: "流动人口",
			
 
				+              num: 501,
			
 
				+              rate: "22.77"
			
 
				+            },
			
 
				+            {
			
 
				+              name: "常住人口",
			
 
				+              num: 1699,
			
 
				+              rate: "77.23"
			
 
				+            }
			
 
				+          ],
			
 
				+          czrk: 0,
			
 
				+          ldrk: 0
			
 
				+        }
			
 
				+      },
			
 
				+      mounted() {
			
 
				+        
			
 
				+      },
			
 
				+      methods: {
			
 
				+  
			
 
				+      }
			
 
				+    }
			
 
				+  
			
 
				+  </script>
			
 
				+  
			
 
				+  
			
 
				+  <style scoped>
			
 
				+    #education_dib{
			
 
				+      position: absolute;
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+      left: -10%;
			
 
				+    }
			
 
				+ #chart_2{
			
 
				+   position: absolute;
			
 
				+   width: 100%;
			
 
				+   height: 100%;
			
 
				+   left:-40%;
			
 
				+   top:10%;
			
 
				+   z-index: 3;
			
 
				+ }
			
 
				+  #rightPage{
			
 
				+    position: absolute;
			
 
				+    z-index: 120;
			
 
				+    color: azure;
			
 
				+    z-index: 2;
			
 
				+    height: 90%;
			
 
				+    width: 23%;
			
 
				+    top:10%;
			
 
				+    right: 1%;
			
 
				+    background-color: rgba(4, 11, 30, 0.6);
			
 
				+  }
			
 
				+  .menu{
			
 
				+    position: absolute;
			
 
				+    width: 150px;
			
 
				+    left:5%
			
 
				+  }
			
 
				+  #employmentSituation{
			
 
				+    top:22%
			
 
				+  }
			
 
				+  #vaccination{
			
 
				+    top:75%;
			
 
				+    width: 200px;
			
 
				+  }
			
 
				+ #education{
			
 
				+   top:45%
			
 
				+ }
			
 
				+  </style>
			
 
				+  
			
--- a/shuzhixiangzheng/src/components/Time.vue
+++ b/shuzhixiangzheng/src/components/Time.vue
@@ -39,7 +39,7 @@
 
				   <style scoped>
			
 
				     #time{
			
 
				         position: absolute;
			
 
				-            z-index: 110;
			
 
				+            z-index: 130;
			
 
				           
			
 
				             /* width: 100%;
			
 
				             height: 100%; */
			
--- a/shuzhixiangzheng/src/components/Utils/ThreeDCharts.vue
+++ b/shuzhixiangzheng/src/components/Utils/ThreeDCharts.vue
@@ -0,0 +1,530 @@
 
				+<template>
			
 
				+  <div class="water-eval-container">
			
 
				+    <div class="cityGreenLand-charts" id="cityGreenLand-charts">
			
 
				+
			
 
				+    </div>
			
 
				+    <div id="number" class="num"></div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+  import echarts from 'echarts'
			
 
				+  import 'echarts-gl';
			
 
				+  export default {
			
 
				+    name: "cityGreenLand",
			
 
				+    components: {},
			
 
				+    data() {
			
 
				+      return {
			
 
				+        working: { // -- 就业情况
			
 
				+          privateRate: 48.76, //自主就业
			
 
				+          noWorkingRate: 11.18, //无业
			
 
				+          retireRate: 9.08, //退休
			
 
				+          publicRate: 2.08, //公职
			
 
				+          companyRate: 28.89 //企业员工
			
 
				+        },
			
 
				+        optionData: [{
			
 
				+            name: '公职人员数',
			
 
				+            value: 2.08,
			
 
				+            itemStyle: {
			
 
				+              //color: '#01D2AA',
			
 
				+              color: 'rgba(1,210,170,0.8)'
			
 
				+            }
			
 
				+          }, {
			
 
				+            name: '自主就业',
			
 
				+            value: 48.76,
			
 
				+            itemStyle: {
			
 
				+              //color: '#0F8BF6'
			
 
				+              color: 'rgba(15,139,246,0.8)'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            name: '企业员工',
			
 
				+            value: 28.89,
			
 
				+            itemStyle: {
			
 
				+              //	color: '#FBB135'
			
 
				+              color: 'rgba( 214,215,1,0.8)'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            name: '无业',
			
 
				+            value: 11.18,
			
 
				+            itemStyle: {
			
 
				+              //	color: '#D17356'
			
 
				+              color: 'rgba( 255,174,45,0.8)'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            name: '退休',
			
 
				+            value: 9.08,
			
 
				+            itemStyle: {
			
 
				+              //	color: '#D17356'
			
 
				+              color: 'rgba( 217,111,87,0.8)'
			
 
				+            }
			
 
				+          }
			
 
				+        ],
			
 
				+      }
			
 
				+    },
			
 
				+    mounted() {
			
 
				+      let clear = setInterval(() => {
			
 
				+        if (this.$store.getters.getSzdata.code === 10000) {
			
 
				+          this.working = this.$store.getters.getSzdata.data.working;
			
 
				+          this.initData();
			
 
				+
			
 
				+          clearInterval(clear)
			
 
				+        }
			
 
				+      }, 500);
			
 
				+    },
			
 
				+    methods: {
			
 
				+      //数据匹配
			
 
				+      initData() {
			
 
				+        this.optionData.filter(result => result.name == '公职人员数')[0].value = +this.working.publicRate;
			
 
				+        this.optionData.filter(result => result.name == '自主就业')[0].value = +this.working.privateRate;
			
 
				+        this.optionData.filter(result => result.name == '企业员工')[0].value = +this.working.companyRate;
			
 
				+        this.optionData.filter(result => result.name == '无业')[0].value = +this.working.noWorkingRate;
			
 
				+        this.optionData.filter(result => result.name == '退休')[0].value = +this.working.retireRate;
			
 
				+        this.init();
			
 
				+      },
			
 
				+      init() {
			
 
				+        //构建3d饼状图
			
 
				+        let myChart = echarts.init(document.getElementById('cityGreenLand-charts'));
			
 
				+        // 传入数据生成 option
			
 
				+        this.option = this.getPie3D(this.optionData, 0.8);
			
 
				+        myChart.setOption(this.option);
			
 
				+        // //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
			
 
				+        // this.option.series.push({
			
 
				+        // 	name: 'pie2d',
			
 
				+        // 	type: 'pie',
			
 
				+        // 	labelLine:{
			
 
				+        // 		length:10,
			
 
				+        // 		length2:10
			
 
				+        // 	},
			
 
				+        // 	startAngle: -20 , //起始角度，支持范围[0, 360]。
			
 
				+        // 	clockwise: false,//饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
			
 
				+        // 	radius: ['20%', '50%'],
			
 
				+        // 	center: ['50%', '50%'],
			
 
				+        // 	data: this.optionData,
			
 
				+        // 	itemStyle:{
			
 
				+        // 		opacity:0
			
 
				+        // 	},
			
 
				+        // 	emphasis:{
			
 
				+        // 		label: {
			
 
				+        // 		show: true,
			
 
				+        // 		fontSize: '10',
			
 
				+        // 		fontWeight: 'bold'
			
 
				+        // 		}
			
 
				+        // 	}
			
 
				+        // });
			
 
				+        // myChart.setOption(this.option);
			
 
				+        // this.bindListen(myChart);
			
 
				+        let optionData = this.optionData;
			
 
				+        myChart.on('mouseover', function (params) {
			
 
				+          document.getElementById("number").innerText = optionData.filter(result => result.name == params
			
 
				+            .seriesName)[0].value + "%"
			
 
				+        });
			
 
				+      },
			
 
				+
			
 
				+      getPie3D(pieData, internalDiameterRatio) {
			
 
				+        //internalDiameterRatio:透明的空心占比
			
 
				+        let that = this;
			
 
				+        let series = [];
			
 
				+        let sumValue = 0;
			
 
				+        let startValue = 0;
			
 
				+        let endValue = 0;
			
 
				+        let legendData = [];
			
 
				+        let legendBfb = [];
			
 
				+        let k = 1 - internalDiameterRatio;
			
 
				+        pieData.sort((a, b) => {
			
 
				+          return (b.value - a.value);
			
 
				+        });
			
 
				+        // 为每一个饼图数据，生成一个 series-surface 配置
			
 
				+        for (let i = 0; i < pieData.length; i++) {
			
 
				+          sumValue += pieData[i].value;
			
 
				+          let seriesItem = {
			
 
				+            name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
			
 
				+            type: 'surface',
			
 
				+            parametric: true,
			
 
				+            wireframe: {
			
 
				+              show: false
			
 
				+            },
			
 
				+            pieData: pieData[i],
			
 
				+            pieStatus: {
			
 
				+              selected: false,
			
 
				+              hovered: true,
			
 
				+              k: k
			
 
				+            },
			
 
				+            center: ['10%', '50%']
			
 
				+          };
			
 
				+
			
 
				+          if (typeof pieData[i].itemStyle != 'undefined') {
			
 
				+            let itemStyle = {};
			
 
				+            typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
			
 
				+            typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity :
			
 
				+            null;
			
 
				+            seriesItem.itemStyle = itemStyle;
			
 
				+          }
			
 
				+          series.push(seriesItem);
			
 
				+        }
			
 
				+
			
 
				+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
			
 
				+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
			
 
				+        legendData = [];
			
 
				+        legendBfb = [];
			
 
				+        for (let i = 0; i < series.length; i++) {
			
 
				+          endValue = startValue + series[i].pieData.value;
			
 
				+          series[i].pieData.startRatio = startValue / sumValue;
			
 
				+          series[i].pieData.endRatio = endValue / sumValue;
			
 
				+          // series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
			
 
				+          // 	false, false, k, series[i].pieData.value);
			
 
				+          series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData
			
 
				+            .endRatio,
			
 
				+            false, false, k, 20);
			
 
				+          startValue = endValue;
			
 
				+          let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
			
 
				+          legendData.push({
			
 
				+            name: series[i].name,
			
 
				+            value: bfb
			
 
				+          });
			
 
				+          legendBfb.push({
			
 
				+            name: series[i].name,
			
 
				+            value: bfb
			
 
				+          });
			
 
				+        }
			
 
				+        let boxHeight = this.getHeight3D(series, 20); //通过传参设定3d饼/环的高度，26代表26px
			
 
				+
			
 
				+        //let boxHeight =0.03;
			
 
				+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
			
 
				+        let option = {
			
 
				+          legend: {
			
 
				+            data: legendData,
			
 
				+            orient: 'horizontal',
			
 
				+            left: 230,
			
 
				+            bottom: 100,
			
 
				+            itemGap: 10,
			
 
				+            textStyle: {
			
 
				+              color: '#A1E2FF',
			
 
				+            },
			
 
				+            show: true,
			
 
				+            icon: "circle",
			
 
				+            // formatter: function(param) {
			
 
				+            // 	let item = legendBfb.filter(item => item.name == param)[0];
			
 
				+            // 	let bfs = that.fomatFloat(item.value * 100, 2) + "%";
			
 
				+            // 	return `${item.name}  ${bfs}`;
			
 
				+            // }
			
 
				+          },
			
 
				+          labelLine: {
			
 
				+            show: true,
			
 
				+            lineStyle: {
			
 
				+              color: '#7BC0CB'
			
 
				+            }
			
 
				+          },
			
 
				+          label: {
			
 
				+            show: true,
			
 
				+            position: 'outside',
			
 
				+            rich: {
			
 
				+              b: {
			
 
				+                color: '#7BC0CB',
			
 
				+                fontSize: 12,
			
 
				+                lineHeight: 20
			
 
				+              },
			
 
				+              c: {
			
 
				+                fontSize: 16,
			
 
				+              },
			
 
				+            },
			
 
				+            // formatter: '{b|{b} \n}{c|{c}}{b|  亩}',
			
 
				+
			
 
				+          },
			
 
				+          // tooltip: {
			
 
				+          // 	formatter: params => {
			
 
				+          // 		if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
			
 
				+          // 			let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
			
 
				+          // 				100).toFixed(2);
			
 
				+          // 			return `${params.seriesName}<br/>` +
			
 
				+          // 				`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
			
 
				+          // 				`${ bfb }%`;
			
 
				+          // 		}
			
 
				+          // 	}
			
 
				+          // },
			
 
				+
			
 
				+          xAxis3D: {
			
 
				+            min: -1,
			
 
				+            max: 1
			
 
				+          },
			
 
				+          yAxis3D: {
			
 
				+            min: -1,
			
 
				+            max: 1
			
 
				+          },
			
 
				+          zAxis3D: {
			
 
				+            min: -1,
			
 
				+            max: 1
			
 
				+          },
			
 
				+          grid3D: {
			
 
				+            show: false,
			
 
				+            boxHeight: boxHeight, //圆环的高度
			
 
				+            viewControl: { //3d效果可以放大、旋转等，请自己去查看官方配置
			
 
				+              alpha: 27, //角度
			
 
				+              distance: 300, //调整视角到主体的距离，类似调整zoom
			
 
				+              rotateSensitivity: 0, //设置为0无法旋转
			
 
				+              zoomSensitivity: 0, //设置为0无法缩放
			
 
				+              panSensitivity: 0, //设置为0无法平移
			
 
				+              autoRotate: true //自动旋转
			
 
				+            }
			
 
				+          },
			
 
				+          series: series
			
 
				+        };
			
 
				+        return option;
			
 
				+      },
			
 
				+
			
 
				+      //获取3d丙图的最高扇区的高度
			
 
				+      getHeight3D(series, height) {
			
 
				+        series.sort((a, b) => {
			
 
				+          return (b.pieData.value - a.pieData.value);
			
 
				+        })
			
 
				+        return height * 25 / series[0].pieData.value;
			
 
				+      },
			
 
				+
			
 
				+      // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
			
 
				+      getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
			
 
				+        // 计算
			
 
				+        let midRatio = (startRatio + endRatio) / 2;
			
 
				+        let startRadian = startRatio * Math.PI * 2;
			
 
				+        let endRadian = endRatio * Math.PI * 2;
			
 
				+        let midRadian = midRatio * Math.PI * 2;
			
 
				+        // 如果只有一个扇形，则不实现选中效果。
			
 
				+        if (startRatio === 0 && endRatio === 1) {
			
 
				+          isSelected = false;
			
 
				+        }
			
 
				+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
			
 
				+        k = typeof k !== 'undefined' ? k : 1 / 3;
			
 
				+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
			
 
				+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
			
 
				+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
			
 
				+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
			
 
				+        let hoverRate = isHovered ? 1.05 : 1;
			
 
				+        // 返回曲面参数方程
			
 
				+        return {
			
 
				+          u: {
			
 
				+            min: -Math.PI,
			
 
				+            max: Math.PI * 3,
			
 
				+            step: Math.PI / 32
			
 
				+          },
			
 
				+          v: {
			
 
				+            min: 0,
			
 
				+            max: Math.PI * 2,
			
 
				+            step: Math.PI / 20
			
 
				+          },
			
 
				+          x: function (u, v) {
			
 
				+            if (u < startRadian) {
			
 
				+              return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+            }
			
 
				+            if (u > endRadian) {
			
 
				+              return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+            }
			
 
				+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+          },
			
 
				+          y: function (u, v) {
			
 
				+            if (u < startRadian) {
			
 
				+              return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+            }
			
 
				+            if (u > endRadian) {
			
 
				+              return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+            }
			
 
				+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+          },
			
 
				+          z: function (u, v) {
			
 
				+            if (u < -Math.PI * 0.5) {
			
 
				+              return Math.sin(u);
			
 
				+            }
			
 
				+            if (u > Math.PI * 2.5) {
			
 
				+              return Math.sin(u) * h * .1;
			
 
				+            }
			
 
				+            return Math.sin(v) > 0 ? 1 * h * .1 : -1;
			
 
				+          }
			
 
				+        };
			
 
				+      },
			
 
				+
			
 
				+      fomatFloat(num, n) {
			
 
				+        var f = parseFloat(num);
			
 
				+        if (isNaN(f)) {
			
 
				+          return false;
			
 
				+        }
			
 
				+        f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂   
			
 
				+        var s = f.toString();
			
 
				+        var rs = s.indexOf('.');
			
 
				+        //判定如果是整数，增加小数点再补0
			
 
				+        if (rs < 0) {
			
 
				+          rs = s.length;
			
 
				+          s += '.';
			
 
				+        }
			
 
				+        while (s.length <= rs + n) {
			
 
				+          s += '0';
			
 
				+        }
			
 
				+        return s;
			
 
				+      },
			
 
				+
			
 
				+      bindListen(myChart) {
			
 
				+        // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
			
 
				+        let that = this;
			
 
				+        let selectedIndex = '';
			
 
				+        let hoveredIndex = '';
			
 
				+        // 监听点击事件，实现选中效果（单选）
			
 
				+        myChart.on('click', function (params) {
			
 
				+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
			
 
				+          let isSelected = !that.option.series[params.seriesIndex].pieStatus.selected;
			
 
				+          let isHovered = that.option.series[params.seriesIndex].pieStatus.hovered;
			
 
				+          let k = that.option.series[params.seriesIndex].pieStatus.k;
			
 
				+          let startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
			
 
				+          let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
			
 
				+          // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
			
 
				+          if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
			
 
				+            that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
			
 
				+                selectedIndex].pieData
			
 
				+              .startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option
			
 
				+              .series[
			
 
				+                selectedIndex].pieData
			
 
				+              .value);
			
 
				+            that.option.series[selectedIndex].pieStatus.selected = false;
			
 
				+          }
			
 
				+          // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
			
 
				+          that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio,
			
 
				+            endRatio,
			
 
				+            isSelected,
			
 
				+            isHovered, k, that.option.series[params.seriesIndex].pieData.value);
			
 
				+          that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
			
 
				+          // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
			
 
				+          isSelected ? selectedIndex = params.seriesIndex : null;
			
 
				+          // 使用更新后的 option，渲染图表
			
 
				+          myChart.setOption(that.option);
			
 
				+        });
			
 
				+        // 监听 mouseover，近似实现高亮（放大）效果
			
 
				+        myChart.on('mouseover', function (params) {
			
 
				+          // 准备重新渲染扇形所需的参数
			
 
				+          let isSelected;
			
 
				+          let isHovered;
			
 
				+          let startRatio;
			
 
				+          let endRatio;
			
 
				+          let k;
			
 
				+          // 如果触发 mouseover 的扇形当前已高亮，则不做操作
			
 
				+          if (hoveredIndex === params.seriesIndex) {
			
 
				+            return;
			
 
				+            // 否则进行高亮及必要的取消高亮操作
			
 
				+          } else {
			
 
				+            // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
			
 
				+            if (hoveredIndex !== '') {
			
 
				+              // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
			
 
				+              isSelected = that.option.series[hoveredIndex].pieStatus.selected;
			
 
				+              isHovered = false;
			
 
				+              startRatio = that.option.series[hoveredIndex].pieData.startRatio;
			
 
				+              endRatio = that.option.series[hoveredIndex].pieData.endRatio;
			
 
				+              k = that.option.series[hoveredIndex].pieStatus.k;
			
 
				+              // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
			
 
				+              that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
			
 
				+                isSelected,
			
 
				+                isHovered, k, that.option.series[hoveredIndex].pieData.value);
			
 
				+              that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
			
 
				+              // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
			
 
				+              hoveredIndex = '';
			
 
				+            }
			
 
				+            // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
			
 
				+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
			
 
				+              // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
			
 
				+              isSelected = that.option.series[params.seriesIndex].pieStatus.selected;
			
 
				+              isHovered = true;
			
 
				+              startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
			
 
				+              endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
			
 
				+              k = that.option.series[params.seriesIndex].pieStatus.k;
			
 
				+              // 对当前点击的扇形，执行高亮操作（对 option 更新）
			
 
				+              that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio,
			
 
				+                endRatio,
			
 
				+                isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5);
			
 
				+              that.option.series[params.seriesIndex].pieStatus.hovered = isHovered;
			
 
				+              // 记录上次高亮的扇形对应的系列号 seriesIndex
			
 
				+              hoveredIndex = params.seriesIndex;
			
 
				+            }
			
 
				+            // 使用更新后的 option，渲染图表
			
 
				+            myChart.setOption(that.option);
			
 
				+          }
			
 
				+        });
			
 
				+        // 修正取消高亮失败的 bug
			
 
				+        myChart.on('globalout', function () {
			
 
				+          // 准备重新渲染扇形所需的参数
			
 
				+          let isSelected;
			
 
				+          let isHovered;
			
 
				+          let startRatio;
			
 
				+          let endRatio;
			
 
				+          let k;
			
 
				+          if (hoveredIndex !== '') {
			
 
				+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
			
 
				+            isSelected = that.option.series[hoveredIndex].pieStatus.selected;
			
 
				+            isHovered = false;
			
 
				+            k = that.option.series[hoveredIndex].pieStatus.k;
			
 
				+            startRatio = that.option.series[hoveredIndex].pieData.startRatio;
			
 
				+            endRatio = that.option.series[hoveredIndex].pieData.endRatio;
			
 
				+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
			
 
				+            that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
			
 
				+              isSelected,
			
 
				+              isHovered, k, that.option.series[hoveredIndex].pieData.value);
			
 
				+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
			
 
				+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
			
 
				+            hoveredIndex = '';
			
 
				+          }
			
 
				+          // 使用更新后的 option，渲染图表
			
 
				+          myChart.setOption(that.option);
			
 
				+        });
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+</script>
			
 
				+<style scoped>
			
 
				+  .water-eval-container {
			
 
				+    position: absolute;
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    /* top: -70%;
			
 
				+    left: -26% */
			
 
				+  }
			
 
				+
			
 
				+  .cityGreenLand-charts {
			
 
				+	position: absolute;
			
 
				+    height: 400px;
			
 
				+    width: 800px;
			
 
				+  }
			
 
				+
			
 
				+  .num {
			
 
				+    position: absolute;
			
 
				+    width: 20%;
			
 
				+    height: 20%;
			
 
				+    right: 8%;
			
 
				+    top: 80%;
			
 
				+    font-weight: bold;
			
 
				+    /* background-color: rgb(255, 0, 0,0.3); */
			
 
				+    font-size: 35px;
			
 
				+  }
			
 
				+
			
 
				+  @media screen and (max-height: 1000px) {
			
 
				+    .water-eval-container {
			
 
				+      position: absolute;
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+      /* top: -80%;
			
 
				+      left: -26% */
			
 
				+    }
			
 
				+
			
 
				+    .cityGreenLand-charts {
			
 
				+      height: 400px;
			
 
				+      width: 800px;
			
 
				+    }
			
 
				+
			
 
				+    .num {
			
 
				+      position: absolute;
			
 
				+      width: 20%;
			
 
				+      height: 40%;
			
 
				+      right: 8%;
			
 
				+      top: 90%;
			
 
				+      font-weight: bold;
			
 
				+      /* background-color: rgb(255, 0, 0,0.3); */
			
 
				+      font-size: 35px;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+</style>
			
--- a/shuzhixiangzheng/src/components/Utils/ThreeDCharts1.vue
+++ b/shuzhixiangzheng/src/components/Utils/ThreeDCharts1.vue
@@ -0,0 +1,573 @@
 
				+<template>
			
 
				+  <div class="water-eval-container">
			
 
				+    <div class="cityGreenLand-charts" id="cityGreenLand-charts1">
			
 
				+    </div>
			
 
				+    <div id="number_1" class=num></div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+  import echarts from 'echarts'
			
 
				+  import 'echarts-gl';
			
 
				+  export default {
			
 
				+    name: "cityGreenLand",
			
 
				+    components: {},
			
 
				+    data() {
			
 
				+      return {
			
 
				+        education: [{
			
 
				+            rate: 0.98,
			
 
				+            num: 454,
			
 
				+            name: "文盲",
			
 
				+            id: 1518
			
 
				+          },
			
 
				+          {
			
 
				+            rate: 37.76,
			
 
				+            num: 17525,
			
 
				+            name: "初中及以下",
			
 
				+            id: 1519
			
 
				+          },
			
 
				+          {
			
 
				+            rate: 27.47,
			
 
				+            num: 12750,
			
 
				+            name: "高中",
			
 
				+            id: 1520
			
 
				+          },
			
 
				+          {
			
 
				+            rate: 23.04,
			
 
				+            num: 10693,
			
 
				+            name: "专科",
			
 
				+            id: 1521
			
 
				+          },
			
 
				+          {
			
 
				+            rate: 10.49,
			
 
				+            num: 4866,
			
 
				+            name: "本科",
			
 
				+            id: 1522
			
 
				+          },
			
 
				+          {
			
 
				+            rate: 0.26,
			
 
				+            num: 119,
			
 
				+            name: "研究生及以上",
			
 
				+            id: 1523
			
 
				+          }
			
 
				+        ],
			
 
				+        optionData: [{
			
 
				+            name: '文盲',
			
 
				+            value: 0.98,
			
 
				+            itemStyle: {
			
 
				+              color: '#0754A1',
			
 
				+            }
			
 
				+          }, {
			
 
				+            name: '初中及以下',
			
 
				+            value: 37.76,
			
 
				+            itemStyle: {
			
 
				+              color: '#0A62C5'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            name: '高中',
			
 
				+            value: 27.47,
			
 
				+            itemStyle: {
			
 
				+              color: '#5559FA'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            name: '研究生及以上',
			
 
				+            value: 0.26,
			
 
				+            itemStyle: {
			
 
				+              color: '#7739D0'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            name: '本科',
			
 
				+            value: 10.49,
			
 
				+            itemStyle: {
			
 
				+              color: '#FCD515'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            name: '专科',
			
 
				+            value: 23.04,
			
 
				+            itemStyle: {
			
 
				+              color: '#5BF96D'
			
 
				+            }
			
 
				+          }
			
 
				+        ],
			
 
				+      }
			
 
				+    },
			
 
				+    mounted() {
			
 
				+      let clear = setInterval(() => {
			
 
				+        if (this.$store.getters.getSzdata.code === 10000) {
			
 
				+          this.education = this.$store.getters.getSzdata.data.education;
			
 
				+          this.initData();
			
 
				+          clearInterval(clear)
			
 
				+        }
			
 
				+      }, 500);
			
 
				+    },
			
 
				+    methods: {
			
 
				+      //数据匹配
			
 
				+      initData() {
			
 
				+        this.optionData.filter(result => result.name == '文盲')[0].value = +this.education.filter(result => result.name ==
			
 
				+          '文盲')[0].rate;
			
 
				+        this.optionData.filter(result => result.name == '初中及以下')[0].value = +this.education.filter(result => result
			
 
				+          .name == '初中及以下')[0].rate;
			
 
				+        this.optionData.filter(result => result.name == '高中')[0].value = +this.education.filter(result => result.name ==
			
 
				+          '高中')[0].rate;
			
 
				+        this.optionData.filter(result => result.name == '研究生及以上')[0].value = +this.education.filter(result => result
			
 
				+          .name == '研究生及以上')[0].rate;
			
 
				+        this.optionData.filter(result => result.name == '本科')[0].value = +this.education.filter(result => result.name ==
			
 
				+          '本科')[0].rate;
			
 
				+        this.optionData.filter(result => result.name == '专科')[0].value = +this.education.filter(result => result.name ==
			
 
				+          '专科')[0].rate;
			
 
				+        this.init();
			
 
				+      },
			
 
				+      init() {
			
 
				+        //构建3d饼状图
			
 
				+        let myChart = echarts.init(document.getElementById('cityGreenLand-charts1'));
			
 
				+        // 传入数据生成 option
			
 
				+        this.option = this.getPie3D(this.optionData, 0.8);
			
 
				+        myChart.setOption(this.option);
			
 
				+        //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
			
 
				+        this.option.series.push({
			
 
				+          name: 'pie2d',
			
 
				+          type: 'pie',
			
 
				+          labelLine: {
			
 
				+            length: 5,
			
 
				+            length2: 10
			
 
				+          },
			
 
				+          label: {
			
 
				+            formatter: '{b|{b}}\n{c}%',
			
 
				+            rich: {
			
 
				+              b: {
			
 
				+                color: '#fff',
			
 
				+                fontSize: 8,
			
 
				+              }
			
 
				+            }
			
 
				+          },
			
 
				+          startAngle: -20, //起始角度，支持范围[0, 360]。
			
 
				+          clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
			
 
				+          radius: ['20%', '50%'],
			
 
				+          center: ['50%', '50%'],
			
 
				+          data: this.optionData,
			
 
				+          itemStyle: {
			
 
				+            opacity: 0
			
 
				+          }
			
 
				+        });
			
 
				+        myChart.setOption(this.option);
			
 
				+        let optionData = this.optionData;
			
 
				+        myChart.on('mouseover', function (params) {
			
 
				+          let num = optionData.filter(result => result.name == params.seriesName);
			
 
				+          if (num.length != 0) {
			
 
				+            console.log(num[0].value)
			
 
				+            console.log()
			
 
				+            document.getElementById("number_1").innerText = num[0].value + "%"
			
 
				+          }
			
 
				+        });
			
 
				+        //	this.bindListen(myChart);
			
 
				+      },
			
 
				+
			
 
				+      getPie3D(pieData, internalDiameterRatio) {
			
 
				+        //internalDiameterRatio:透明的空心占比
			
 
				+        let that = this;
			
 
				+        let series = [];
			
 
				+        let sumValue = 0;
			
 
				+        let startValue = 0;
			
 
				+        let endValue = 0;
			
 
				+        let legendData = [];
			
 
				+        let legendBfb = [];
			
 
				+        let k = 1 - internalDiameterRatio;
			
 
				+        pieData.sort((a, b) => {
			
 
				+          return (b.value - a.value);
			
 
				+        });
			
 
				+        // 为每一个饼图数据，生成一个 series-surface 配置
			
 
				+        for (let i = 0; i < pieData.length; i++) {
			
 
				+          sumValue += pieData[i].value;
			
 
				+          let seriesItem = {
			
 
				+            name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
			
 
				+            type: 'surface',
			
 
				+            parametric: true,
			
 
				+            wireframe: {
			
 
				+              show: false
			
 
				+            },
			
 
				+            pieData: pieData[i],
			
 
				+            pieStatus: {
			
 
				+              selected: false,
			
 
				+              hovered: true,
			
 
				+              k: k
			
 
				+            },
			
 
				+            center: ['10%', '50%']
			
 
				+          };
			
 
				+
			
 
				+          if (typeof pieData[i].itemStyle != 'undefined') {
			
 
				+            let itemStyle = {};
			
 
				+            typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
			
 
				+            typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity :
			
 
				+              null;
			
 
				+            seriesItem.itemStyle = itemStyle;
			
 
				+          }
			
 
				+          series.push(seriesItem);
			
 
				+        }
			
 
				+
			
 
				+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
			
 
				+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
			
 
				+        legendData = [];
			
 
				+        legendBfb = [];
			
 
				+        for (let i = 0; i < series.length; i++) {
			
 
				+          endValue = startValue + series[i].pieData.value;
			
 
				+          series[i].pieData.startRatio = startValue / sumValue;
			
 
				+          series[i].pieData.endRatio = endValue / sumValue;
			
 
				+          // series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
			
 
				+          // 	false, false, k, series[i].pieData.value);
			
 
				+          series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData
			
 
				+            .endRatio,
			
 
				+            false, false, k, 20);
			
 
				+          startValue = endValue;
			
 
				+          let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
			
 
				+          legendData.push({
			
 
				+            name: series[i].name,
			
 
				+            value: bfb
			
 
				+          });
			
 
				+          legendBfb.push({
			
 
				+            name: series[i].name,
			
 
				+            value: bfb
			
 
				+          });
			
 
				+        }
			
 
				+        let boxHeight = this.getHeight3D(series, 20); //通过传参设定3d饼/环的高度，26代表26px
			
 
				+
			
 
				+        //let boxHeight =0.03;
			
 
				+
			
 
				+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
			
 
				+        let option = {
			
 
				+          // legend: {
			
 
				+          // 	data: legendData,
			
 
				+          // 	orient: 'horizontal',
			
 
				+          // 	left: 80,
			
 
				+          // 	bottom: 10,
			
 
				+          // 	itemGap: 10,
			
 
				+          // 	textStyle: {
			
 
				+          // 		color: '#A1E2FF',
			
 
				+          // 	},
			
 
				+          // 	show: true,
			
 
				+          // 	icon: "circle",
			
 
				+          // 	// formatter: function(param) {
			
 
				+          // 	// 	let item = legendBfb.filter(item => item.name == param)[0];
			
 
				+          // 	// 	let bfs = that.fomatFloat(item.value * 100, 2) + "%";
			
 
				+          // 	// 	return `${item.name}  ${bfs}`;
			
 
				+          // 	// }
			
 
				+          // },
			
 
				+          labelLine: {
			
 
				+            show: true,
			
 
				+            lineStyle: {
			
 
				+              color: '#7BC0CB'
			
 
				+              // color: '#ffffff'
			
 
				+            }
			
 
				+          },
			
 
				+          label: {
			
 
				+            show: true,
			
 
				+            position: 'outside',
			
 
				+            rich: {
			
 
				+              b: {
			
 
				+                // color: '#7BC0CB',
			
 
				+                color: '#ffffff',
			
 
				+                fontSize: 10,
			
 
				+                lineHeight: 15
			
 
				+              },
			
 
				+              c: {
			
 
				+                fontSize: 16,
			
 
				+              },
			
 
				+            },
			
 
				+            //	formatter: '{b|{b} \n}{c|{c}}{b|  亩}',
			
 
				+            formatter: '{b|{b} \n}{c|{c}}{b|  }',
			
 
				+          },
			
 
				+          // tooltip: {
			
 
				+          // 	formatter: params => {
			
 
				+          // 		if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
			
 
				+          // 			let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
			
 
				+          // 				100).toFixed(2);
			
 
				+          // 			return `${params.seriesName}<br/>` +
			
 
				+          // 				`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
			
 
				+          // 				`${ bfb }%`;
			
 
				+          // 		}
			
 
				+          // 	}
			
 
				+          // },
			
 
				+          xAxis3D: {
			
 
				+            min: -1,
			
 
				+            max: 1
			
 
				+          },
			
 
				+          yAxis3D: {
			
 
				+            min: -1,
			
 
				+            max: 1
			
 
				+          },
			
 
				+          zAxis3D: {
			
 
				+            min: -1,
			
 
				+            max: 1
			
 
				+          },
			
 
				+          grid3D: {
			
 
				+            show: false,
			
 
				+            boxHeight: boxHeight, //圆环的高度
			
 
				+            viewControl: { //3d效果可以放大、旋转等，请自己去查看官方配置
			
 
				+              alpha: 70, //角度
			
 
				+              distance: 300, //调整视角到主体的距离，类似调整zoom
			
 
				+              rotateSensitivity: 0, //设置为0无法旋转
			
 
				+              zoomSensitivity: 0, //设置为0无法缩放
			
 
				+              panSensitivity: 0, //设置为0无法平移
			
 
				+              autoRotate: false //自动旋转
			
 
				+            }
			
 
				+          },
			
 
				+          series: series
			
 
				+        };
			
 
				+        return option;
			
 
				+      },
			
 
				+
			
 
				+      //获取3d丙图的最高扇区的高度
			
 
				+      getHeight3D(series, height) {
			
 
				+        series.sort((a, b) => {
			
 
				+          return (b.pieData.value - a.pieData.value);
			
 
				+        })
			
 
				+        return height * 25 / series[0].pieData.value;
			
 
				+      },
			
 
				+
			
 
				+      // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
			
 
				+      getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
			
 
				+        // 计算
			
 
				+        let midRatio = (startRatio + endRatio) / 2;
			
 
				+        let startRadian = startRatio * Math.PI * 2;
			
 
				+        let endRadian = endRatio * Math.PI * 2;
			
 
				+        let midRadian = midRatio * Math.PI * 2;
			
 
				+        // 如果只有一个扇形，则不实现选中效果。
			
 
				+        if (startRatio === 0 && endRatio === 1) {
			
 
				+          isSelected = false;
			
 
				+        }
			
 
				+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
			
 
				+        k = typeof k !== 'undefined' ? k : 1 / 3;
			
 
				+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
			
 
				+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
			
 
				+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
			
 
				+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
			
 
				+        let hoverRate = isHovered ? 1.05 : 1;
			
 
				+        // 返回曲面参数方程
			
 
				+        return {
			
 
				+          u: {
			
 
				+            min: -Math.PI,
			
 
				+            max: Math.PI * 3,
			
 
				+            step: Math.PI / 32
			
 
				+          },
			
 
				+          v: {
			
 
				+            min: 0,
			
 
				+            max: Math.PI * 2,
			
 
				+            step: Math.PI / 20
			
 
				+          },
			
 
				+          x: function (u, v) {
			
 
				+            if (u < startRadian) {
			
 
				+              return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+            }
			
 
				+            if (u > endRadian) {
			
 
				+              return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+            }
			
 
				+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+          },
			
 
				+          y: function (u, v) {
			
 
				+            if (u < startRadian) {
			
 
				+              return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+            }
			
 
				+            if (u > endRadian) {
			
 
				+              return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+            }
			
 
				+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+          },
			
 
				+          z: function (u, v) {
			
 
				+            if (u < -Math.PI * 0.5) {
			
 
				+              return Math.sin(u);
			
 
				+            }
			
 
				+            if (u > Math.PI * 2.5) {
			
 
				+              return Math.sin(u) * h * .1;
			
 
				+            }
			
 
				+            return Math.sin(v) > 0 ? 1 * h * .1 : -1;
			
 
				+          }
			
 
				+        };
			
 
				+      },
			
 
				+
			
 
				+      fomatFloat(num, n) {
			
 
				+        var f = parseFloat(num);
			
 
				+        if (isNaN(f)) {
			
 
				+          return false;
			
 
				+        }
			
 
				+        f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂   
			
 
				+        var s = f.toString();
			
 
				+        var rs = s.indexOf('.');
			
 
				+        //判定如果是整数，增加小数点再补0
			
 
				+        if (rs < 0) {
			
 
				+          rs = s.length;
			
 
				+          s += '.';
			
 
				+        }
			
 
				+        while (s.length <= rs + n) {
			
 
				+          s += '0';
			
 
				+        }
			
 
				+        return s;
			
 
				+      },
			
 
				+
			
 
				+      bindListen(myChart) {
			
 
				+        // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
			
 
				+        let that = this;
			
 
				+        let selectedIndex = '';
			
 
				+        let hoveredIndex = '';
			
 
				+        // 监听点击事件，实现选中效果（单选）
			
 
				+        myChart.on('click', function (params) {
			
 
				+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
			
 
				+          let isSelected = !that.option.series[params.seriesIndex].pieStatus.selected;
			
 
				+          let isHovered = that.option.series[params.seriesIndex].pieStatus.hovered;
			
 
				+          let k = that.option.series[params.seriesIndex].pieStatus.k;
			
 
				+          let startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
			
 
				+          let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
			
 
				+          // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
			
 
				+          if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
			
 
				+            that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
			
 
				+                selectedIndex].pieData
			
 
				+              .startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option
			
 
				+              .series[
			
 
				+                selectedIndex].pieData
			
 
				+              .value);
			
 
				+            that.option.series[selectedIndex].pieStatus.selected = false;
			
 
				+          }
			
 
				+          // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
			
 
				+          that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio,
			
 
				+            endRatio,
			
 
				+            isSelected,
			
 
				+            isHovered, k, that.option.series[params.seriesIndex].pieData.value);
			
 
				+          that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
			
 
				+          // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
			
 
				+          isSelected ? selectedIndex = params.seriesIndex : null;
			
 
				+          // 使用更新后的 option，渲染图表
			
 
				+          myChart.setOption(that.option);
			
 
				+        });
			
 
				+        // 监听 mouseover，近似实现高亮（放大）效果
			
 
				+        myChart.on('mouseover', function (params) {
			
 
				+          // 准备重新渲染扇形所需的参数
			
 
				+          let isSelected;
			
 
				+          let isHovered;
			
 
				+          let startRatio;
			
 
				+          let endRatio;
			
 
				+          let k;
			
 
				+          // 如果触发 mouseover 的扇形当前已高亮，则不做操作
			
 
				+          if (hoveredIndex === params.seriesIndex) {
			
 
				+            return;
			
 
				+            // 否则进行高亮及必要的取消高亮操作
			
 
				+          } else {
			
 
				+            // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
			
 
				+            if (hoveredIndex !== '') {
			
 
				+              // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
			
 
				+              isSelected = that.option.series[hoveredIndex].pieStatus.selected;
			
 
				+              isHovered = false;
			
 
				+              startRatio = that.option.series[hoveredIndex].pieData.startRatio;
			
 
				+              endRatio = that.option.series[hoveredIndex].pieData.endRatio;
			
 
				+              k = that.option.series[hoveredIndex].pieStatus.k;
			
 
				+              // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
			
 
				+              that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
			
 
				+                isSelected,
			
 
				+                isHovered, k, that.option.series[hoveredIndex].pieData.value);
			
 
				+              that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
			
 
				+              // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
			
 
				+              hoveredIndex = '';
			
 
				+            }
			
 
				+            // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
			
 
				+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
			
 
				+              // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
			
 
				+              isSelected = that.option.series[params.seriesIndex].pieStatus.selected;
			
 
				+              isHovered = true;
			
 
				+              startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
			
 
				+              endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
			
 
				+              k = that.option.series[params.seriesIndex].pieStatus.k;
			
 
				+              // 对当前点击的扇形，执行高亮操作（对 option 更新）
			
 
				+              that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio,
			
 
				+                endRatio,
			
 
				+                isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5);
			
 
				+              that.option.series[params.seriesIndex].pieStatus.hovered = isHovered;
			
 
				+              // 记录上次高亮的扇形对应的系列号 seriesIndex
			
 
				+              hoveredIndex = params.seriesIndex;
			
 
				+            }
			
 
				+            // 使用更新后的 option，渲染图表
			
 
				+            myChart.setOption(that.option);
			
 
				+          }
			
 
				+        });
			
 
				+        // 修正取消高亮失败的 bug
			
 
				+        myChart.on('globalout', function () {
			
 
				+          // 准备重新渲染扇形所需的参数
			
 
				+          let isSelected;
			
 
				+          let isHovered;
			
 
				+          let startRatio;
			
 
				+          let endRatio;
			
 
				+          let k;
			
 
				+          if (hoveredIndex !== '') {
			
 
				+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
			
 
				+            isSelected = that.option.series[hoveredIndex].pieStatus.selected;
			
 
				+            isHovered = false;
			
 
				+            k = that.option.series[hoveredIndex].pieStatus.k;
			
 
				+            startRatio = that.option.series[hoveredIndex].pieData.startRatio;
			
 
				+            endRatio = that.option.series[hoveredIndex].pieData.endRatio;
			
 
				+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
			
 
				+            that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
			
 
				+              isSelected,
			
 
				+              isHovered, k, that.option.series[hoveredIndex].pieData.value);
			
 
				+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
			
 
				+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
			
 
				+            hoveredIndex = '';
			
 
				+          }
			
 
				+          // 使用更新后的 option，渲染图表
			
 
				+          myChart.setOption(that.option);
			
 
				+        });
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+</script>
			
 
				+<style scoped>
			
 
				+  .water-eval-container {
			
 
				+    position: absolute;
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    top: -30%;
			
 
				+    right:  130%
			
 
				+  }
			
 
				+
			
 
				+  .cityGreenLand-charts {
			
 
				+    height: 300px;
			
 
				+    width: 600px;
			
 
				+  }
			
 
				+
			
 
				+  .num {
			
 
				+    position: absolute;
			
 
				+    width: 30%;
			
 
				+    height: 15%;
			
 
				+    right: -75%;
			
 
				+    top: 75%;
			
 
				+    font-weight: bold;
			
 
				+    /* background-color: rgb(255, 0, 0,0.3); */
			
 
				+    font-size: 35px;
			
 
				+  }
			
 
				+
			
 
				+  @media screen and (max-height: 1000px) {
			
 
				+    .water-eval-container {
			
 
				+    position: absolute;
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    top: -40%;
			
 
				+    right:  130%
			
 
				+  }
			
 
				+    .cityGreenLand-charts {
			
 
				+      height: 400px;
			
 
				+      width: 800px;
			
 
				+    }
			
 
				+
			
 
				+    .num {
			
 
				+      position: absolute;
			
 
				+      width: 30%;
			
 
				+      height: 15%;
			
 
				+      right: -74%;
			
 
				+      top: 85%;
			
 
				+      font-weight: bold;
			
 
				+      /* background-color: rgb(255, 0, 0,0.3); */
			
 
				+      font-size: 35px;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+</style>
			
--- a/shuzhixiangzheng/src/components/Utils/ThreeDCharts3.vue
+++ b/shuzhixiangzheng/src/components/Utils/ThreeDCharts3.vue
@@ -0,0 +1,548 @@
 
				+<template>
			
 
				+  <div class="water-eval-container">
			
 
				+    <div class="cityGreenLand-charts" id="cityGreenLand-charts2">
			
 
				+    </div>
			
 
				+    <div id="number_2" class=num>
			
 
				+      <div id="number_3" class=num> </div>
			
 
				+      <div id="number_4" class=num></div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+  import echarts from 'echarts'
			
 
				+  import 'echarts-gl';
			
 
				+  export default {
			
 
				+    name: "cityGreenLand",
			
 
				+    components: {},
			
 
				+    data() {
			
 
				+      return {
			
 
				+        population: [ // -- 人口情况
			
 
				+          {
			
 
				+            name: "流动人口",
			
 
				+            num: 501,
			
 
				+            rate: 22.77
			
 
				+          },
			
 
				+          {
			
 
				+            name: "常住人口",
			
 
				+            num: 1699,
			
 
				+            rate: 77.23
			
 
				+          }
			
 
				+        ],
			
 
				+        optionData: [{
			
 
				+          name: '流动人口',
			
 
				+          value: 22.77,
			
 
				+          itemStyle: {
			
 
				+            color: '#5BF96D',
			
 
				+          }
			
 
				+        }, {
			
 
				+          name: '常住人口',
			
 
				+          value: 77.23,
			
 
				+          itemStyle: {
			
 
				+            color: '#0B61C5'
			
 
				+          }
			
 
				+        }],
			
 
				+      }
			
 
				+    },
			
 
				+    mounted() {
			
 
				+      let clear = setInterval(() => {
			
 
				+        if (this.$store.getters.getSzdata.code === 10000&&this.$store.getters.getDaZhongdata.data&&this.$store.getters.getDaZhongdata.data.population) {
			
 
				+          this.population = this.$store.getters.getDaZhongdata.data.population
			
 
				+          console.log("this.population",this.population)
			
 
				+          this.optionData.filter(result => result.name == '常住人口')[0].value = +this.population.filter(result =>
			
 
				+            result.name ==
			
 
				+            '常住人口')[0].rate;
			
 
				+          this.optionData.filter(result => result.name == '流动人口')[0].value = +this.population.filter(result =>
			
 
				+            result
			
 
				+            .name == '流动人口')[0].rate;
			
 
				+       
			
 
				+          this.init();
			
 
				+          clearInterval(clear)
			
 
				+        }
			
 
				+      }, 500);
			
 
				+    },
			
 
				+    methods: {
			
 
				+      //数据匹配
			
 
				+      initData() {
			
 
				+
			
 
				+      },
			
 
				+      init() {
			
 
				+        //构建3d饼状图
			
 
				+        let myChart = echarts.init(document.getElementById('cityGreenLand-charts2'));
			
 
				+        // 传入数据生成 option
			
 
				+        this.option = this.getPie3D(this.optionData, 0.8);
			
 
				+        myChart.setOption(this.option);
			
 
				+        //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
			
 
				+        this.option.series.push({
			
 
				+          name: 'pie2d',
			
 
				+          type: 'pie',
			
 
				+          labelLine: {
			
 
				+            length: 5,
			
 
				+            length2: 10
			
 
				+          },
			
 
				+          label: {
			
 
				+            formatter: '{b|{b}}\n{c|{c}}%',
			
 
				+            rich: {
			
 
				+              b: {
			
 
				+                color: '#fff',
			
 
				+                fontSize: 12,
			
 
				+              },
			
 
				+              c: {
			
 
				+                fontSize: 25,
			
 
				+              }
			
 
				+            }
			
 
				+          },
			
 
				+          startAngle: -20, //起始角度，支持范围[0, 360]。
			
 
				+          clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
			
 
				+          radius: ['20%', '50%'],
			
 
				+          center: ['50%', '50%'],
			
 
				+          data: this.optionData,
			
 
				+          itemStyle: {
			
 
				+            opacity: 0
			
 
				+          }
			
 
				+        });
			
 
				+        myChart.setOption(this.option);
			
 
				+        let optionData = this.optionData;
			
 
				+        myChart.on('mouseover', function (params) {
			
 
				+          let num = optionData.filter(result => result.name == params.seriesName);
			
 
				+          if (num.length != 0) {
			
 
				+            document.getElementById("number_3").innerText = num[0].value + "%\n"
			
 
				+            document.getElementById("number_4").innerText = num[0].name
			
 
				+            if(num[0].name=="常住人口"){
			
 
				+              document.getElementById("number_3").style.color="#0B61C5"
			
 
				+            }else{
			
 
				+              document.getElementById("number_3").style.color="#5BF96D"
			
 
				+            }
			
 
				+            
			
 
				+          }
			
 
				+        });
			
 
				+        //	this.bindListen(myChart);
			
 
				+      },
			
 
				+
			
 
				+      getPie3D(pieData, internalDiameterRatio) {
			
 
				+        //internalDiameterRatio:透明的空心占比
			
 
				+        let that = this;
			
 
				+        let series = [];
			
 
				+        let sumValue = 0;
			
 
				+        let startValue = 0;
			
 
				+        let endValue = 0;
			
 
				+        let legendData = [];
			
 
				+        let legendBfb = [];
			
 
				+        let k = 1 - internalDiameterRatio;
			
 
				+        pieData.sort((a, b) => {
			
 
				+          return (b.value - a.value);
			
 
				+        });
			
 
				+        // 为每一个饼图数据，生成一个 series-surface 配置
			
 
				+        for (let i = 0; i < pieData.length; i++) {
			
 
				+          sumValue += pieData[i].value;
			
 
				+          let seriesItem = {
			
 
				+            name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
			
 
				+            type: 'surface',
			
 
				+            parametric: true,
			
 
				+            wireframe: {
			
 
				+              show: false
			
 
				+            },
			
 
				+            pieData: pieData[i],
			
 
				+            pieStatus: {
			
 
				+              selected: false,
			
 
				+              hovered: true,
			
 
				+              k: k
			
 
				+            },
			
 
				+            center: ['10%', '50%']
			
 
				+          };
			
 
				+
			
 
				+          if (typeof pieData[i].itemStyle != 'undefined') {
			
 
				+            let itemStyle = {};
			
 
				+            typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
			
 
				+            typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity :
			
 
				+              null;
			
 
				+            seriesItem.itemStyle = itemStyle;
			
 
				+          }
			
 
				+          series.push(seriesItem);
			
 
				+        }
			
 
				+
			
 
				+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
			
 
				+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
			
 
				+        legendData = [];
			
 
				+        legendBfb = [];
			
 
				+        for (let i = 0; i < series.length; i++) {
			
 
				+          endValue = startValue + series[i].pieData.value;
			
 
				+          series[i].pieData.startRatio = startValue / sumValue;
			
 
				+          series[i].pieData.endRatio = endValue / sumValue;
			
 
				+          // series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
			
 
				+          // 	false, false, k, series[i].pieData.value);
			
 
				+          series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData
			
 
				+            .endRatio,
			
 
				+            false, false, k, 20);
			
 
				+          startValue = endValue;
			
 
				+          let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
			
 
				+          legendData.push({
			
 
				+            name: series[i].name,
			
 
				+            value: bfb
			
 
				+          });
			
 
				+          legendBfb.push({
			
 
				+            name: series[i].name,
			
 
				+            value: bfb
			
 
				+          });
			
 
				+        }
			
 
				+        let boxHeight = this.getHeight3D(series, 20); //通过传参设定3d饼/环的高度，26代表26px
			
 
				+
			
 
				+        //let boxHeight =0.03;
			
 
				+
			
 
				+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
			
 
				+        let option = {
			
 
				+          // legend: {
			
 
				+          // 	data: legendData,
			
 
				+          // 	orient: 'horizontal',
			
 
				+          // 	left: 80,
			
 
				+          // 	bottom: 10,
			
 
				+          // 	itemGap: 10,
			
 
				+          // 	textStyle: {
			
 
				+          // 		color: '#A1E2FF',
			
 
				+          // 	},
			
 
				+          // 	show: true,
			
 
				+          // 	icon: "circle",
			
 
				+          // 	// formatter: function(param) {
			
 
				+          // 	// 	let item = legendBfb.filter(item => item.name == param)[0];
			
 
				+          // 	// 	let bfs = that.fomatFloat(item.value * 100, 2) + "%";
			
 
				+          // 	// 	return `${item.name}  ${bfs}`;
			
 
				+          // 	// }
			
 
				+          // },
			
 
				+          labelLine: {
			
 
				+            show: true,
			
 
				+            lineStyle: {
			
 
				+              color: '#7BC0CB'
			
 
				+              // color: '#ffffff'
			
 
				+            }
			
 
				+          },
			
 
				+          label: {
			
 
				+            show: true,
			
 
				+            position: 'outside',
			
 
				+            rich: {
			
 
				+              b: {
			
 
				+                // color: '#7BC0CB',
			
 
				+                color: '#ffffff',
			
 
				+                fontSize: 15,
			
 
				+                lineHeight: 15
			
 
				+              },
			
 
				+              c: {
			
 
				+                fontSize: 18,
			
 
				+              },
			
 
				+            },
			
 
				+            //	formatter: '{b|{b} \n}{c|{c}}{b|  亩}',
			
 
				+            formatter: '{b|{b} \n}{c|{c}}{b|  }',
			
 
				+          },
			
 
				+          // tooltip: {
			
 
				+          // 	formatter: params => {
			
 
				+          // 		if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
			
 
				+          // 			let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
			
 
				+          // 				100).toFixed(2);
			
 
				+          // 			return `${params.seriesName}<br/>` +
			
 
				+          // 				`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
			
 
				+          // 				`${ bfb }%`;
			
 
				+          // 		}
			
 
				+          // 	}
			
 
				+          // },
			
 
				+          xAxis3D: {
			
 
				+            min: -1,
			
 
				+            max: 1
			
 
				+          },
			
 
				+          yAxis3D: {
			
 
				+            min: -1,
			
 
				+            max: 1
			
 
				+          },
			
 
				+          zAxis3D: {
			
 
				+            min: -1,
			
 
				+            max: 1
			
 
				+          },
			
 
				+          grid3D: {
			
 
				+            show: false,
			
 
				+            boxHeight: boxHeight, //圆环的高度
			
 
				+            viewControl: { //3d效果可以放大、旋转等，请自己去查看官方配置
			
 
				+              alpha: 70, //角度
			
 
				+              distance: 300, //调整视角到主体的距离，类似调整zoom
			
 
				+              rotateSensitivity: 0, //设置为0无法旋转
			
 
				+              zoomSensitivity: 0, //设置为0无法缩放
			
 
				+              panSensitivity: 0, //设置为0无法平移
			
 
				+              autoRotate: false //自动旋转
			
 
				+            }
			
 
				+          },
			
 
				+          series: series
			
 
				+        };
			
 
				+        return option;
			
 
				+      },
			
 
				+
			
 
				+      //获取3d丙图的最高扇区的高度
			
 
				+      getHeight3D(series, height) {
			
 
				+        series.sort((a, b) => {
			
 
				+          return (b.pieData.value - a.pieData.value);
			
 
				+        })
			
 
				+        return height * 25 / series[0].pieData.value;
			
 
				+      },
			
 
				+
			
 
				+      // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
			
 
				+      getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
			
 
				+        // 计算
			
 
				+        let midRatio = (startRatio + endRatio) / 2;
			
 
				+        let startRadian = startRatio * Math.PI * 2;
			
 
				+        let endRadian = endRatio * Math.PI * 2;
			
 
				+        let midRadian = midRatio * Math.PI * 2;
			
 
				+        // 如果只有一个扇形，则不实现选中效果。
			
 
				+        if (startRatio === 0 && endRatio === 1) {
			
 
				+          isSelected = false;
			
 
				+        }
			
 
				+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
			
 
				+        k = typeof k !== 'undefined' ? k : 1 / 3;
			
 
				+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
			
 
				+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
			
 
				+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
			
 
				+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
			
 
				+        let hoverRate = isHovered ? 1.05 : 1;
			
 
				+        // 返回曲面参数方程
			
 
				+        return {
			
 
				+          u: {
			
 
				+            min: -Math.PI,
			
 
				+            max: Math.PI * 3,
			
 
				+            step: Math.PI / 32
			
 
				+          },
			
 
				+          v: {
			
 
				+            min: 0,
			
 
				+            max: Math.PI * 2,
			
 
				+            step: Math.PI / 20
			
 
				+          },
			
 
				+          x: function (u, v) {
			
 
				+            if (u < startRadian) {
			
 
				+              return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+            }
			
 
				+            if (u > endRadian) {
			
 
				+              return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+            }
			
 
				+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+          },
			
 
				+          y: function (u, v) {
			
 
				+            if (u < startRadian) {
			
 
				+              return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+            }
			
 
				+            if (u > endRadian) {
			
 
				+              return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+            }
			
 
				+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+          },
			
 
				+          z: function (u, v) {
			
 
				+            if (u < -Math.PI * 0.5) {
			
 
				+              return Math.sin(u);
			
 
				+            }
			
 
				+            if (u > Math.PI * 2.5) {
			
 
				+              return Math.sin(u) * h * .1;
			
 
				+            }
			
 
				+            return Math.sin(v) > 0 ? 1 * h * .1 : -1;
			
 
				+          }
			
 
				+        };
			
 
				+      },
			
 
				+
			
 
				+      fomatFloat(num, n) {
			
 
				+        var f = parseFloat(num);
			
 
				+        if (isNaN(f)) {
			
 
				+          return false;
			
 
				+        }
			
 
				+        f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂   
			
 
				+        var s = f.toString();
			
 
				+        var rs = s.indexOf('.');
			
 
				+        //判定如果是整数，增加小数点再补0
			
 
				+        if (rs < 0) {
			
 
				+          rs = s.length;
			
 
				+          s += '.';
			
 
				+        }
			
 
				+        while (s.length <= rs + n) {
			
 
				+          s += '0';
			
 
				+        }
			
 
				+        return s;
			
 
				+      },
			
 
				+
			
 
				+      bindListen(myChart) {
			
 
				+        // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
			
 
				+        let that = this;
			
 
				+        let selectedIndex = '';
			
 
				+        let hoveredIndex = '';
			
 
				+        // 监听点击事件，实现选中效果（单选）
			
 
				+        myChart.on('click', function (params) {
			
 
				+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
			
 
				+          let isSelected = !that.option.series[params.seriesIndex].pieStatus.selected;
			
 
				+          let isHovered = that.option.series[params.seriesIndex].pieStatus.hovered;
			
 
				+          let k = that.option.series[params.seriesIndex].pieStatus.k;
			
 
				+          let startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
			
 
				+          let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
			
 
				+          // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
			
 
				+          if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
			
 
				+            that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
			
 
				+                selectedIndex].pieData
			
 
				+              .startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option
			
 
				+              .series[
			
 
				+                selectedIndex].pieData
			
 
				+              .value);
			
 
				+            that.option.series[selectedIndex].pieStatus.selected = false;
			
 
				+          }
			
 
				+          // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
			
 
				+          that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio,
			
 
				+            endRatio,
			
 
				+            isSelected,
			
 
				+            isHovered, k, that.option.series[params.seriesIndex].pieData.value);
			
 
				+          that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
			
 
				+          // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
			
 
				+          isSelected ? selectedIndex = params.seriesIndex : null;
			
 
				+          // 使用更新后的 option，渲染图表
			
 
				+          myChart.setOption(that.option);
			
 
				+        });
			
 
				+        // 监听 mouseover，近似实现高亮（放大）效果
			
 
				+        myChart.on('mouseover', function (params) {
			
 
				+          // 准备重新渲染扇形所需的参数
			
 
				+          let isSelected;
			
 
				+          let isHovered;
			
 
				+          let startRatio;
			
 
				+          let endRatio;
			
 
				+          let k;
			
 
				+          // 如果触发 mouseover 的扇形当前已高亮，则不做操作
			
 
				+          if (hoveredIndex === params.seriesIndex) {
			
 
				+            return;
			
 
				+            // 否则进行高亮及必要的取消高亮操作
			
 
				+          } else {
			
 
				+            // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
			
 
				+            if (hoveredIndex !== '') {
			
 
				+              // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
			
 
				+              isSelected = that.option.series[hoveredIndex].pieStatus.selected;
			
 
				+              isHovered = false;
			
 
				+              startRatio = that.option.series[hoveredIndex].pieData.startRatio;
			
 
				+              endRatio = that.option.series[hoveredIndex].pieData.endRatio;
			
 
				+              k = that.option.series[hoveredIndex].pieStatus.k;
			
 
				+              // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
			
 
				+              that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
			
 
				+                isSelected,
			
 
				+                isHovered, k, that.option.series[hoveredIndex].pieData.value);
			
 
				+              that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
			
 
				+              // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
			
 
				+              hoveredIndex = '';
			
 
				+            }
			
 
				+            // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
			
 
				+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
			
 
				+              // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
			
 
				+              isSelected = that.option.series[params.seriesIndex].pieStatus.selected;
			
 
				+              isHovered = true;
			
 
				+              startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
			
 
				+              endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
			
 
				+              k = that.option.series[params.seriesIndex].pieStatus.k;
			
 
				+              // 对当前点击的扇形，执行高亮操作（对 option 更新）
			
 
				+              that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio,
			
 
				+                endRatio,
			
 
				+                isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5);
			
 
				+              that.option.series[params.seriesIndex].pieStatus.hovered = isHovered;
			
 
				+              // 记录上次高亮的扇形对应的系列号 seriesIndex
			
 
				+              hoveredIndex = params.seriesIndex;
			
 
				+            }
			
 
				+            // 使用更新后的 option，渲染图表
			
 
				+            myChart.setOption(that.option);
			
 
				+          }
			
 
				+        });
			
 
				+        // 修正取消高亮失败的 bug
			
 
				+        myChart.on('globalout', function () {
			
 
				+          // 准备重新渲染扇形所需的参数
			
 
				+          let isSelected;
			
 
				+          let isHovered;
			
 
				+          let startRatio;
			
 
				+          let endRatio;
			
 
				+          let k;
			
 
				+          if (hoveredIndex !== '') {
			
 
				+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
			
 
				+            isSelected = that.option.series[hoveredIndex].pieStatus.selected;
			
 
				+            isHovered = false;
			
 
				+            k = that.option.series[hoveredIndex].pieStatus.k;
			
 
				+            startRatio = that.option.series[hoveredIndex].pieData.startRatio;
			
 
				+            endRatio = that.option.series[hoveredIndex].pieData.endRatio;
			
 
				+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
			
 
				+            that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
			
 
				+              isSelected,
			
 
				+              isHovered, k, that.option.series[hoveredIndex].pieData.value);
			
 
				+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
			
 
				+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
			
 
				+            hoveredIndex = '';
			
 
				+          }
			
 
				+          // 使用更新后的 option，渲染图表
			
 
				+          myChart.setOption(that.option);
			
 
				+        });
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+</script>
			
 
				+<style scoped>
			
 
				+  .water-eval-container {
			
 
				+    position: absolute;
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    top: -30%;
			
 
				+    right: 130%
			
 
				+  }
			
 
				+
			
 
				+  .cityGreenLand-charts {
			
 
				+    height: 400px;
			
 
				+    width: 400px;
			
 
				+  }
			
 
				+
			
 
				+  .num {
			
 
				+    position: absolute;
			
 
				+    width: 30%;
			
 
				+    height: 15%;
			
 
				+    right: -75%;
			
 
				+    top: 75%;
			
 
				+    font-weight: bold;
			
 
				+    /* background-color: rgb(255, 0, 0,0.3); */
			
 
				+    font-size: 35px;
			
 
				+  }
			
 
				+
			
 
				+  @media screen and (max-height: 1000px) {
			
 
				+    .water-eval-container {
			
 
				+      position: absolute;
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+      top: 1%;
			
 
				+      right: 2%;
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+    .cityGreenLand-charts {
			
 
				+      height: 400px;
			
 
				+      width: 400px;
			
 
				+    }
			
 
				+
			
 
				+    .num {
			
 
				+      position: absolute;
			
 
				+      width: 35%;
			
 
				+      height: 15%;
			
 
				+      right: 30%;
			
 
				+      top: 45%;
			
 
				+      font-weight: bold;
			
 
				+      /* background-color: rgb(255, 0, 0,0.3); */
			
 
				+      font-size: 25px;
			
 
				+    }
			
 
				+    #number_3{
			
 
				+      position: absolute;
			
 
				+      width: 60%;
			
 
				+      height: 65%;
			
 
				+      right: 40%;
			
 
				+      top: 5%;
			
 
				+      font-weight: bold;
			
 
				+      /* background-color: rgb(255, 0, 0,0.3); */
			
 
				+      font-size: 30px;
			
 
				+    }
			
 
				+    #number_4{
			
 
				+      position: absolute;
			
 
				+      width: 60%;
			
 
				+      height: 65%;
			
 
				+      right: 35%;
			
 
				+      top: 71%;
			
 
				+      font-weight: bold;
			
 
				+      /* background-color: rgb(255, 0, 0,0.3); */
			
 
				+      font-size: 15px;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+</style>
			
--- a/shuzhixiangzheng/src/components/Utils/ThreeDCharts4.vue
+++ b/shuzhixiangzheng/src/components/Utils/ThreeDCharts4.vue
@@ -0,0 +1,530 @@
 
				+<template>
			
 
				+  <div class="water-eval-container">
			
 
				+    <div class="cityGreenLand-charts" id="cityGreenLand-charts3">
			
 
				+
			
 
				+    </div>
			
 
				+    <div id="number" class="num3"></div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+  import echarts from 'echarts'
			
 
				+  import 'echarts-gl';
			
 
				+  export default {
			
 
				+    name: "cityGreenLand",
			
 
				+    components: {},
			
 
				+    data() {
			
 
				+      return {
			
 
				+        working: { // -- 就业情况
			
 
				+          privateRate: 48.76, //自主就业
			
 
				+          noWorkingRate: 11.18, //无业
			
 
				+          retireRate: 9.08, //退休
			
 
				+          publicRate: 2.08, //公职
			
 
				+          companyRate: 28.89 //企业员工
			
 
				+        },
			
 
				+        optionData: [{
			
 
				+            name: '公职人员数',
			
 
				+            value: 2.08,
			
 
				+            itemStyle: {
			
 
				+              //color: '#01D2AA',
			
 
				+              color: 'rgba(1,210,170,0.8)'
			
 
				+            }
			
 
				+          }, {
			
 
				+            name: '自主就业',
			
 
				+            value: 48.76,
			
 
				+            itemStyle: {
			
 
				+              //color: '#0F8BF6'
			
 
				+              color: 'rgba(15,139,246,0.8)'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            name: '企业员工',
			
 
				+            value: 28.89,
			
 
				+            itemStyle: {
			
 
				+              //	color: '#FBB135'
			
 
				+              color: 'rgba( 214,215,1,0.8)'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            name: '无业',
			
 
				+            value: 11.18,
			
 
				+            itemStyle: {
			
 
				+              //	color: '#D17356'
			
 
				+              color: 'rgba( 255,174,45,0.8)'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            name: '退休',
			
 
				+            value: 9.08,
			
 
				+            itemStyle: {
			
 
				+              //	color: '#D17356'
			
 
				+              color: 'rgba( 217,111,87,0.8)'
			
 
				+            }
			
 
				+          }
			
 
				+        ],
			
 
				+      }
			
 
				+    },
			
 
				+    mounted() {
			
 
				+      let clear = setInterval(() => {
			
 
				+        if (this.$store.getters.getSzdata.code === 10000&&this.$store.getters.getSzdata.data.working) {
			
 
				+          this.working = this.$store.getters.getSzdata.data.working;
			
 
				+          this.initData();
			
 
				+
			
 
				+          clearInterval(clear)
			
 
				+        }
			
 
				+      }, 500);
			
 
				+    },
			
 
				+    methods: {
			
 
				+      //数据匹配
			
 
				+      initData() {
			
 
				+        this.optionData.filter(result => result.name == '公职人员数')[0].value = +this.working.publicRate;
			
 
				+        this.optionData.filter(result => result.name == '自主就业')[0].value = +this.working.privateRate;
			
 
				+        this.optionData.filter(result => result.name == '企业员工')[0].value = +this.working.companyRate;
			
 
				+        this.optionData.filter(result => result.name == '无业')[0].value = +this.working.noWorkingRate;
			
 
				+        this.optionData.filter(result => result.name == '退休')[0].value = +this.working.retireRate;
			
 
				+        this.init();
			
 
				+      },
			
 
				+      init() {
			
 
				+        //构建3d饼状图
			
 
				+        let myChart = echarts.init(document.getElementById('cityGreenLand-charts3'));
			
 
				+        // 传入数据生成 option
			
 
				+        this.option = this.getPie3D(this.optionData, 0.8);
			
 
				+        myChart.setOption(this.option);
			
 
				+        // //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
			
 
				+        // this.option.series.push({
			
 
				+        // 	name: 'pie2d',
			
 
				+        // 	type: 'pie',
			
 
				+        // 	labelLine:{
			
 
				+        // 		length:10,
			
 
				+        // 		length2:10
			
 
				+        // 	},
			
 
				+        // 	startAngle: -20 , //起始角度，支持范围[0, 360]。
			
 
				+        // 	clockwise: false,//饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
			
 
				+        // 	radius: ['20%', '50%'],
			
 
				+        // 	center: ['50%', '50%'],
			
 
				+        // 	data: this.optionData,
			
 
				+        // 	itemStyle:{
			
 
				+        // 		opacity:0
			
 
				+        // 	},
			
 
				+        // 	emphasis:{
			
 
				+        // 		label: {
			
 
				+        // 		show: true,
			
 
				+        // 		fontSize: '10',
			
 
				+        // 		fontWeight: 'bold'
			
 
				+        // 		}
			
 
				+        // 	}
			
 
				+        // });
			
 
				+        // myChart.setOption(this.option);
			
 
				+        // this.bindListen(myChart);
			
 
				+        let optionData = this.optionData;
			
 
				+        myChart.on('mouseover', function (params) {
			
 
				+          document.getElementById("number").innerText = optionData.filter(result => result.name == params
			
 
				+            .seriesName)[0].value + "%"
			
 
				+        });
			
 
				+      },
			
 
				+
			
 
				+      getPie3D(pieData, internalDiameterRatio) {
			
 
				+        //internalDiameterRatio:透明的空心占比
			
 
				+        let that = this;
			
 
				+        let series = [];
			
 
				+        let sumValue = 0;
			
 
				+        let startValue = 0;
			
 
				+        let endValue = 0;
			
 
				+        let legendData = [];
			
 
				+        let legendBfb = [];
			
 
				+        let k = 1 - internalDiameterRatio;
			
 
				+        pieData.sort((a, b) => {
			
 
				+          return (b.value - a.value);
			
 
				+        });
			
 
				+        // 为每一个饼图数据，生成一个 series-surface 配置
			
 
				+        for (let i = 0; i < pieData.length; i++) {
			
 
				+          sumValue += pieData[i].value;
			
 
				+          let seriesItem = {
			
 
				+            name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
			
 
				+            type: 'surface',
			
 
				+            parametric: true,
			
 
				+            wireframe: {
			
 
				+              show: false
			
 
				+            },
			
 
				+            pieData: pieData[i],
			
 
				+            pieStatus: {
			
 
				+              selected: false,
			
 
				+              hovered: true,
			
 
				+              k: k
			
 
				+            },
			
 
				+            center: ['10%', '50%']
			
 
				+          };
			
 
				+
			
 
				+          if (typeof pieData[i].itemStyle != 'undefined') {
			
 
				+            let itemStyle = {};
			
 
				+            typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
			
 
				+            typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity :
			
 
				+            null;
			
 
				+            seriesItem.itemStyle = itemStyle;
			
 
				+          }
			
 
				+          series.push(seriesItem);
			
 
				+        }
			
 
				+
			
 
				+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
			
 
				+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
			
 
				+        legendData = [];
			
 
				+        legendBfb = [];
			
 
				+        for (let i = 0; i < series.length; i++) {
			
 
				+          endValue = startValue + series[i].pieData.value;
			
 
				+          series[i].pieData.startRatio = startValue / sumValue;
			
 
				+          series[i].pieData.endRatio = endValue / sumValue;
			
 
				+          // series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
			
 
				+          // 	false, false, k, series[i].pieData.value);
			
 
				+          series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData
			
 
				+            .endRatio,
			
 
				+            false, false, k, 20);
			
 
				+          startValue = endValue;
			
 
				+          let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
			
 
				+          legendData.push({
			
 
				+            name: series[i].name,
			
 
				+            value: bfb
			
 
				+          });
			
 
				+          legendBfb.push({
			
 
				+            name: series[i].name,
			
 
				+            value: bfb
			
 
				+          });
			
 
				+        }
			
 
				+        let boxHeight = this.getHeight3D(series, 20); //通过传参设定3d饼/环的高度，26代表26px
			
 
				+
			
 
				+        //let boxHeight =0.03;
			
 
				+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
			
 
				+        let option = {
			
 
				+          legend: {
			
 
				+            data: legendData,
			
 
				+            orient: 'horizontal',
			
 
				+            left: 230,
			
 
				+            bottom: 100,
			
 
				+            itemGap: 10,
			
 
				+            textStyle: {
			
 
				+              color: '#A1E2FF',
			
 
				+            },
			
 
				+            show: true,
			
 
				+            icon: "circle",
			
 
				+            // formatter: function(param) {
			
 
				+            // 	let item = legendBfb.filter(item => item.name == param)[0];
			
 
				+            // 	let bfs = that.fomatFloat(item.value * 100, 2) + "%";
			
 
				+            // 	return `${item.name}  ${bfs}`;
			
 
				+            // }
			
 
				+          },
			
 
				+          labelLine: {
			
 
				+            show: true,
			
 
				+            lineStyle: {
			
 
				+              color: '#7BC0CB'
			
 
				+            }
			
 
				+          },
			
 
				+          label: {
			
 
				+            show: true,
			
 
				+            position: 'outside',
			
 
				+            rich: {
			
 
				+              b: {
			
 
				+                color: '#7BC0CB',
			
 
				+                fontSize: 12,
			
 
				+                lineHeight: 20
			
 
				+              },
			
 
				+              c: {
			
 
				+                fontSize: 16,
			
 
				+              },
			
 
				+            },
			
 
				+            // formatter: '{b|{b} \n}{c|{c}}{b|  亩}',
			
 
				+
			
 
				+          },
			
 
				+          // tooltip: {
			
 
				+          // 	formatter: params => {
			
 
				+          // 		if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
			
 
				+          // 			let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
			
 
				+          // 				100).toFixed(2);
			
 
				+          // 			return `${params.seriesName}<br/>` +
			
 
				+          // 				`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
			
 
				+          // 				`${ bfb }%`;
			
 
				+          // 		}
			
 
				+          // 	}
			
 
				+          // },
			
 
				+
			
 
				+          xAxis3D: {
			
 
				+            min: -1,
			
 
				+            max: 1
			
 
				+          },
			
 
				+          yAxis3D: {
			
 
				+            min: -1,
			
 
				+            max: 1
			
 
				+          },
			
 
				+          zAxis3D: {
			
 
				+            min: -1,
			
 
				+            max: 1
			
 
				+          },
			
 
				+          grid3D: {
			
 
				+            show: false,
			
 
				+            boxHeight: boxHeight, //圆环的高度
			
 
				+            viewControl: { //3d效果可以放大、旋转等，请自己去查看官方配置
			
 
				+              alpha: 27, //角度
			
 
				+              distance: 300, //调整视角到主体的距离，类似调整zoom
			
 
				+              rotateSensitivity: 0, //设置为0无法旋转
			
 
				+              zoomSensitivity: 0, //设置为0无法缩放
			
 
				+              panSensitivity: 0, //设置为0无法平移
			
 
				+              autoRotate: true //自动旋转
			
 
				+            }
			
 
				+          },
			
 
				+          series: series
			
 
				+        };
			
 
				+        return option;
			
 
				+      },
			
 
				+
			
 
				+      //获取3d丙图的最高扇区的高度
			
 
				+      getHeight3D(series, height) {
			
 
				+        series.sort((a, b) => {
			
 
				+          return (b.pieData.value - a.pieData.value);
			
 
				+        })
			
 
				+        return height * 25 / series[0].pieData.value;
			
 
				+      },
			
 
				+
			
 
				+      // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
			
 
				+      getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
			
 
				+        // 计算
			
 
				+        let midRatio = (startRatio + endRatio) / 2;
			
 
				+        let startRadian = startRatio * Math.PI * 2;
			
 
				+        let endRadian = endRatio * Math.PI * 2;
			
 
				+        let midRadian = midRatio * Math.PI * 2;
			
 
				+        // 如果只有一个扇形，则不实现选中效果。
			
 
				+        if (startRatio === 0 && endRatio === 1) {
			
 
				+          isSelected = false;
			
 
				+        }
			
 
				+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
			
 
				+        k = typeof k !== 'undefined' ? k : 1 / 3;
			
 
				+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
			
 
				+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
			
 
				+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
			
 
				+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
			
 
				+        let hoverRate = isHovered ? 1.05 : 1;
			
 
				+        // 返回曲面参数方程
			
 
				+        return {
			
 
				+          u: {
			
 
				+            min: -Math.PI,
			
 
				+            max: Math.PI * 3,
			
 
				+            step: Math.PI / 32
			
 
				+          },
			
 
				+          v: {
			
 
				+            min: 0,
			
 
				+            max: Math.PI * 2,
			
 
				+            step: Math.PI / 20
			
 
				+          },
			
 
				+          x: function (u, v) {
			
 
				+            if (u < startRadian) {
			
 
				+              return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+            }
			
 
				+            if (u > endRadian) {
			
 
				+              return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+            }
			
 
				+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+          },
			
 
				+          y: function (u, v) {
			
 
				+            if (u < startRadian) {
			
 
				+              return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+            }
			
 
				+            if (u > endRadian) {
			
 
				+              return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+            }
			
 
				+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+          },
			
 
				+          z: function (u, v) {
			
 
				+            if (u < -Math.PI * 0.5) {
			
 
				+              return Math.sin(u);
			
 
				+            }
			
 
				+            if (u > Math.PI * 2.5) {
			
 
				+              return Math.sin(u) * h * .1;
			
 
				+            }
			
 
				+            return Math.sin(v) > 0 ? 1 * h * .1 : -1;
			
 
				+          }
			
 
				+        };
			
 
				+      },
			
 
				+
			
 
				+      fomatFloat(num, n) {
			
 
				+        var f = parseFloat(num);
			
 
				+        if (isNaN(f)) {
			
 
				+          return false;
			
 
				+        }
			
 
				+        f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂   
			
 
				+        var s = f.toString();
			
 
				+        var rs = s.indexOf('.');
			
 
				+        //判定如果是整数，增加小数点再补0
			
 
				+        if (rs < 0) {
			
 
				+          rs = s.length;
			
 
				+          s += '.';
			
 
				+        }
			
 
				+        while (s.length <= rs + n) {
			
 
				+          s += '0';
			
 
				+        }
			
 
				+        return s;
			
 
				+      },
			
 
				+
			
 
				+      bindListen(myChart) {
			
 
				+        // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
			
 
				+        let that = this;
			
 
				+        let selectedIndex = '';
			
 
				+        let hoveredIndex = '';
			
 
				+        // 监听点击事件，实现选中效果（单选）
			
 
				+        myChart.on('click', function (params) {
			
 
				+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
			
 
				+          let isSelected = !that.option.series[params.seriesIndex].pieStatus.selected;
			
 
				+          let isHovered = that.option.series[params.seriesIndex].pieStatus.hovered;
			
 
				+          let k = that.option.series[params.seriesIndex].pieStatus.k;
			
 
				+          let startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
			
 
				+          let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
			
 
				+          // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
			
 
				+          if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
			
 
				+            that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
			
 
				+                selectedIndex].pieData
			
 
				+              .startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option
			
 
				+              .series[
			
 
				+                selectedIndex].pieData
			
 
				+              .value);
			
 
				+            that.option.series[selectedIndex].pieStatus.selected = false;
			
 
				+          }
			
 
				+          // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
			
 
				+          that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio,
			
 
				+            endRatio,
			
 
				+            isSelected,
			
 
				+            isHovered, k, that.option.series[params.seriesIndex].pieData.value);
			
 
				+          that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
			
 
				+          // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
			
 
				+          isSelected ? selectedIndex = params.seriesIndex : null;
			
 
				+          // 使用更新后的 option，渲染图表
			
 
				+          myChart.setOption(that.option);
			
 
				+        });
			
 
				+        // 监听 mouseover，近似实现高亮（放大）效果
			
 
				+        myChart.on('mouseover', function (params) {
			
 
				+          // 准备重新渲染扇形所需的参数
			
 
				+          let isSelected;
			
 
				+          let isHovered;
			
 
				+          let startRatio;
			
 
				+          let endRatio;
			
 
				+          let k;
			
 
				+          // 如果触发 mouseover 的扇形当前已高亮，则不做操作
			
 
				+          if (hoveredIndex === params.seriesIndex) {
			
 
				+            return;
			
 
				+            // 否则进行高亮及必要的取消高亮操作
			
 
				+          } else {
			
 
				+            // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
			
 
				+            if (hoveredIndex !== '') {
			
 
				+              // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
			
 
				+              isSelected = that.option.series[hoveredIndex].pieStatus.selected;
			
 
				+              isHovered = false;
			
 
				+              startRatio = that.option.series[hoveredIndex].pieData.startRatio;
			
 
				+              endRatio = that.option.series[hoveredIndex].pieData.endRatio;
			
 
				+              k = that.option.series[hoveredIndex].pieStatus.k;
			
 
				+              // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
			
 
				+              that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
			
 
				+                isSelected,
			
 
				+                isHovered, k, that.option.series[hoveredIndex].pieData.value);
			
 
				+              that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
			
 
				+              // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
			
 
				+              hoveredIndex = '';
			
 
				+            }
			
 
				+            // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
			
 
				+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
			
 
				+              // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
			
 
				+              isSelected = that.option.series[params.seriesIndex].pieStatus.selected;
			
 
				+              isHovered = true;
			
 
				+              startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
			
 
				+              endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
			
 
				+              k = that.option.series[params.seriesIndex].pieStatus.k;
			
 
				+              // 对当前点击的扇形，执行高亮操作（对 option 更新）
			
 
				+              that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio,
			
 
				+                endRatio,
			
 
				+                isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5);
			
 
				+              that.option.series[params.seriesIndex].pieStatus.hovered = isHovered;
			
 
				+              // 记录上次高亮的扇形对应的系列号 seriesIndex
			
 
				+              hoveredIndex = params.seriesIndex;
			
 
				+            }
			
 
				+            // 使用更新后的 option，渲染图表
			
 
				+            myChart.setOption(that.option);
			
 
				+          }
			
 
				+        });
			
 
				+        // 修正取消高亮失败的 bug
			
 
				+        myChart.on('globalout', function () {
			
 
				+          // 准备重新渲染扇形所需的参数
			
 
				+          let isSelected;
			
 
				+          let isHovered;
			
 
				+          let startRatio;
			
 
				+          let endRatio;
			
 
				+          let k;
			
 
				+          if (hoveredIndex !== '') {
			
 
				+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
			
 
				+            isSelected = that.option.series[hoveredIndex].pieStatus.selected;
			
 
				+            isHovered = false;
			
 
				+            k = that.option.series[hoveredIndex].pieStatus.k;
			
 
				+            startRatio = that.option.series[hoveredIndex].pieData.startRatio;
			
 
				+            endRatio = that.option.series[hoveredIndex].pieData.endRatio;
			
 
				+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
			
 
				+            that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
			
 
				+              isSelected,
			
 
				+              isHovered, k, that.option.series[hoveredIndex].pieData.value);
			
 
				+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
			
 
				+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
			
 
				+            hoveredIndex = '';
			
 
				+          }
			
 
				+          // 使用更新后的 option，渲染图表
			
 
				+          myChart.setOption(that.option);
			
 
				+        });
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+</script>
			
 
				+<style scoped>
			
 
				+  .water-eval-container {
			
 
				+    position: absolute;
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    /* top: -70%;
			
 
				+    left: -26% */
			
 
				+  }
			
 
				+
			
 
				+  .cityGreenLand-charts {
			
 
				+	position: absolute;
			
 
				+    height: 400px;
			
 
				+    width: 800px;
			
 
				+  }
			
 
				+
			
 
				+  .num {
			
 
				+    position: absolute;
			
 
				+    width: 20%;
			
 
				+    height: 20%;
			
 
				+    right: 8%;
			
 
				+    top: 80%;
			
 
				+    font-weight: bold;
			
 
				+    /* background-color: rgb(255, 0, 0,0.3); */
			
 
				+    font-size: 35px;
			
 
				+  }
			
 
				+
			
 
				+  @media screen and (max-height: 1000px) {
			
 
				+    .water-eval-container {
			
 
				+      position: absolute;
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+      /* top: -80%;
			
 
				+      left: -26% */
			
 
				+    }
			
 
				+
			
 
				+    .cityGreenLand-charts {
			
 
				+      height: 400px;
			
 
				+      width: 800px;
			
 
				+    }
			
 
				+
			
 
				+    .num3 {
			
 
				+      position: absolute;
			
 
				+      width: 20%;
			
 
				+      height: 5%;
			
 
				+      right: 1%;
			
 
				+      top: 18%;
			
 
				+      font-weight: bold;
			
 
				+      /* background-color: rgb(255, 0, 0,0.3); */
			
 
				+      font-size: 35px;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+</style>
			
--- a/shuzhixiangzheng/src/components/Utils/ThreeDCharts5.vue
+++ b/shuzhixiangzheng/src/components/Utils/ThreeDCharts5.vue
@@ -0,0 +1,573 @@
 
				+<template>
			
 
				+  <div class="water-eval-container">
			
 
				+    <div class="cityGreenLand-charts" id="cityGreenLand-charts4">
			
 
				+    </div>
			
 
				+    <div id="number_1" class=num></div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+  import echarts from 'echarts'
			
 
				+  import 'echarts-gl';
			
 
				+  export default {
			
 
				+    name: "cityGreenLand",
			
 
				+    components: {},
			
 
				+    data() {
			
 
				+      return {
			
 
				+        education: [{
			
 
				+            rate: 0.98,
			
 
				+            num: 454,
			
 
				+            name: "文盲",
			
 
				+            id: 1518
			
 
				+          },
			
 
				+          {
			
 
				+            rate: 37.76,
			
 
				+            num: 17525,
			
 
				+            name: "初中及以下",
			
 
				+            id: 1519
			
 
				+          },
			
 
				+          {
			
 
				+            rate: 27.47,
			
 
				+            num: 12750,
			
 
				+            name: "高中",
			
 
				+            id: 1520
			
 
				+          },
			
 
				+          {
			
 
				+            rate: 23.04,
			
 
				+            num: 10693,
			
 
				+            name: "专科",
			
 
				+            id: 1521
			
 
				+          },
			
 
				+          {
			
 
				+            rate: 10.49,
			
 
				+            num: 4866,
			
 
				+            name: "本科",
			
 
				+            id: 1522
			
 
				+          },
			
 
				+          {
			
 
				+            rate: 0.26,
			
 
				+            num: 119,
			
 
				+            name: "研究生及以上",
			
 
				+            id: 1523
			
 
				+          }
			
 
				+        ],
			
 
				+        optionData: [{
			
 
				+            name: '文盲',
			
 
				+            value: 0.98,
			
 
				+            itemStyle: {
			
 
				+              color: '#0754A1',
			
 
				+            }
			
 
				+          }, {
			
 
				+            name: '初中及以下',
			
 
				+            value: 37.76,
			
 
				+            itemStyle: {
			
 
				+              color: '#0A62C5'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            name: '高中',
			
 
				+            value: 27.47,
			
 
				+            itemStyle: {
			
 
				+              color: '#5559FA'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            name: '研究生及以上',
			
 
				+            value: 0.26,
			
 
				+            itemStyle: {
			
 
				+              color: '#7739D0'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            name: '本科',
			
 
				+            value: 10.49,
			
 
				+            itemStyle: {
			
 
				+              color: '#FCD515'
			
 
				+            }
			
 
				+          },
			
 
				+          {
			
 
				+            name: '专科',
			
 
				+            value: 23.04,
			
 
				+            itemStyle: {
			
 
				+              color: '#5BF96D'
			
 
				+            }
			
 
				+          }
			
 
				+        ],
			
 
				+      }
			
 
				+    },
			
 
				+    mounted() {
			
 
				+      let clear = setInterval(() => {
			
 
				+        if (this.$store.getters.getSzdata.code === 10000&& this.$store.getters.getSzdata.data.education) {
			
 
				+          this.education = this.$store.getters.getSzdata.data.education;
			
 
				+          this.initData();
			
 
				+          clearInterval(clear)
			
 
				+        }
			
 
				+      }, 500);
			
 
				+    },
			
 
				+    methods: {
			
 
				+      //数据匹配
			
 
				+      initData() {
			
 
				+        this.optionData.filter(result => result.name == '文盲')[0].value = +this.education.filter(result => result.name ==
			
 
				+          '文盲')[0].rate;
			
 
				+        this.optionData.filter(result => result.name == '初中及以下')[0].value = +this.education.filter(result => result
			
 
				+          .name == '初中及以下')[0].rate;
			
 
				+        this.optionData.filter(result => result.name == '高中')[0].value = +this.education.filter(result => result.name ==
			
 
				+          '高中')[0].rate;
			
 
				+        this.optionData.filter(result => result.name == '研究生及以上')[0].value = +this.education.filter(result => result
			
 
				+          .name == '研究生及以上')[0].rate;
			
 
				+        this.optionData.filter(result => result.name == '本科')[0].value = +this.education.filter(result => result.name ==
			
 
				+          '本科')[0].rate;
			
 
				+        this.optionData.filter(result => result.name == '专科')[0].value = +this.education.filter(result => result.name ==
			
 
				+          '专科')[0].rate;
			
 
				+        this.init();
			
 
				+      },
			
 
				+      init() {
			
 
				+        //构建3d饼状图
			
 
				+        let myChart = echarts.init(document.getElementById('cityGreenLand-charts4'));
			
 
				+        // 传入数据生成 option
			
 
				+        this.option = this.getPie3D(this.optionData, 0.8);
			
 
				+        myChart.setOption(this.option);
			
 
				+        //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
			
 
				+        this.option.series.push({
			
 
				+          name: 'pie2d',
			
 
				+          type: 'pie',
			
 
				+          labelLine: {
			
 
				+            length: 5,
			
 
				+            length2: 10
			
 
				+          },
			
 
				+          label: {
			
 
				+            formatter: '{b|{b}}\n{c}%',
			
 
				+            rich: {
			
 
				+              b: {
			
 
				+                color: '#fff',
			
 
				+                fontSize: 8,
			
 
				+              }
			
 
				+            }
			
 
				+          },
			
 
				+          startAngle: -20, //起始角度，支持范围[0, 360]。
			
 
				+          clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
			
 
				+          radius: ['20%', '50%'],
			
 
				+          center: ['50%', '50%'],
			
 
				+          data: this.optionData,
			
 
				+          itemStyle: {
			
 
				+            opacity: 0
			
 
				+          }
			
 
				+        });
			
 
				+        myChart.setOption(this.option);
			
 
				+        let optionData = this.optionData;
			
 
				+        myChart.on('mouseover', function (params) {
			
 
				+          let num = optionData.filter(result => result.name == params.seriesName);
			
 
				+          if (num.length != 0) {
			
 
				+            console.log(num[0].value)
			
 
				+            console.log()
			
 
				+            document.getElementById("number_1").innerText = num[0].value + "%"
			
 
				+          }
			
 
				+        });
			
 
				+        //	this.bindListen(myChart);
			
 
				+      },
			
 
				+
			
 
				+      getPie3D(pieData, internalDiameterRatio) {
			
 
				+        //internalDiameterRatio:透明的空心占比
			
 
				+        let that = this;
			
 
				+        let series = [];
			
 
				+        let sumValue = 0;
			
 
				+        let startValue = 0;
			
 
				+        let endValue = 0;
			
 
				+        let legendData = [];
			
 
				+        let legendBfb = [];
			
 
				+        let k = 1 - internalDiameterRatio;
			
 
				+        pieData.sort((a, b) => {
			
 
				+          return (b.value - a.value);
			
 
				+        });
			
 
				+        // 为每一个饼图数据，生成一个 series-surface 配置
			
 
				+        for (let i = 0; i < pieData.length; i++) {
			
 
				+          sumValue += pieData[i].value;
			
 
				+          let seriesItem = {
			
 
				+            name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
			
 
				+            type: 'surface',
			
 
				+            parametric: true,
			
 
				+            wireframe: {
			
 
				+              show: false
			
 
				+            },
			
 
				+            pieData: pieData[i],
			
 
				+            pieStatus: {
			
 
				+              selected: false,
			
 
				+              hovered: true,
			
 
				+              k: k
			
 
				+            },
			
 
				+            center: ['10%', '50%']
			
 
				+          };
			
 
				+
			
 
				+          if (typeof pieData[i].itemStyle != 'undefined') {
			
 
				+            let itemStyle = {};
			
 
				+            typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
			
 
				+            typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity :
			
 
				+              null;
			
 
				+            seriesItem.itemStyle = itemStyle;
			
 
				+          }
			
 
				+          series.push(seriesItem);
			
 
				+        }
			
 
				+
			
 
				+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
			
 
				+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
			
 
				+        legendData = [];
			
 
				+        legendBfb = [];
			
 
				+        for (let i = 0; i < series.length; i++) {
			
 
				+          endValue = startValue + series[i].pieData.value;
			
 
				+          series[i].pieData.startRatio = startValue / sumValue;
			
 
				+          series[i].pieData.endRatio = endValue / sumValue;
			
 
				+          // series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
			
 
				+          // 	false, false, k, series[i].pieData.value);
			
 
				+          series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData
			
 
				+            .endRatio,
			
 
				+            false, false, k, 20);
			
 
				+          startValue = endValue;
			
 
				+          let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
			
 
				+          legendData.push({
			
 
				+            name: series[i].name,
			
 
				+            value: bfb
			
 
				+          });
			
 
				+          legendBfb.push({
			
 
				+            name: series[i].name,
			
 
				+            value: bfb
			
 
				+          });
			
 
				+        }
			
 
				+        let boxHeight = this.getHeight3D(series, 20); //通过传参设定3d饼/环的高度，26代表26px
			
 
				+
			
 
				+        //let boxHeight =0.03;
			
 
				+
			
 
				+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
			
 
				+        let option = {
			
 
				+          // legend: {
			
 
				+          // 	data: legendData,
			
 
				+          // 	orient: 'horizontal',
			
 
				+          // 	left: 80,
			
 
				+          // 	bottom: 10,
			
 
				+          // 	itemGap: 10,
			
 
				+          // 	textStyle: {
			
 
				+          // 		color: '#A1E2FF',
			
 
				+          // 	},
			
 
				+          // 	show: true,
			
 
				+          // 	icon: "circle",
			
 
				+          // 	// formatter: function(param) {
			
 
				+          // 	// 	let item = legendBfb.filter(item => item.name == param)[0];
			
 
				+          // 	// 	let bfs = that.fomatFloat(item.value * 100, 2) + "%";
			
 
				+          // 	// 	return `${item.name}  ${bfs}`;
			
 
				+          // 	// }
			
 
				+          // },
			
 
				+          labelLine: {
			
 
				+            show: true,
			
 
				+            lineStyle: {
			
 
				+              color: '#7BC0CB'
			
 
				+              // color: '#ffffff'
			
 
				+            }
			
 
				+          },
			
 
				+          label: {
			
 
				+            show: true,
			
 
				+            position: 'outside',
			
 
				+            rich: {
			
 
				+              b: {
			
 
				+                // color: '#7BC0CB',
			
 
				+                color: '#ffffff',
			
 
				+                fontSize: 10,
			
 
				+                lineHeight: 15
			
 
				+              },
			
 
				+              c: {
			
 
				+                fontSize: 16,
			
 
				+              },
			
 
				+            },
			
 
				+            //	formatter: '{b|{b} \n}{c|{c}}{b|  亩}',
			
 
				+            formatter: '{b|{b} \n}{c|{c}}{b|  }',
			
 
				+          },
			
 
				+          // tooltip: {
			
 
				+          // 	formatter: params => {
			
 
				+          // 		if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
			
 
				+          // 			let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
			
 
				+          // 				100).toFixed(2);
			
 
				+          // 			return `${params.seriesName}<br/>` +
			
 
				+          // 				`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
			
 
				+          // 				`${ bfb }%`;
			
 
				+          // 		}
			
 
				+          // 	}
			
 
				+          // },
			
 
				+          xAxis3D: {
			
 
				+            min: -1,
			
 
				+            max: 1
			
 
				+          },
			
 
				+          yAxis3D: {
			
 
				+            min: -1,
			
 
				+            max: 1
			
 
				+          },
			
 
				+          zAxis3D: {
			
 
				+            min: -1,
			
 
				+            max: 1
			
 
				+          },
			
 
				+          grid3D: {
			
 
				+            show: false,
			
 
				+            boxHeight: boxHeight, //圆环的高度
			
 
				+            viewControl: { //3d效果可以放大、旋转等，请自己去查看官方配置
			
 
				+              alpha: 70, //角度
			
 
				+              distance: 300, //调整视角到主体的距离，类似调整zoom
			
 
				+              rotateSensitivity: 0, //设置为0无法旋转
			
 
				+              zoomSensitivity: 0, //设置为0无法缩放
			
 
				+              panSensitivity: 0, //设置为0无法平移
			
 
				+              autoRotate: false //自动旋转
			
 
				+            }
			
 
				+          },
			
 
				+          series: series
			
 
				+        };
			
 
				+        return option;
			
 
				+      },
			
 
				+
			
 
				+      //获取3d丙图的最高扇区的高度
			
 
				+      getHeight3D(series, height) {
			
 
				+        series.sort((a, b) => {
			
 
				+          return (b.pieData.value - a.pieData.value);
			
 
				+        })
			
 
				+        return height * 25 / series[0].pieData.value;
			
 
				+      },
			
 
				+
			
 
				+      // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
			
 
				+      getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
			
 
				+        // 计算
			
 
				+        let midRatio = (startRatio + endRatio) / 2;
			
 
				+        let startRadian = startRatio * Math.PI * 2;
			
 
				+        let endRadian = endRatio * Math.PI * 2;
			
 
				+        let midRadian = midRatio * Math.PI * 2;
			
 
				+        // 如果只有一个扇形，则不实现选中效果。
			
 
				+        if (startRatio === 0 && endRatio === 1) {
			
 
				+          isSelected = false;
			
 
				+        }
			
 
				+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
			
 
				+        k = typeof k !== 'undefined' ? k : 1 / 3;
			
 
				+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
			
 
				+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
			
 
				+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
			
 
				+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
			
 
				+        let hoverRate = isHovered ? 1.05 : 1;
			
 
				+        // 返回曲面参数方程
			
 
				+        return {
			
 
				+          u: {
			
 
				+            min: -Math.PI,
			
 
				+            max: Math.PI * 3,
			
 
				+            step: Math.PI / 32
			
 
				+          },
			
 
				+          v: {
			
 
				+            min: 0,
			
 
				+            max: Math.PI * 2,
			
 
				+            step: Math.PI / 20
			
 
				+          },
			
 
				+          x: function (u, v) {
			
 
				+            if (u < startRadian) {
			
 
				+              return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+            }
			
 
				+            if (u > endRadian) {
			
 
				+              return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+            }
			
 
				+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+          },
			
 
				+          y: function (u, v) {
			
 
				+            if (u < startRadian) {
			
 
				+              return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+            }
			
 
				+            if (u > endRadian) {
			
 
				+              return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+            }
			
 
				+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
			
 
				+          },
			
 
				+          z: function (u, v) {
			
 
				+            if (u < -Math.PI * 0.5) {
			
 
				+              return Math.sin(u);
			
 
				+            }
			
 
				+            if (u > Math.PI * 2.5) {
			
 
				+              return Math.sin(u) * h * .1;
			
 
				+            }
			
 
				+            return Math.sin(v) > 0 ? 1 * h * .1 : -1;
			
 
				+          }
			
 
				+        };
			
 
				+      },
			
 
				+
			
 
				+      fomatFloat(num, n) {
			
 
				+        var f = parseFloat(num);
			
 
				+        if (isNaN(f)) {
			
 
				+          return false;
			
 
				+        }
			
 
				+        f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂   
			
 
				+        var s = f.toString();
			
 
				+        var rs = s.indexOf('.');
			
 
				+        //判定如果是整数，增加小数点再补0
			
 
				+        if (rs < 0) {
			
 
				+          rs = s.length;
			
 
				+          s += '.';
			
 
				+        }
			
 
				+        while (s.length <= rs + n) {
			
 
				+          s += '0';
			
 
				+        }
			
 
				+        return s;
			
 
				+      },
			
 
				+
			
 
				+      bindListen(myChart) {
			
 
				+        // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
			
 
				+        let that = this;
			
 
				+        let selectedIndex = '';
			
 
				+        let hoveredIndex = '';
			
 
				+        // 监听点击事件，实现选中效果（单选）
			
 
				+        myChart.on('click', function (params) {
			
 
				+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
			
 
				+          let isSelected = !that.option.series[params.seriesIndex].pieStatus.selected;
			
 
				+          let isHovered = that.option.series[params.seriesIndex].pieStatus.hovered;
			
 
				+          let k = that.option.series[params.seriesIndex].pieStatus.k;
			
 
				+          let startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
			
 
				+          let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
			
 
				+          // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
			
 
				+          if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
			
 
				+            that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
			
 
				+                selectedIndex].pieData
			
 
				+              .startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option
			
 
				+              .series[
			
 
				+                selectedIndex].pieData
			
 
				+              .value);
			
 
				+            that.option.series[selectedIndex].pieStatus.selected = false;
			
 
				+          }
			
 
				+          // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
			
 
				+          that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio,
			
 
				+            endRatio,
			
 
				+            isSelected,
			
 
				+            isHovered, k, that.option.series[params.seriesIndex].pieData.value);
			
 
				+          that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
			
 
				+          // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
			
 
				+          isSelected ? selectedIndex = params.seriesIndex : null;
			
 
				+          // 使用更新后的 option，渲染图表
			
 
				+          myChart.setOption(that.option);
			
 
				+        });
			
 
				+        // 监听 mouseover，近似实现高亮（放大）效果
			
 
				+        myChart.on('mouseover', function (params) {
			
 
				+          // 准备重新渲染扇形所需的参数
			
 
				+          let isSelected;
			
 
				+          let isHovered;
			
 
				+          let startRatio;
			
 
				+          let endRatio;
			
 
				+          let k;
			
 
				+          // 如果触发 mouseover 的扇形当前已高亮，则不做操作
			
 
				+          if (hoveredIndex === params.seriesIndex) {
			
 
				+            return;
			
 
				+            // 否则进行高亮及必要的取消高亮操作
			
 
				+          } else {
			
 
				+            // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
			
 
				+            if (hoveredIndex !== '') {
			
 
				+              // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
			
 
				+              isSelected = that.option.series[hoveredIndex].pieStatus.selected;
			
 
				+              isHovered = false;
			
 
				+              startRatio = that.option.series[hoveredIndex].pieData.startRatio;
			
 
				+              endRatio = that.option.series[hoveredIndex].pieData.endRatio;
			
 
				+              k = that.option.series[hoveredIndex].pieStatus.k;
			
 
				+              // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
			
 
				+              that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
			
 
				+                isSelected,
			
 
				+                isHovered, k, that.option.series[hoveredIndex].pieData.value);
			
 
				+              that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
			
 
				+              // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
			
 
				+              hoveredIndex = '';
			
 
				+            }
			
 
				+            // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
			
 
				+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
			
 
				+              // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
			
 
				+              isSelected = that.option.series[params.seriesIndex].pieStatus.selected;
			
 
				+              isHovered = true;
			
 
				+              startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
			
 
				+              endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
			
 
				+              k = that.option.series[params.seriesIndex].pieStatus.k;
			
 
				+              // 对当前点击的扇形，执行高亮操作（对 option 更新）
			
 
				+              that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio,
			
 
				+                endRatio,
			
 
				+                isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5);
			
 
				+              that.option.series[params.seriesIndex].pieStatus.hovered = isHovered;
			
 
				+              // 记录上次高亮的扇形对应的系列号 seriesIndex
			
 
				+              hoveredIndex = params.seriesIndex;
			
 
				+            }
			
 
				+            // 使用更新后的 option，渲染图表
			
 
				+            myChart.setOption(that.option);
			
 
				+          }
			
 
				+        });
			
 
				+        // 修正取消高亮失败的 bug
			
 
				+        myChart.on('globalout', function () {
			
 
				+          // 准备重新渲染扇形所需的参数
			
 
				+          let isSelected;
			
 
				+          let isHovered;
			
 
				+          let startRatio;
			
 
				+          let endRatio;
			
 
				+          let k;
			
 
				+          if (hoveredIndex !== '') {
			
 
				+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
			
 
				+            isSelected = that.option.series[hoveredIndex].pieStatus.selected;
			
 
				+            isHovered = false;
			
 
				+            k = that.option.series[hoveredIndex].pieStatus.k;
			
 
				+            startRatio = that.option.series[hoveredIndex].pieData.startRatio;
			
 
				+            endRatio = that.option.series[hoveredIndex].pieData.endRatio;
			
 
				+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
			
 
				+            that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
			
 
				+              isSelected,
			
 
				+              isHovered, k, that.option.series[hoveredIndex].pieData.value);
			
 
				+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
			
 
				+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
			
 
				+            hoveredIndex = '';
			
 
				+          }
			
 
				+          // 使用更新后的 option，渲染图表
			
 
				+          myChart.setOption(that.option);
			
 
				+        });
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+</script>
			
 
				+<style scoped>
			
 
				+  .water-eval-container {
			
 
				+    position: absolute;
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    top: -30%;
			
 
				+    right:  130%
			
 
				+  }
			
 
				+
			
 
				+  .cityGreenLand-charts {
			
 
				+    height: 300px;
			
 
				+    width: 600px;
			
 
				+  }
			
 
				+
			
 
				+  .num {
			
 
				+    position: absolute;
			
 
				+    width: 30%;
			
 
				+    height: 15%;
			
 
				+    right: -75%;
			
 
				+    top: 75%;
			
 
				+    font-weight: bold;
			
 
				+    /* background-color: rgb(255, 0, 0,0.3); */
			
 
				+    font-size: 35px;
			
 
				+  }
			
 
				+
			
 
				+  @media screen and (max-height: 1000px) {
			
 
				+    .water-eval-container {
			
 
				+    position: absolute;
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    top: -40%;
			
 
				+    right:  130%
			
 
				+  }
			
 
				+    .cityGreenLand-charts {
			
 
				+      height: 400px;
			
 
				+      width: 800px;
			
 
				+    }
			
 
				+
			
 
				+    .num {
			
 
				+      position: absolute;
			
 
				+      width: 30%;
			
 
				+      height: 15%;
			
 
				+      right: -84%;
			
 
				+      top: 85%;
			
 
				+      font-weight: bold;
			
 
				+      /* background-color: rgb(255, 0, 0,0.3); */
			
 
				+      font-size: 35px;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+</style>
			
--- a/shuzhixiangzheng/src/components/ZheJiPage.vue
+++ b/shuzhixiangzheng/src/components/ZheJiPage.vue
@@ -115,14 +115,11 @@ export default {
 
				       // console.log('当前页改变了', val)
			
 
				       this.myData.pageNum = val;
			
 
				       jinghuguoji_httpGet(
			
 
				-        // console.log(999999999999,this.myNum),
			
 
				         { ...this.myData, buildingNumber: this.myNum },
			
 
				         (result) => {
			
 
				           this.houseNum = this.myNum + "橦";
			
 
				           this.yjs_tableData = result.data.data.list;
			
 
				           this.totle = result.data.data.total;
			
 
				-
			
 
				-          // this.yjs_tableData.num=
			
 
				         },
			
 
				         () => {}
			
 
				       );
			
@@ -147,14 +144,11 @@ export default {
 
				     lxw_changeHouse() {
			
 
				       let house1sCode = [1, 20];
			
 
				 
			
 
				-      // document.getElementById("form_img").src="./png/laoxianweisushe/"+c+".png";
			
 
				       jinghuguoji_httpGet(
			
 
				         { ...this.myData, buildingNumber: 1 },
			
 
				         (result) => {
			
 
				           this.houseNum = "1" + "橦";
			
 
				-          // console.log(11111111111, result);
			
 
				           this.total = result.data.data.total;
			
 
				-          // console.log(9999,this.total)
			
 
				           this.yjs_tableData = result.data.data.list;
			
 
				         },
			
 
				         () => {}
			
@@ -164,40 +158,19 @@ export default {
 
				           .getElementById("building_" + c)
			
 
				           .addEventListener("click", () => {
			
 
				             this.myNum=c,
			
 
				-            // document.getElementById("form_img").src="./png/laoxianweisushe/"+c+".png";
			
 
				               this.myData.pageNum = 1,
			
 
				             jinghuguoji_httpGet(
			
 
				               { ...this.myData, buildingNumber: c},
			
 
				               (result) => {
			
 
				-                // console.log(2222222222, result.data.data.total);
			
 
				                 this.houseNum = c + "橦";
			
 
				                 this.yjs_tableData = result.data.data.list;
			
 
				                 this.total = result.data.data.total;
			
 
				-                //  console.log(9999,this.total)
			
 
				-                // this.yjs_tableData.num=
			
 
				               },
			
 
				               () => {}
			
 
				             );
			
 
				           });
			
 
				       });
			
 
				     },
			
 
				-    addDataToTable() {
			
 
				-      //  var currentData = [];
			
 
				-      // for (let i = 0; i < 5; i++) {
			
 
				-      //   currentData.push(this.yjs_tableData[this.currentTableIndex * 5 + i]);
			
 
				-      // }
			
 
				-      // this.yjs_tableData;
			
 
				-      // let tbody = document.getElementById("tbody");
			
 
				-      // for (let i = 0; i < currentData.length; i++) {
			
 
				-      //   let tr = document.createElement("tr");
			
 
				-      //   tbody.appendChild(tr);
			
 
				-      //   for (let j in currentData[i]) {
			
 
				-      //     let td = document.createElement("td");
			
 
				-      //     td.innerHTML = currentData[i][j];
			
 
				-      //   }
			
 
				-      // }
			
 
				-      // document.getElementById("yjxs_table");
			
 
				-    },
			
 
				   },
			
 
				 };
			
 
				 </script>
			
--- a/shuzhixiangzheng/src/main.js
+++ b/shuzhixiangzheng/src/main.js
@@ -4,14 +4,19 @@ import Vue from 'vue'
 
				 import App from './App'
			
 
				 import router from './router'
			
 
				 import ElementUI from 'element-ui';
			
 
				-
			
 
				+import  echarts from 'echarts';
			
 
				+import  'echarts-gl';
			
 
				 import 'element-ui/lib/theme-chalk/index.css';
			
 
				+import store from "./store"
			
 
				+
			
 
				 Vue.config.productionTip = false
			
 
				 Vue.use(ElementUI);
			
 
				+Vue.prototype.$echarts = echarts
			
 
				 /* eslint-disable no-new */
			
 
				 new Vue({
			
 
				   el: '#app',
			
 
				   router,
			
 
				+  store,
			
 
				   components: { App },
			
 
				   template: '<App/>'
			
 
				 })
			
--- a/shuzhixiangzheng/src/store/index.js
+++ b/shuzhixiangzheng/src/store/index.js
@@ -0,0 +1,39 @@
 
				+import Vue from 'vue';
			
 
				+import Vuex from 'vuex';
			
 
				+Vue.use(Vuex);
			
 
				+const store = new Vuex.Store({
			
 
				+        state:{  //全局访问对象
			
 
				+           szdata:{},
			
 
				+           dazhongdata:{},
			
 
				+           jinghuguoji:{}
			
 
				+        },
			
 
				+        getters: {
			
 
				+            getSzdata: state =>{
			
 
				+               return state.szdata
			
 
				+            } ,
			
 
				+            getDaZhongdata: state =>{
			
 
				+               return state.dazhongdata
			
 
				+            } ,
			
 
				+            getJinghuguoji:state=>{
			
 
				+               return state.jinghuguoji
			
 
				+            }
			
 
				+        },      
			
 
				+        mutations: {         
			
 
				+        setSzdata(state,value){ 
			
 
				+          state.szdata = value  
			
 
				+         } ,
			
 
				+         setDaZhongdata(state,value){
			
 
				+            state.dazhongdata = value
			
 
				+         },
			
 
				+         setJinghuguoji(state,value){
			
 
				+            state.jinghuguoji = value
			
 
				+         }      
			
 
				+         },
			
 
				+         actions:{
			
 
				+             
			
 
				+         }
			
 
				+});
			
 
				+ 
			
 
				+export default store;
			
 
				+
			
 
				+
			
--- a/shuzhixiangzheng/static/config.js
+++ b/shuzhixiangzheng/static/config.js
@@ -0,0 +1,2 @@
 
				+//后端接口地址
			
 
				+window.BASE_URL="http://101.132.109.234:8099/"
Auteur	SHA1 Message	Date
DR/4DAGE	5375ac821d m	il y a 3 ans
DR/4DAGE	a29689ef41 mm	il y a 3 ans
DR/4DAGE	2c82f7f1d7 m	il y a 3 ans
DR/4DAGE	afb7981990 m	il y a 3 ans
DR/4DAGE	982ee2486b 修改	il y a 3 ans