首页 发现 帮助
注册 登录
shaogen1995
/
jiangxiSZ
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

m

DR/4DAGE 3 年之前
父节点
982ee2486b
当前提交
afb7981990
共有 23 个文件被更改，包括 1559 次插入 和 82 次删除
分列视图 显示文件统计
  1. 2 0
      shuzhixiangzheng/index.html
  2. 32 0
      shuzhixiangzheng/package-lock.json
  3. 4 2
      shuzhixiangzheng/package.json
  4. 109 0
      shuzhixiangzheng/src/assets/api/charts.js
  5. 18 11
      shuzhixiangzheng/src/assets/api/loadData.js
  6. 10 1
      shuzhixiangzheng/src/assets/api/urls.js
  7. 二进制
      shuzhixiangzheng/src/assets/png/green.png
  8. 二进制
      shuzhixiangzheng/src/assets/png/ring_background.png
  9. 二进制
      shuzhixiangzheng/src/assets/png/yellow.png
  10. 95 5
      shuzhixiangzheng/src/components/MainPage.vue
  11. 108 10
      shuzhixiangzheng/src/components/MainPageChild/EducationPage.vue
  12. 17 8
      shuzhixiangzheng/src/components/MainPageChild/EmploymentSituation.vue
  13. 59 14
      shuzhixiangzheng/src/components/MainPageChild/InsuredPage.vue
  14. 3 3
      shuzhixiangzheng/src/components/MainPageChild/KeyPopulationPage.vue
  15. 5 5
      shuzhixiangzheng/src/components/MainPageChild/PersonStatusPage.vue
  16. 21 13
      shuzhixiangzheng/src/components/MainPageChild/ShunagzhongViewPage.vue
  17. 130 9
      shuzhixiangzheng/src/components/MainPageChild/VaccinationPage.vue
  18. 447 0
      shuzhixiangzheng/src/components/Utils/ThreeDCharts.vue
  19. 453 0
      shuzhixiangzheng/src/components/Utils/ThreeDCharts1.vue
  20. 6 1
      shuzhixiangzheng/src/main.js
  21. 8 0
      shuzhixiangzheng/src/store/index.js
  22. 30 0
      shuzhixiangzheng/src/store/module/szgk.js
  23. 2 0
      shuzhixiangzheng/static/config.js

+ 2 - 0
shuzhixiangzheng/index.html
查看文件 

@@ -8,7 +8,9 @@
 
       @import url(./static/Cesium/Widgets/widgets.css);
 
  
     </style>
 
+     <script src="./static/config.js"></script>
 
     <script src="./static/Cesium/Cesium.js"></script>
 
+   
   </head>
 
   <body>
 
     <div id="app"></div>

+ 32 - 0
shuzhixiangzheng/package-lock.json
查看文件 

@@ -2505,6 +2505,11 @@
 
         }
 
       }
 
     },
 
+    "claygl": {
 
+      "version": "1.3.0",
 
+      "resolved": "https://registry.npmjs.org/claygl/-/claygl-1.3.0.tgz",
 
+      "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
 
+    },
 
     "clean-css": {
 
       "version": "4.2.4",
 
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz",
 
@@ -4467,6 +4472,23 @@
 
         "safer-buffer": "^2.1.0"
 
       }
 
     },
 
+    "echarts": {
 
+      "version": "4.9.0",
 
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
 
+      "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
 
+      "requires": {
 
+        "zrender": "4.3.2"
 
+      }
 
+    },
 
+    "echarts-gl": {
 
+      "version": "1.1.2",
 
+      "resolved": "https://registry.npmjs.org/echarts-gl/-/echarts-gl-1.1.2.tgz",
 
+      "integrity": "sha512-EVGx9RS2eMzaCgAMJSDCeLId4g8oFCFn78Fdh+0xIXASiZw/gPnJqr1vQgnQhmXhiUKixkIhIzfdc//qrct/Hg==",
 
+      "requires": {
 
+        "claygl": "^1.2.1",
 
+        "zrender": "^4.0.4"
 
+      }
 
+    },
 
     "editorconfig": {
 
       "version": "0.15.3",
 
       "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
 
@@ -14339,6 +14361,11 @@
 
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
 
       "dev": true
 
     },
 
+    "vuex": {
 
+      "version": "3.6.2",
 
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
 
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw=="
 
+    },
 
     "w3c-hr-time": {
 
       "version": "1.0.2",
 
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
 
@@ -15885,6 +15912,11 @@
 
         "buffer-crc32": "~0.2.3",
 
         "fd-slicer": "~1.1.0"
 
       }
 
+    },
 
+    "zrender": {
 
+      "version": "4.3.2",
 
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
 
+      "integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
 
     }
 
   }
 
 }

+ 4 - 2
shuzhixiangzheng/package.json
查看文件 

@@ -14,10 +14,12 @@
 
   },
 
   "dependencies": {
 
     "axios": "^0.25.0",
 
-    "echarts": "^5.3.0",
 
+    "echarts": "^4.9.0",
 
+    "echarts-gl": "^1.1.2",
 
     "element-ui": "^2.15.6",
 
     "vue": "^2.5.2",
 
-    "vue-router": "^3.0.1"
 
+    "vue-router": "^3.0.1",
 
+    "vuex": "^3.6.2"
 
   },
 
   "devDependencies": {
 
     "autoprefixer": "^7.1.2",

+ 109 - 0
shuzhixiangzheng/src/assets/api/charts.js
查看文件 

@@ -0,0 +1,109 @@
 
+/**
 
+ * 首页 参保情况环状图
 
+ * @param {*} value1    占比数量值
 
+ * @param {*} value2    总值
 
+ * @param {*} value3    占比数量值
 
+ * @param {*} value4    总值
 
+ * @returns 
+ */
 
+export function chart_canbao(value1,value2,value3,value4) {
 
+  return  {
 
+    // tooltip: {
 
+    //   trigger: 'item'
 
+    // },
 
+    // legend: {
 
+    //    // name:"22",
 
+    //     orient: 'vertical',
 
+    //    // right: 10,
 
+    //     top: 'center',
 
+    //     //data:["111"]
 
+    //     // x: '35%',
 
+    //     // top:'27%',
 
+    //    //  itemHeight: 10,//图例的高度
 
+    //     // itemGap:1,//图例之间的间距
 
+    //      data:['医保参保','\n','社保参保']
 
+    // },
 
+    series: [{
 
+        name: 'Access From',
 
+        type: 'pie',
 
+        radius: ['55%', '60%'],
 
+        avoidLabelOverlap: false,
 
+        label: {
 
+          show: false,
 
+          position: 'center'
 
+        },
 
+        emphasis: {
 
+          label: {
 
+            show: true,
 
+            fontSize: '10',
 
+            fontWeight: 'bold'
 
+          }
 
+        },
 
+        labelLine: {
 
+          show: false
 
+        },
 
+        data: [
 
+
 
+          {
 
+              name:"医保参保",
 
+            value: value1,
 
+            itemStyle: {
 
+              normal: {
 
+                color: 'rgb(55,180,164)'
 
+              }
 
+            }
 
+          },
 
+          {
 
+            // name:"2",
 
+            value: value2,
 
+            itemStyle: {
 
+              normal: {
 
+                color: 'transparent'
 
+              }
 
+            }
 
+          }
 
+        ]
 
+      },
 
+      {
 
+        name: 'Access From',
 
+        type: 'pie',
 
+        radius: ['43%', '48%'],
 
+        avoidLabelOverlap: false,
 
+        label: {
 
+          show: false,
 
+          position: 'center'
 
+        },
 
+        emphasis: {
 
+          label: {
 
+            show: true,
 
+            fontSize: '10',
 
+            fontWeight: 'bold'
 
+          }
 
+        },
 
+        labelLine: {
 
+          show: false
 
+        },
 
+        data: [{
 
+            name:"社保参保",
 
+            value: value3,
 
+            itemStyle: {
 
+              normal: {
 
+                color: 'rgb(250,205,38)'
 
+              }
 
+            }
 
+          },
 
+          {
 
+            value: value4,
 
+            itemStyle: {
 
+              normal: {
 
+                color: 'transparent'
 
+              }
 
+            }
 
+          }
 
+        ]
 
+      }
 
+    ]
 
+  };
 
+}
 
+
 
+

+ 18 - 11
shuzhixiangzheng/src/assets/api/loadData.js
查看文件 

@@ -1,8 +1,7 @@
 
 import axios  from "axios";
 
-import { SZZ_URL } from "./urls";
 
-const base_url="http://101.132.109.234:8099/"
 
+import { SZZ_URL,SZZSY_URL,SZZSQSY_URL,SZZXQ_URL } from "./urls";
 
 export function httpGet(url,param,sucessFun,errorFun){
 
-    axios.get(base_url+url,{       // 还可以直接把参数拼接在url后边
 
+    axios.get(BASE_URL+url,{       // 还可以直接把参数拼接在url后边
 
         params:param
 
     }).then(function(res){
 
         sucessFun(res)
 
@@ -10,13 +9,21 @@ export function httpGet(url,param,sucessFun,errorFun){
 
         errorFun(error)
 
     });
 
 }
 
-
 
+//金湖国际
 
 export function jinghuguoji_httpGet(param,sucessFun,errorFun){
 
-    axios.get(base_url+SZZ_URL,{       // 还可以直接把参数拼接在url后边
 
-        params:param
 
-    }).then(function(res){
 
-        sucessFun(res)
 
-    }).catch(function (error) {
 
-        errorFun(error)
 
-    });
 
+    httpGet(SZZ_URL,param,sucessFun,errorFun)
 
+}
 
+//双钟镇首页概况
 
+export function SZZSY_httpGet(sucessFun,errorFun){
 
+    httpGet(SZZSY_URL,null,sucessFun,errorFun)
 
+}
 
+//双钟镇社区首页概况
 
+//community 社区名字
 
+export function SZZSQSY_httpGet(param,sucessFun,errorFun){
 
+    httpGet(SZZSQSY_URL,{community:param},sucessFun,errorFun)
 
+}
 
+//双钟镇小区概况
 
+//village 小区名字
 
+export function SZZXQ_httpGet(param,sucessFun,errorFun){
 
+    httpGet(SZZXQ_URL,{village :param},sucessFun,errorFun)
 
 }

+ 10 - 1
shuzhixiangzheng/src/assets/api/urls.js
查看文件 

@@ -1,2 +1,11 @@
 
 //双钟镇楼幢用户信息
 
-export const SZZ_URL="api/screen/findByRoomNumber";
 
+export const SZZ_URL="api/screen/findByRoomNumber";
 
+
 
+//双钟镇首页概况
 
+export const SZZSY_URL="api/screen/shuangzhongzhen/index";
 
+
 
+//双钟镇社区首页概况
 
+export const SZZSQSY_URL="api/screen/shuangzhongzhen/community/index";
 
+
 
+//双钟镇小区概况
 
+export const SZZXQ_URL="api/screen/shuangzhongzhen/village/index";

二进制
shuzhixiangzheng/src/assets/png/green.png
查看文件


二进制
shuzhixiangzheng/src/assets/png/ring_background.png
查看文件


二进制
shuzhixiangzheng/src/assets/png/yellow.png
查看文件


+ 95 - 5
shuzhixiangzheng/src/components/MainPage.vue
查看文件 

@@ -10,11 +10,11 @@
 
 
         <div id="left_div">
 
             <img class="menu" src="../assets/png/1.png"></img>
 
-                <ShunagzhongViewPage></ShunagzhongViewPage>
 
+                <ShunagzhongViewPage :szdata="data.index"></ShunagzhongViewPage>
 
             <img class="menu" id="peopleStatus" src="../assets/png/2.png"></img>
 
                   <PersonStatusPage></PersonStatusPage>
 
             <img class="menu" id="insuredStatus" src="../assets/png/3.png"></img>
 
-                  <InsuredStatus></InsuredStatus>
 
+                  <InsuredPage></InsuredPage>
 
     
        </div>
 
        <div id="right_div">
 
@@ -75,6 +75,7 @@
 
   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"
 
 export default {
 
   name: 'MainPage',
 
   components:{
 
@@ -90,11 +91,93 @@ export default {
 
   },
 
   data () {
 
     return {
 
-      msg: '',
 
+      //双钟数据
 
+      // 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(){
 
+  
+  },
 
   mounted(){
 
     this.change();
 
+    this.$nextTick(() => {
 
+      this.getData();
 
+    });
 
+   
   },
 
   methods:{
 
     
@@ -108,6 +191,13 @@ export default {
 
     }
 
 
     },
 
+    getData(){
 
+      SZZSY_httpGet(result=>{
 
+        this.data=result.data;
 
+        // this.$store.commit('setDemoValue', this.data);  
+        console.log("this.data",this.data)
 
+      },reuslt=>{})
 
+    },
 
     to3DMap(){
 
       setTimeout(()=>{
 
         window.cesiumMap.removeGaode();
 
@@ -139,7 +229,7 @@ export default {
 
 
 <style scoped>
 
   #peopleStatus{
 
-    top:30%
 
+    top:28%
 
   }
 
   #insuredStatus{
 
     top:75%
 
@@ -148,7 +238,7 @@ export default {
 
     left: 10%;
 
   }
 
   #employmentSituation{
 
-    top:30%
 
+    top:22%
 
   }
 
   #vaccination{
 
     top:75%;

+ 108 - 10
shuzhixiangzheng/src/components/MainPageChild/EducationPage.vue
查看文件 

@@ -1,18 +1,62 @@
 
 <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">1011</td>
 
+            <td class="educate_num1">1%</td>
 
+        </tr>
 
+        <tr id="tr_class1">
 
+          <td class="educate_type">小学</td>
 
+          <td class="educate_num">1000</td>
 
+          <td class="educate_num1">1%</td>
 
+          </tr>
 
+          <tr class="tr_class">
 
+              <td class="educate_type">初中</td>
 
+              <td class="educate_num">1000</td>
 
+              <td class="educate_num1">1%</td>
 
+          </tr>
 
+          <tr class="tr_class">
 
+              <td class="educate_type">高中</td>
 
+              <td class="educate_num">1000</td>
 
+              <td class="educate_num1">1%</td>
 
+          </tr>
 
+          <tr class="tr_class">
 
+              <td class="educate_type">大学</td>
 
+              <td class="educate_num">1000</td>
 
+              <td class="educate_num1">1%</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>
 
+          </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/ThreeDCharts1.vue"
 
     export default {
 
       name: 'EducationPage',
 
       components:{
 
-        
+        ThreeDCharts
 
       },
 
       data () {
 
         return {
 
@@ -20,15 +64,46 @@
 
         }
 
       },
 
       mounted(){
 
-        
+
 
       },
 
       methods:{
 
-        
+
 
       }
 
     }
 
 </script>
 
     
  <style scoped>
 
+     #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;
 
@@ -38,36 +113,59 @@
 
      #td2{
 
         font-weight:bold;
 
         position: absolute;
 
-        left:40%;
 
+        left:45%;
 
         top:15%
 
      }
 
      #td3{
 
         font-weight:bold;
 
         position: absolute;
 
-        left:70%;
 
+        left:75%;
 
         top:15%
 
      }
 
      #educationPage{
 
         position: absolute;
 
         width: 100%;
 
         height: 25%;
 
-        background-color: rgb(20, 10, 220,0.1);
 
         top:52%;
 
      }
 
      #schoolStatus{
 
          position: absolute;
 
          font-family: "宋体";
 
          font-weight:bold;
 
-         left:10%
 
+         left:18%
 
      }
 
      #table_head{
 
         position: absolute;
 
         background-color:rgb(10,98,197) ;
 
         font-size: 13px; 
         top:10%;
 
-        width: 180px;
 
-        height: 30px;
 
-        left: 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>

+ 17 - 8
shuzhixiangzheng/src/components/MainPageChild/EmploymentSituation.vue
查看文件 

@@ -1,15 +1,17 @@
 
 <template>
 
     <div id="employmentSituation">
 
+        <img class="ring_background_png" src="../../assets/png/ring_background.png"></img>
 
+      <ThreeDCharts></ThreeDCharts>
 
       
     </div>
 
-    </template>
 
+</template>
 
     
-    <script>
 
-     
+<script>
 
+     import ThreeDCharts from "../Utils/ThreeDCharts.vue"
 
     export default {
 
       name: 'EmploymentSituation',
 
       components:{
 
-  
+        ThreeDCharts
 
       },
 
       data () {
 
         return {
 
@@ -24,15 +26,22 @@
 
       
       }
 
     }
 
-    </script>
 
+</script>
 
     
     
  <style scoped>
 
      #employmentSituation{
 
         position: absolute;
 
         width: 100%;
 
-        height: 100%;
 
+        height: 20%;
 
+        top:28%;
 
+        /* background-color: rgb(0, 0, 255,0.5); */
 
+     }
 
+     .ring_background_png{
 
+          position: absolute; 
+         width: 55%;
 
+         left: 30%;
 
+         top:10%
 
      }
 
- 
-    </style>
 
+</style>

+ 59 - 14
shuzhixiangzheng/src/components/MainPageChild/InsuredPage.vue
查看文件 

@@ -1,11 +1,17 @@
 
 <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>
 
-    </template>
 
+</template>
 
     
-    <script>
 
-     
+<script>
 
+     import {chart_canbao} from "../../assets/api/charts.js"
 
     export default {
 
       name: 'InsuredPage',
 
       components:{
 
@@ -17,23 +23,62 @@
 
         }
 
       },
 
       mounted(){
 
-  
+        this.chart();
 
       },
 
       methods:{
 
-        
-      
+        chart(){
 
+            let myChart = this.$echarts.init(document.getElementById('myChart'));
 
+          myChart.setOption(chart_canbao(80,100,50,100));   
+        }
 
       }
 
     }
 
-    </script>
 
+</script>
 
     
     
-    <style scoped>
 
-         #insuredPage{
 
+<style scoped>
 
+  .font1{
 
+    position: absolute;
 
+    font-size: 10px;
 
+	-webkit-transform: scale(0.8);
 
+    left: 72%;
 
+    top:46%;
 
+  }
 
+  .font2{
 
+    position: absolute;
 
+    font-size: 10px;
 
+    -webkit-transform: scale(0.8);
 
+    left: 72%;
 
+    top:58%;
 
+  }
 
+  .color1{
 
+    position: absolute;
 
+    width: 10%;
 
+    height: 3%;
 
+    background-color: rgb(55,180,164);
 
+    left: 60%;
 
+    top:60%
 
+  }
 
+  .color2{
 
+    position: absolute;
 
+    width: 10%;
 
+    height: 3%;
 
+    background-color: rgb(250,205,38);
 
+    left: 60%;
 
+    top:50%
 
+  }
 
+      #insuredPage{
 
+        position: absolute;
 
+        width: 100%;
 
+       height: 18%;
 
+        bottom:1%;
 
+        
+      }
 
+      #myChart{
 
         position: absolute;
 
         width: 100%;
 
-        height: 40%;
 
-        top:37%
 
+        height: 100%;
 
+        left: -30%;
 
+        /* background-color: rgb(0, 0, 255,0.3); */
 
       }
 
-    
-    </style>
 
+</style>

+ 3 - 3
shuzhixiangzheng/src/components/MainPageChild/KeyPopulationPage.vue
查看文件 

@@ -87,19 +87,19 @@
 
     position: absolute;
 
     font-weight:bold;
 
     left: 15%;
 
-    top:45%
 
+    top:35%
 
   }
 
   #disabledNum{
 
     position: absolute;
 
     font-weight:bold;
 
     left: 45%;
 
-    top:45%
 
+    top:35%
 
   }
 
   #liveAloneNum{
 
     position: absolute;
 
     font-weight:bold;
 
     left: 75%;
 
-    top:45%
 
+    top:35%
 
   }
 
     </style>

+ 5 - 5
shuzhixiangzheng/src/components/MainPageChild/PersonStatusPage.vue
查看文件 

@@ -1,5 +1,5 @@
 
 <template>
 
-  <div id="PersonStatusPage">
 
+  <div id="personStatusPage">
 
     <td id="num1">10000</td>
 
     <td>
 
       <div id="progress_container0">
 
@@ -46,12 +46,12 @@
 
   
   
   <style scoped>
 
-       #PersonStatusPage{
 
+       #personStatusPage{
 
       position: absolute;
 
       width: 100%;
 
-      height: 40%;
 
-      background-color: rgb(48,115,248,0.1);
 
-      top:37%
 
+      height: 43%;
 
+      /* background-color: rgb(48,115,248,0.1); */
 
+      top:36%
 
     }
 
     #num1{
 
       position: absolute;

+ 21 - 13
shuzhixiangzheng/src/components/MainPageChild/ShunagzhongViewPage.vue
查看文件 

@@ -5,11 +5,11 @@
 
             <td>
 
               <span id="peopleNum">
 
                 <span class="font">在籍人数</span> <br>
 
-                <span class="number">10000</span> 
+                <span class="number">{{szdata.peoples}}</span> 
               </span>
 
               <span id="houseNum">
 
                 <span class="font" >户数</span><br>
 
-                <span class="number" >10000</span> 
+                <span class="number" >{{szdata.households}}</span> 
               </span>
 
             </td>
 
            </tr>
 
@@ -18,11 +18,11 @@
 
             <td>
 
               <span id="villageNum">
 
                 <span class="font">小区数量</span> <br>
 
-                <span class="number">10000</span> 
+                <span class="number">{{szdata.villages}}</span> 
               </span>
 
               <span id="buildNum">
 
                 <span class="font" >建筑数量</span><br>
 
-                <span class="number" >10000</span> 
+                <span class="number" >{{szdata.buildings}}</span> 
               </span>
 
             </td>
 
            </tr>
 
@@ -31,11 +31,11 @@
 
             <td>
 
               <span id="hasPropertyNum">
 
                 <span class="font">有物业小区</span> <br>
 
-                <span class="number">10000</span> 
+                <span class="number">{{szdata.villagesWithCompany}}</span> 
               </span>
 
               <span id="nohasPropertyNum">
 
                 <span class="font" >无物业小区</span><br>
 
-                <span class="number" >10000</span> 
+                <span class="number" >{{szdata.villagesWithoutCompany}}</span> 
               </span>
 
             </td>
 
            </tr>
 
@@ -46,20 +46,28 @@
 
      
     export default {
 
       name: 'ShunagzhongView',
 
+      props: ['szdata'],
 
       components:{
 
   
       },
 
       data () {
 
         return {
 
-          msg: '',
 
+//           szdata:{				// -- 概况
 
+//             peoples:1,	//在籍人数
 
+//             villages:42,		//小区数量
 
+//             villagesWithCompany:33,	//由物业小区
 
+//             buildings:8049,			//建筑数量
 
+//             households:23653,			//户数
 
+//             villagesWithoutCompany:8		//无物业小区
 
+//         },
 
         }
 
       },
 
       mounted(){
 
-  
+      //  this.szdata=this.$store.getters.getDemoValue
 
+        console.log(this.$store.getters.getDemoValue)
 
       },
 
       methods:{
 
         
-      
       }
 
     }
 
     </script>
 
@@ -106,26 +114,26 @@
 
     position: absolute;
 
     font-weight:bold;
 
     left: 35%;
 
-    top:15%
 
+    top:14%
 
   }
 
   #buildNum{
 
     position: absolute;
 
       font-weight:bold;
 
       left: 75%;
 
-      top:15%
 
+      top:14%
 
   }
 
  #hasPropertyNum{
 
   position: absolute;
 
       font-weight:bold;
 
       left: 35%;
 
-      top:23%
 
+      top:21%
 
  }
 
 
 #nohasPropertyNum{
 
   position: absolute;
 
       font-weight:bold;
 
       left: 75%;
 
-      top:23%
 
+      top:21%
 
  }
 
  .font{
 
     font-size: 10px;

+ 130 - 9
shuzhixiangzheng/src/components/MainPageChild/VaccinationPage.vue
查看文件 

@@ -1,11 +1,26 @@
 
 <template>
 
     <div id="vaccinationPage">
 
-      
+      <img class="yq_back_img" id="img1" src="../../assets/png/yq_background.png"></img>
 
+      <img class="yq_back_img" id="img2" src="../../assets/png/yq_background.png"></img>
 
+      <img class="yq_border_img" id="img3" src="../../assets/png/yq_border.png"></img>
 
+      <img class="yq_border_img" id="img4" src="../../assets/png/yq_border.png"></img>
 
+      <img class="yq_border_img" id="img5" src="../../assets/png/yq_border.png"></img>
 
+
 
+        <span id="ym_name1">疫苗接种</span>
 
+        <span id="ym_num">10000</span>
 
+        <span id="ym_name2">疫苗总接种率</span>
 
+        <span id="ym_num1">90.99%</span>
 
+
 
+        <span id="ym_name3">3-12岁疫苗接种率</span>
 
+        <span id="ym_num2">90.34%</span>
 
+        <span id="ym_name4">12-18岁疫苗接种率</span>
 
+        <span id="ym_num3">99.99%</span>
 
+        <span id="ym_name5">18岁以上疫苗接种率</span>
 
+        <span id="ym_num4">96.06%</span>
 
     </div>
 
-    </template>
 
+</template>
 
     
-    <script>
 
-     
+<script>
 
     export default {
 
       name: 'VaccinationPage',
 
       components:{
 
@@ -24,15 +39,121 @@
 
       
       }
 
     }
 
-    </script>
 
-    
-    
+</script>
 
+  
     <style scoped>
 
+
 
+      #ym_num{
 
+        position: absolute;
 
+        left: 21%;
 
+        top:28%;  
+        font-size: 28px;
 
+        color:  rgb(251,212,21);
 
+        font-weight:bold;
 
+      }
 
+      #ym_name1{
 
+        position: absolute;
 
+        left: 26%;
 
+        top:16%;
 
+        font-size: 12px;
 
+        color:  rgb(4,185,202);
 
+        font-weight:bold;
 
+      }
 
+
 
+    #ym_name2{
 
+      position: absolute;
 
+        left: 62%;
 
+        top:16%;
 
+        font-size: 12px;
 
+        color:  rgb(4,185,202);
 
+        font-weight:bold;
 
+    }
 
+    #ym_name3{
 
+      position: absolute;
 
+      font-weight:bold;
 
+      top:70%;
 
+      left: 12%;
 
+      font-size: 12px;
 
+    }
 
+    #ym_name4{
 
+      position: absolute;
 
+      font-weight:bold;
 
+      top:70%;
 
+      left: 39%;
 
+      font-size: 12px;
 
+    }
 
+    #ym_name5{
 
+      position: absolute;
 
+      font-weight:bold;
 
+      top:70%;
 
+      left: 67%;
 
+      font-size: 12px;
 
+    }
 
+      #ym_num1{
 
+        position: absolute;
 
+        left: 60%;
 
+        top:28%;
 
+        font-size: 28px;
 
+        color:  rgb(251,212,21);
 
+        font-weight:bold;
 
+      }
 
+      #ym_num2{
 
+        position: absolute;
 
+        left: 16%;
 
+        top:78%;
 
+        font-size: 20px;
 
+        font-weight:bold;
 
+      }
 
+      #ym_num3{
 
+        position: absolute;
 
+        left: 43%;
 
+        top:78%;
 
+        font-size: 20px;
 
+        font-weight:bold;
 
+      }
 
+      #ym_num4{
 
+        position: absolute;
 
+        left: 72%;
 
+        top:78%;
 
+        font-size: 20px;
 
+        font-weight:bold;
 
+      }
 
+      #img1{
 
+        left: 15%;
 
+        top: 6%;
 
+      }
 
+      #img2{
 
+        left: 55%;
 
+        top: 6%;
 
+      }
 
+      #img3{
 
+        left: 5%;
 
+        bottom: -10%;
 
+      }
 
+      #img4{
 
+        left: 33%;
 
+        bottom: -10%;
 
+      }
 
+      #img5{
 
+        right: 4%;
 
+        bottom: -10%;
 
+      }
 
+      .yq_back_img{
 
+        position: absolute;
 
+        width: 30%;
 
+        height: 50%;
 
+      }
 
+      .yq_border_img{
 
+        position: absolute;
 
+        width: 35%;
 
+        height: 60%;
 
+      }
 
          #vaccinationPage{
 
         position: absolute;
 
+        bottom:1%;
 
         width: 100%;
 
-        height: 40%;
 
-
 
+        height: 18%;
 
+        /* background-color: rgb(0, 0, 255,0.1); */
 
       }
 
     
     </style>

+ 447 - 0
shuzhixiangzheng/src/components/Utils/ThreeDCharts.vue
查看文件 

@@ -0,0 +1,447 @@
 
+<template>
 
+	<div class="water-eval-container">
 
+		<div class="cityGreenLand-charts" id="cityGreenLand-charts">
 
+		</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);
 
+			},
 
+
 
+			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, 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|  亩}',
 
+
 
+					},
 
+					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:-80%;
 
+		left:-26%
 
+	}
 
+	.cityGreenLand-charts {
 
+		height: 400px;
 
+		width: 800px;
 
+	}
 
+</style>

+ 453 - 0
shuzhixiangzheng/src/components/Utils/ThreeDCharts1.vue
查看文件 

@@ -0,0 +1,453 @@
 
+<template>
 
+	<div class="water-eval-container">
 
+		<div class="cityGreenLand-charts" id="cityGreenLand-charts1">
 
+		</div>
 
+	</div>
 
+</template>
 
+
 
+<script>
 
+	import echarts from 'echarts'
 
+	import 'echarts-gl';
 
+	export default {
 
+		name: "cityGreenLand",
 
+		components: {},
 
+		data() {
 
+			return {
 
+				optionData: [{
 
+					name: '文盲',
 
+					value: 10000,
 
+					itemStyle: {  
+						color: '#0754A1',
 
+					}
 
+				}, {
 
+					name: '初中及以下',
 
+					value: 12116,
 
+					itemStyle: {   
+						color: '#0A62C5'
 
+					}
 
+				}, 
+				{
 
+					name: '高中',
 
+					value: 10106,
 
+					itemStyle: {     
+						color: '#5559FA'
 
+					}
 
+				},
 
+				{
 
+					name: '研究生及以上',
 
+					value: 1616,
 
+					itemStyle: {   
+						color: '#7739D0'
 
+					}
 
+				},
 
+				{
 
+					name: '本科',
 
+					value: 6616,
 
+					itemStyle: {  
+						color: '#FCD515'
 
+					}
 
+				},
 
+				{
 
+					name: '专科',
 
+					value: 6616,
 
+					itemStyle: {  
+						color: '#5BF96D'
 
+					}
 
+				}
 
+			],
 
+			}
 
+		},
 
+		mounted() {
 
+			this.$nextTick(function() {
 
+				this.init();
 
+			});
 
+		},
 
+		methods: {
 
+			init() {
 
+				//构建3d饼状图
 
+				let myChart = echarts.init(document.getElementById('cityGreenLand-charts1'));
 
+				// 传入数据生成 option
 
+				this.option = this.getPie3D(this.optionData, 0.8);
 
+				myChart.setOption(this.option);
 
+				//是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
 
+				this.option.series.push({
 
+					name: 'pie2d',
 
+					type: 'pie',
 
+					labelLine:{
 
+						length: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);
 
+			},
 
+
 
+			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, 10000);
 
+					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:-10%; 
+		left:-78%
 
+	}
 
+	.cityGreenLand-charts {
 
+		height: 300px;
 
+		width: 600px;
 
+	}
 
+</style>

+ 6 - 1
shuzhixiangzheng/src/main.js
查看文件 

@@ -4,14 +4,19 @@ import Vue from 'vue'
 
 import App from './App'
 
 import router from './router'
 
 import ElementUI from 'element-ui';
 
-
 
+import  echarts from 'echarts';
 
+import  'echarts-gl';
 
 import 'element-ui/lib/theme-chalk/index.css';
 
+import store from "./store"
 
+
 
 Vue.config.productionTip = false
 
 Vue.use(ElementUI);
 
+Vue.prototype.$echarts = echarts
 
 /* eslint-disable no-new */
 
 new Vue({
 
   el: '#app',
 
   router,
 
+  store,
 
   components: { App },
 
   template: '<App/>'
 
 })

+ 8 - 0
shuzhixiangzheng/src/store/index.js
查看文件 

@@ -0,0 +1,8 @@
 
+import Vue from 'vue';
 
+import Vuex from 'vuex';
 
+Vue.use(Vuex);
 
+const store = new Vuex.Store();
 
+ 
+export default store;
 
+
 
+

+ 30 - 0
shuzhixiangzheng/src/store/module/szgk.js
查看文件 

@@ -0,0 +1,30 @@
 
+export default {
 
+
 
+        state: {
 
+    
+            //属性
 
+    
+            demoValue:{}
 
+    
+        },
 
+    
+        getters: {
 
+    
+            getDemoValue: state => state.demoValue
 
+    
+        },
 
+    
+        mutations: {
 
+    
+            //set方法
 
+    
+            setDemoValue(state,demoValue){
 
+    
+                state.demoValue = demoValue
 
+    
+            }
 
+    
+        }
 
+    
+    }
 
+

+ 2 - 0
shuzhixiangzheng/static/config.js
查看文件 

@@ -0,0 +1,2 @@
 
+//后端接口地址
 
+window.BASE_URL="http://101.132.109.234:8099/"