mm

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>

shuzhixiangzheng/src/assets/api/charts.js

@@ -26,24 +26,24 @@ export function chart_canbao(value1,value2,value3,value4) {
     series: [{
         name: 'Access From',
         type: 'pie',
-        radius: ['55%', '60%'],
+        radius: ['75%', '80%'],
         avoidLabelOverlap: false,
         label: {
           show: false,
+          formatter: '{c}%',
           position: 'center'
         },
-        emphasis: {
-          label: {
-            show: true,
-            fontSize: '10',
-            fontWeight: 'bold'
-          }
-        },
+        // emphasis: {
+        //   label: {
+        //     show: true,
+        //     fontSize: '10',
+        //     fontWeight: 'bold'
+        //   }
+        // },
         labelLine: {
-          show: false
+          show: true
         },
         data: [
-
           {
               name:"医保参保",
             value: value1,
@@ -67,19 +67,23 @@ export function chart_canbao(value1,value2,value3,value4) {
       {
         name: 'Access From',
         type: 'pie',
-        radius: ['43%', '48%'],
+        radius: ['63%', '68%'],
         avoidLabelOverlap: false,
         label: {
           show: false,
-          position: 'center'
+          position:'center',
+          formatter: '{c}%',
         },
-        emphasis: {
-          label: {
-            show: true,
-            fontSize: '10',
-            fontWeight: 'bold'
-          }
+        labelLayout:{
+          y:"10%"
         },
+        // emphasis: {
+        //   label: {
+        //     show: true,
+        //     fontSize: '10',
+        //     fontWeight: 'bold'
+        //   }
+        // },
         labelLine: {
           show: false
         },

shuzhixiangzheng/src/components/MainPage.vue

@@ -10,7 +10,7 @@
 
         <div id="left_div">
             <img class="menu" src="../assets/png/1.png"></img>
-                <ShunagzhongViewPage ></ShunagzhongViewPage>
+                <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>
@@ -30,7 +30,7 @@
           <VaccinationPage></VaccinationPage>
        </div>
 
-        <div id="click" v-on:click="to3DMap">
+        <div id="click" class="click_class" v-on:click="to3DMap">
         </div>
 
         <div class="click_class" id="click_1" v-on:click="toZheji">
@@ -71,19 +71,19 @@
 <script>
   import Time from "./Time.vue"
   import PersonStatusPage from "./MainPageChild/PersonStatusPage.vue"
-  import ShunagzhongViewPage from "./MainPageChild/ShunagzhongViewPage.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} from "../assets/api/loadData.js"
+  import {SZZSY_httpGet,SZZSQSY_httpGet,SZZXQ_httpGet} from "../assets/api/loadData.js"
 export default {
   name: 'MainPage',
   components:{
     Time,
     PersonStatusPage,
-    ShunagzhongViewPage,
+    ViewPage,
     InsuredPage,
     KeyPopulationPage,
     EmploymentSituation,
@@ -93,82 +93,8 @@ export default {
   },
   data () {
     return {
-      //双钟数据
-      // index: {
-      //   peoples:10000,
-      //   households:10000,
-      //   villages:10000,
-      //   buildings:10000,
-      //   villagesWithCompany:10000,
-      //   villagesWithoutCompany:10000
-      // },
-        data:{
-        important:{                        // -- 重点人群
-            specialCare:165,            //优抚对象
-            alone:455,            		//独居户
-            member:927,			//党员人数
-            basicAllowance:1336,	//低保对象
-            deformed:1102                 //残疾人
-        },
-        vaccin:{				// -- 疫苗接种情况
-            allRate:94.27,		//总接种率
-            total:73518,			//疫苗接种总数
-            eighteenRate:93.96,	//18岁以上接种率
-            threeToTwelveRate:93.96, 	//3-12岁以上接种率
-            TwelveToEighteenRate:93.44	//12-18岁以上接种率
-        },
-        education:[				// -- 教育程度
-            {
-                rate:0.98,			//比例
-               num:454,			//人数
-                name:"文盲",		//名称
-                id:1518			
-            }
-        ],
-        school:[			// -- 在校生情况
-            {
-                rate:8.73,		//比例
-                num:2101,		//人数
-                name:"学龄前",	//类型
-                id:1513
-            }
-        ],
-        index:{				// -- 概况
-            peoples:1,	//在籍人数
-            villages:42,		//小区数量
-            villagesWithCompany:33,	//由物业小区
-            buildings:8049,			//建筑数量
-            households:23653,			//户数
-            villagesWithoutCompany:8		//无物业小区
-        },
-        working:{					// -- 就业情况
-            privateRate:"48.76",		//自主就业
-            noWorkingRate:"11.18",		//无业
-            retireRate:"9.08",			//退休
-            publicRate:"2.08",			//公职
-            companyRate:"28.89"		    //企业员工
-        },
-        insure:[					// -- 参保情况
-            {
-                rate:99.94,		//比例
-                name:"医保参保",		//类型
-                sum:1599			  //数量
-            },
-            {
-                rate:"96.5", 
-                name:"社保参保",
-                sum:1544
-            }
-        ],
-        population:[              // -- 人口情况
-            {
-                name:"大中社区",   //社区名称
-                floatPeople:501,	//流动人口
-                household:893,		//户数
-                people:2200		  //人数
-            }
-        ]
-    }      
+     
+         
     }
   },
   created(){
@@ -176,10 +102,6 @@ export default {
   },
   mounted(){
     this.change();
-    this.$nextTick(() => {
-      this.getData();
-    });
-   
   },
   methods:{
     
@@ -187,15 +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);
+           
           });
-    }
+      }
     },
-    getData(){
-      SZZSY_httpGet(result=>{
-        this.data=result.data;
-        this.$store.commit('setSzdata',this.data);   
-      },reuslt=>{})
+    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(()=>{

shuzhixiangzheng/src/components/MainPageChild/EducationPage.vue

@@ -10,33 +10,33 @@
       <div id="table_body">
         <tr id="tr_class">
             <td class="educate_type">学龄前</td>
-            <td class="educate_num">1011</td>
-            <td class="educate_num1">1%</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">1000</td>
-          <td class="educate_num1">1%</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">1000</td>
-              <td class="educate_num1">1%</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">1000</td>
-              <td class="educate_num1">1%</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">1000</td>
-              <td class="educate_num1">1%</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">1000</td>
-              <td class="educate_num1">1%</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>
@@ -60,10 +60,90 @@
       },
       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:{
@@ -73,7 +153,105 @@
 </script>
     
  <style scoped>
-     #back_div1{
+
+
+    #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%;
@@ -167,5 +345,6 @@
         left: 55%;
         /* background-color: rgb(10,98,197,0.2); */
      }
+  }
 </style>
     

shuzhixiangzheng/src/components/MainPageChild/EmploymentSituation.vue

@@ -1,7 +1,10 @@
 <template>
     <div id="employmentSituation">
         <img class="ring_background_png" src="../../assets/png/ring_background.png"></img>
-      <ThreeDCharts></ThreeDCharts>
+        <div id="chart_1">
+          <ThreeDCharts></ThreeDCharts>
+        </div>
+      
       
     </div>
 </template>
@@ -30,6 +33,24 @@
     
     
  <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%;

shuzhixiangzheng/src/components/MainPageChild/InsuredPage.vue

@@ -1,84 +1,134 @@
 <template>
-    <div id="insuredPage">
-        <div id="myChart"></div>
-        <!-- <div id="legend">
-            <div class="color1"></div>
-            <div class="color2"></div>
-            <div class="font1">医保参保</div>
-            <div class="font2">社保参保</div>
-        </div> -->
-    </div>
+  <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 {
-          msg: '',
-        }
-      },
-      mounted(){
-        this.chart();
-      },
-      methods:{
-        chart(){
+  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(80,100,50,100));   
-        }
+            myChart.setOption(chart_canbao(this.sb[0].rate, 0, this.yb[0].rate, 0));
+            clearInterval(clear)
+          }
+        }, 500);
+
       }
     }
+  }
+
 </script>
-    
-    
+
+
 <style scoped>
-  .font1{
+  #yb {
     position: absolute;
-    font-size: 10px;
-	-webkit-transform: scale(0.8);
-    left: 72%;
-    top:46%;
+    width: 15%;
+    height: 15%;
+    top: 35%;
+    left: 13%;
+    font-size: 12px;
+    color: rgb(250, 207, 44);
+    font-weight: bold;
+    
   }
-  .font2{
+
+  #sb {
     position: absolute;
-    font-size: 10px;
-    -webkit-transform: scale(0.8);
-    left: 72%;
-    top:58%;
+    width: 15%;
+    height: 15%;
+    top: 53%;
+    left: 13%;
+    font-size: 12px;
+    color: rgb(55, 180, 164);
+    font-weight: bold;
+ 
   }
-  .color1{
+
+  #insuredPage {
     position: absolute;
-    width: 10%;
-    height: 3%;
-    background-color: rgb(55,180,164);
-    left: 60%;
-    top:60%
+    width: 100%;
+    height: 18%;
+    bottom: 1%;
+
   }
-  .color2{
+
+  #myChart {
     position: absolute;
-    width: 10%;
-    height: 3%;
-    background-color: rgb(250,205,38);
-    left: 60%;
-    top:50%
+    width: 100%;
+    height: 100%;
+    left: -30%;
+    /* background-color: rgb(0, 0, 255,0.3); */
   }
-      #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>
-    

shuzhixiangzheng/src/components/MainPageChild/KeyPopulationPage.vue

@@ -49,7 +49,7 @@
       },
       mounted(){
         let clear= setInterval(() => {
-          if(this.$store.getters.getSzdata.code===10000) {
+          if(this.$store.getters.getSzdata.code===10000&&this.$store.getters.getSzdata.data.important) {
             this.important=this.$store.getters.getSzdata.data.important
             clearInterval(clear)
           }

shuzhixiangzheng/src/components/MainPageChild/PersonStatusPage.vue

@@ -1,138 +1,148 @@
 <template>
-  <div id="personStatusPage" >
-    <!-- <div id="head">
-      <div class="font">流动人口</div>
-      <div class="font">户数</div>
-      <div class="font">人数</div>
-      <div></div>
-      <div></div>
-      <div></div>
-    </div> -->
-    <div id="row" v-for="(floatPeople,name,household,people) in population">
-      <td id="num1">{{floatPeople}}</td>
-      <td>
-        <div id="progress_container0">
-        </div>
-      </td>
-      <td id="num2">
-        {{name}}
-      </td>
-       <td>
-         <div id="progress_both">
-          <div id="progress_container1">
-          </div>
-          <div id="progress_container2"></div>
-         </div>
-      </td>
-      <td id="num3">
-        {{household}}/{{people}}
-      </td>
+  <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>
-   
+</template>
+
+<script>
   export default {
     name: 'PersonStatusPage',
-    components:{
+    components: {
 
     },
-    data () {
+    data() {
       return {
-          population:[              // -- 人口情况
-            {
-                name:"大中社区",   //社区名称
-                floatPeople:501,	//流动人口
-                household:893,		//户数
-                people:2200		  //人数
-            },
-        ],
-        str:""
+        population: [ // -- 人口情况
+          {
+            name: "大中社区", //社区名称
+            floatPeople: 501, //流动人口
+            household: 893, //户数
+            people: 2200 //人数
+          },
+        ],
       }
     },
-    mounted(){
-      this.str=this.population[0].household+"/"+this.population[0].people;
-      let clear= setInterval(() => {
-          if(this.$store.getters.getSzdata.code===10000) {
-            this.population=this.$store.getters.getSzdata.data.population
-            console.log(this.population)
-            clearInterval(clear)
-          }
-        }, 500);
+    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:{
-      
-    
+    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{
-      position: absolute;
-      width: 100%;
-      height: 100%;
-    }
-       #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{
-      left: 25%;
-      top:2%;
-      position: absolute;
-      width: 15%;
-      height: 5px;
-      background-color: rgb(48,115,248);
-    }
-    #progress_container1{
-      position: absolute;
-      width: 100%;
-      height: 5px;
-      background-color: rgb(55,179,163);
-    }
-    #progress_container2{
-      position: absolute;
-      width: 10%;
-      height: 5px;   
-      background-color: rgb(245,199,49);
-    }
-  </style>
-  
+</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>

shuzhixiangzheng/src/components/MainPageChild/VaccinationPage.vue

@@ -7,16 +7,16 @@
       <img class="yq_border_img" id="img5" src="../../assets/png/yq_border.png"></img>
 
         <span id="ym_name1">疫苗接种</span>
-        <span id="ym_num">10000</span>
+        <span id="ym_num">{{vaccin.total}}</span>
         <span id="ym_name2">疫苗总接种率</span>
-        <span id="ym_num1">90.99%</span>
+        <span id="ym_num1">{{vaccin.allRate}}%</span>
 
         <span id="ym_name3">3-12岁疫苗接种率</span>
-        <span id="ym_num2">90.34%</span>
+        <span id="ym_num2">{{vaccin.threeToTwelveRate}}%</span>
         <span id="ym_name4">12-18岁疫苗接种率</span>
-        <span id="ym_num3">99.99%</span>
+        <span id="ym_num3">{{vaccin.TwelveToEighteenRate}}%</span>
         <span id="ym_name5">18岁以上疫苗接种率</span>
-        <span id="ym_num4">96.06%</span>
+        <span id="ym_num4">{{vaccin.eighteenRate}}%</span>
     </div>
 </template>
     
@@ -28,11 +28,22 @@
       },
       data () {
         return {
-          msg: '',
+           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:{
         

shuzhixiangzheng/src/components/MainPageChild/ShunagzhongViewPage.vue

@@ -45,7 +45,7 @@
     <script>
      
     export default {
-      name: 'ShunagzhongView',
+      name: 'View',
       // props: ['szdata'],
       components:{
   
@@ -63,9 +63,12 @@
         }
       },
       mounted(){
+        
       let clear= setInterval(() => {
-          if(this.$store.getters.getSzdata.code===10000) {
+        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);
@@ -82,6 +85,7 @@
         position: absolute;
         width: 100%;
         height: 100%;
+        color: #ffffff;
      }
   .sign_png{
     position: absolute;

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>
+  

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>
+    

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>
+  

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>

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>
+  

shuzhixiangzheng/src/components/Utils/ThreeDCharts.vue

@@ -1,447 +1,530 @@
 <template>
-	<div class="water-eval-container">
-		<div class="cityGreenLand-charts" id="cityGreenLand-charts">
-		</div>
-	</div>
+  <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 {
-				optionData: [{
-					name: '公职人员数',
-					value: 10000,
-					itemStyle: {  
-						 //color: '#01D2AA',
-						 color:'rgba(1,210,170,0.8)'
-					}
-				}, {
-					name: '自主就业',
-					value: 12116,
-					itemStyle: {   
-						//color: '#0F8BF6'
-						color:'rgba(15,139,246,0.8)'
-					}
-				}, 
-				{
-					name: '企业员工',
-					value: 10106,
-					itemStyle: {    
-					//	color: '#FBB135'
-					color:'rgba( 214,215,1,0.8)'
-					}
-				},
-				{
-					name: '无业',
-					value: 1616,
-					itemStyle: {  
-					//	color: '#D17356'
-					color:'rgba( 255,174,45,0.8)'
-					}
-				},
-				{
-					name: '退休',
-					value: 6616,
-					itemStyle: {  
-					//	color: '#D17356'
-					color:'rgba( 217,111,87,0.8)'
-					}
-				}],
-			}
-		},
-		mounted() {
-			this.$nextTick(function() {
-				this.init();
-			});
-		},
-		methods: {
-			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
-				// 	}
-				// });
-				// myChart.setOption(this.option);
-				// this.bindListen(myChart);
-			},
+  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|  亩}',
 
-			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%']
-					};
+          },
+          // 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 }%`;
+          // 		}
+          // 	}
+          // },
 
-					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);
-				}
+          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;
+      },
 
-				// 使用上一次遍历时，计算出的数据和 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, 8000);
-					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|  亩}',
+      //获取3d丙图的最高扇区的高度
+      getHeight3D(series, height) {
+        series.sort((a, b) => {
+          return (b.pieData.value - a.pieData.value);
+        })
+        return height * 25 / series[0].pieData.value;
+      },
 
-					},
-					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;
-			},
+      // 生成扇形的曲面参数方程，用于 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;
+          }
+        };
+      },
 
-			//获取3d丙图的最高扇区的高度
-			getHeight3D(series, height) {
-				series.sort((a, b) => {
-					return (b.pieData.value - a.pieData.value);
-				})
-				return height * 25 / series[0].pieData.value;
-			},
+      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;
+      },
 
-			// 生成扇形的曲面参数方程，用于 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;
-					}
-				};
-			},
+      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);
+        });
+      }
+    }
+  }
 
-			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:-80%;
-		left:-26%
-	}
-	.cityGreenLand-charts {
-		height: 400px;
-		width: 800px;
-	}
-</style>
+  .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>

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>

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>

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>

shuzhixiangzheng/src/store/index.js

@@ -3,19 +3,31 @@ import Vuex from 'vuex';
 Vue.use(Vuex);
 const store = new Vuex.Store({
         state:{  //全局访问对象
-           szdata:{}
+           szdata:{},
+           dazhongdata:{},
+           jinghuguoji:{}
         },
         getters: {
             getSzdata: state =>{
                return state.szdata
-            } 
+            } ,
+            getDaZhongdata: state =>{
+               return state.dazhongdata
+            } ,
+            getJinghuguoji:state=>{
+               return state.jinghuguoji
+            }
         },      
-        mutations: {    
-        //set方法       
+        mutations: {         
         setSzdata(state,value){ 
           state.szdata = value  
-          console.log(value) 
-         }           
+         } ,
+         setDaZhongdata(state,value){
+            state.dazhongdata = value
+         },
+         setJinghuguoji(state,value){
+            state.jinghuguoji = value
+         }      
          },
          actions:{