From f8be326e9d1f03d1a1404c52b99e8e2438a257d2 Mon Sep 17 00:00:00 2001
From: 13176889840 <13176889840@163.com>
Date: Thu, 9 Dec 2021 14:23:36 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE-=E5=8C=BA=E5=9F=9F=E5=8C=96?=
 =?UTF-8?q?=E5=85=9A=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/communityParty/elegant/index.vue  |   6 +-
 .../visual/communityParty/community.vue       | 135 ++++---
 .../modules/visual/communityParty/options.js  | 176 ++++++++
 .../modules/visual/communityParty/party.vue   | 380 ++++++++++++------
 4 files changed, 518 insertions(+), 179 deletions(-)
 create mode 100644 src/views/modules/visual/communityParty/options.js

diff --git a/src/views/modules/communityParty/elegant/index.vue b/src/views/modules/communityParty/elegant/index.vue
index 344782e3..d190e37b 100644
--- a/src/views/modules/communityParty/elegant/index.vue
+++ b/src/views/modules/communityParty/elegant/index.vue
@@ -3,7 +3,7 @@
     <el-card class="resi-card-table">
       <div class="resi-row-btn">
         <el-form ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline">
-          <el-form-item label="所属网格">
+          <el-form-item label="所属网格" prop="gridId">
             <el-select v-model="searchForm.gridId" filterable placeholder="请选择" clearable>
               <el-option
                 v-for="item in optionsG"
@@ -13,7 +13,7 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="党员姓名">
+          <el-form-item label="党员姓名" prop="name">
             <el-select v-model="searchForm.name" filterable placeholder="请选择" clearable>
               <el-option
                 v-for="item in demandOptions"
@@ -23,7 +23,7 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="主要事迹">
+          <el-form-item label="主要事迹" prop="mainDeed">
             <el-input v-model="searchForm.mainDeed" placeholder="请输入" class="input-width" clearable></el-input>
           </el-form-item>
           <el-form-item>
diff --git a/src/views/modules/visual/communityParty/community.vue b/src/views/modules/visual/communityParty/community.vue
index 30fdb498..8840068d 100644
--- a/src/views/modules/visual/communityParty/community.vue
+++ b/src/views/modules/visual/communityParty/community.vue
@@ -10,22 +10,25 @@
       <div class="second-title">
         <div class="second-title-label">党建单位分类统计</div>
         <div class="second-select">
-          <el-select v-model="value2" clearable placeholder="请选择">
+          <el-select v-model="serviceMatter" clearable placeholder="请选择" @change="handleSelectChange">
             <el-option
-              v-for="item in headerList"
-              :key="item.coulmn"
-              :label="item.title"
-              :value="item.coulmn">
+              v-for="item in unitList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
             </el-option>
           </el-select>
         </div>
         <div class="second-select">
           <el-date-picker
-            v-model="value2"
-            type="date"
+            v-model="timeRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
             prefix-icon="el-icon-caret-bottom"
-            placeholder="选择日期"
-            value-format="yyyy-MM-dd">
+            value-format="yyyy-MM-dd HH:mm:ss"
+            @change="handleSelectChange">
           </el-date-picker>
         </div>
       </div>
@@ -46,7 +49,7 @@
               :headerList="headerList"
               :tableData="tableData"
               :visibleLoading="visibleLoading"
-              :operate="false"
+              :operate="true"
             ></screen-table>
             <div class="pagination">
               <el-pagination
@@ -106,28 +109,31 @@ export default {
   },
   data() {
     return {
+      tableLoading: false,
       warningList: [],
       headerList: [
         { title: "序号", coulmn: 'index' },
-        { title: "需求类型", coulmn: 'gridName' },
-        { title: "具体内容", coulmn: 'buildingName' },
-        { title: "上报情况", coulmn: 'neighborhoodName' },
-        { title: "上报人", coulmn: 'residentNames' },
-        { title: "上报时间", coulmn: 'residentNames' },
-        { title: "是否认领", coulmn: 'residentNames' },
-        { title: "认领方", coulmn: 'residentNames' },
-        { title: "认领时间", coulmn: 'residentNames' }
+        { title: "区域化党建单位名称", coulmn: 'unitName' },
+        { title: "活动标题", coulmn: 'title' },
+        { title: "活动地址", coulmn: 'address' },
+        { title: "服务事项", coulmn: 'serviceMatter' },
+        { title: "服务人数", coulmn: 'peopleCount' },
+        { title: "活动时间", coulmn: 'activityTime' }
       ],
       tableData: [
         // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
       ],
+      agencyId: '',
       value2: '',
+      timeRange: '',
       visibleLoading: true,
+      serviceMatter: '',
       pageNo: 1,
       pageSize: 10,
       total: 0,
       activeIndex: 0,
       activeLevel: "1",
+      unitList: [],
       partyItem: [
         {
           name: '楼宇党建',
@@ -159,65 +165,68 @@ export default {
     };
   },
   async mounted() {
+    const { user } = this.$store.state
+    this.agencyId = user.agencyId
     await nextTick(100);
-    this.getBuildingwarnlist();
+    this.loadUnit()
+    this.getList();
   },
   methods: {
     
-    
-    onClickList(index, level) {
-      this.activeIndex = index;
-      this.activeLevel = level;
-      this.pageNo = 1;
-      this.getUserwarnlist();
-    },
     //具体人员列表
-    async getUserwarnlist() {
-      const { activeIndex, activeLevel, warningList } = this;
-      const reqItem = warningList[activeIndex];
-      let tableData = [];
-      const url = "/epmetuser/statsresiwarn/userwarnlist";
+    async getList() {
+      this.visibleLoading = true
+
+      const url = "/heart/icpartyactivity/search"
+      // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/list"
       let params = {
-        configId: reqItem.configId,
-        buildingIdList: reqItem["buildingIdList" + activeLevel],
-        pageNo: this.pageNo,
+        agencyId: this.agencyId,
         pageSize: this.pageSize,
-      };
-      const { data, code, msg } = await requestPost(url, params);
+        pageNo: this.pageNo,
+        serviceMatter: this.serviceMatter,
+        startTime: this.timeRange.length > 0 && this.timeRange[0] || '',
+        endTime: this.timeRange.length > 0 &&  this.timeRange[1] || ''
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
       if (code === 0) {
-        tableData = data.list.map((item, index) => {
-          return {
-            ...item,
-            index: index + 1,
-            residentNames: item.residentNames || "暂无"
-          }
-        });
-        this.tableData = tableData;
-        this.total = data.total;
+        this.total = data.total
+        this.tableData = data.list
       } else {
+        this.$message.error(msg)
       }
+      this.visibleLoading = false
     },
-    // 【人员预警】 楼宇预警数量列表
-    async getBuildingwarnlist() {
-      const url = "/epmetuser/statsresiwarn/buildingwarnlist";
+    async loadUnit () {
+      const url = "/heart/icpartyunit/option"
+      // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/option"
+
       let params = {
-        agencyId: this.$store.state.user.agencyId,
-      };
-      const { data, code, msg } = await requestPost(url, params);
+        agencyId: this.agencyId
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
       if (code === 0) {
-        this.warningList = data;
-        this.visibleLoading = false;
-        this.getUserwarnlist();
+        this.unitList = data
+
       } else {
+        this.$message.error(msg)
       }
+
+    },
+    handleSelectChange() {
+      this.getList();
     },
     pageSizeChangeHandleNew(val) {
       this.pageNo = 1;
       this.pageSize = val;
+      this.getList();
     },
     pageCurrentChangeHandleNew(val) {
       this.pageNo = val;
-      this.getUserwarnlist();
+      this.getList();
     },
   },
 };
@@ -305,6 +314,22 @@ export default {
       // }
     }
     ::v-deep .el-date-editor {
+      width: 360px;
+      position: relative;
+      background: #06186D;
+      border: 1px solid #1A64CC;
+      .el-range-input {
+        color: #fff;
+        background: #06186D;
+      }
+      .el-range-separator {
+        color: #fff;
+      }
+      .el-range__icon {
+        position: absolute;
+        right: 5px;
+        // float: right;
+      }
       .el-input__prefix {
         left: unset;
         right: 5px;
diff --git a/src/views/modules/visual/communityParty/options.js b/src/views/modules/visual/communityParty/options.js
new file mode 100644
index 00000000..ba0ddd33
--- /dev/null
+++ b/src/views/modules/visual/communityParty/options.js
@@ -0,0 +1,176 @@
+
+export function pieOption (_charts) {
+  const center= ['50%', '50%']
+    return {
+      title: {
+        text: '0',
+        top: 125,
+        left: 196,
+        textAlign: 'center',
+        textStyle: {
+          width: '100%',
+          fontSize: 32,
+          color: '#FFFFFF',
+          fontWeight: 400,
+          align: 'center'
+        },
+        itemGap: 5,
+        subtext: '总数',
+        subtextStyle: {
+          fontSize: 16,
+          color: '#fff',
+          fontWeight: 400,
+          align: 'center'
+        }
+      },
+      tooltip: {
+        show: false
+      },
+      legend: {
+        top: 500,
+        bottom: 0,
+        itemWidth: 20,
+        itemHeight: 10,
+        textStyle: {
+          color: '#D2E7FF',
+          fontSize: 16,
+          lineHeight: 20,
+        },
+      
+      },
+      series: [
+        // 外侧圆环
+        {
+          type: 'pie',
+          // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
+          startAngle: 90,
+          hoverAnimation: false,
+          // tooltip: {
+          // },
+          center: center,
+          left: 'left',
+          radius: ['60%', '70%'],
+          width: 400,
+          label: {
+            show: false
+          },
+          labelLine: {
+            show: false
+          },
+          data: [{
+            value: 480,
+            itemStyle: {
+              color: 'rgba(40, 101, 250, 0)',
+              width:0,
+              borderColor: 'rgba(40, 101, 250, 0.5)',
+              borderWidth: 1,
+              borderType: 'dotted'
+            }
+          }
+          ]
+        },
+  
+        // 突出的
+        {
+          hoverAnimation: false,
+          type: 'pie',
+          center: center,
+          radius: ['40%', '60%'],
+          avoidLabelOverlap: false,
+          selectedMode: 'single',
+          left: 'left',
+          width: 400,
+          startAngle: 90,
+          label: {
+            // show: false,
+            position: 'outside',
+            alignTo: 'edge',
+            // formatter: '{a|{c}}\n\n{name|{b}}',
+            formatter: '{a|{c}}\n{r|}\n{name|{b}}',
+            minMargin: 5,
+            edgeDistance: 1,
+            lineHeight: 15,
+            color: '#fff',
+            fontSize: 12,
+            // distanceToLabelLine: -60,
+            rich: {
+              name: {
+                padding: [0, 6, 0, 6]
+              },
+              a: {
+                fontSize: 30,
+                color: '#fff',
+                padding: [0, 6, 6, 6]
+              },
+              r: {
+                backgroundColor: 'auto',
+                borderRadius: 6,
+                width: 6,
+                height: 6,
+                // padding: [3, 3, 0, -12]
+              }
+            }
+          },
+          labelLine: {
+            show: false,
+            smooth: 0.2,
+            length: 30,
+            length2: 0,
+            maxSurfaceAngle: 80
+          },
+          labelLayout: function (params) {
+            
+            const isLeft = params.labelRect.x < _charts.getWidth() / 2;
+            const points = params.labelLinePoints;
+            // Update the end point.
+            if (points) {
+              points[2][0] = isLeft
+              ? params.labelRect.x
+              : params.labelRect.x + params.labelRect.width;
+            }
+            
+            return {
+              labelLinePoints: points
+            };
+          },
+          itemStyle: {
+            
+          },
+          data: [],
+  
+        },
+           // 中间圆环
+           {
+            type: 'pie',
+            // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
+            startAngle: 90,
+            hoverAnimation: false,
+            center: center,
+            left: 'left',
+            width: 400,
+            // tooltip: {
+            // },
+            radius: ['0%', '25%'],
+            label: {
+            
+                show: false
+             
+            },
+            labelLine: {
+                show: false
+            
+            },
+            data: [
+              {
+                value: 360,
+                itemStyle: {
+                  color: 'rgba(8, 37, 134, 1)',
+                }
+              }
+            ]
+          },
+      ]
+  
+    }
+  }
+  
\ No newline at end of file
diff --git a/src/views/modules/visual/communityParty/party.vue b/src/views/modules/visual/communityParty/party.vue
index 6d3a3efd..3f0f419f 100644
--- a/src/views/modules/visual/communityParty/party.vue
+++ b/src/views/modules/visual/communityParty/party.vue
@@ -33,8 +33,11 @@
           <div class="card-left-title">党员年龄统计</div>
           <div class="card-flex">
             <div class="echart-wr">
-              <div class="echart-cicle"></div>
-              <div id="echartOrg" class="echart-org"></div>
+              <!-- <div class="echart-cicle"></div>  -->
+              <screen-echarts-frame class="echart-org"
+                              @myChartMethod="pieInitOk"
+                              ref="ageChart"></screen-echarts-frame>
+              <!-- <div id="echartOrg" class="echart-org"></div> -->
             </div>
             <div class="echarts-tips echarts-tips-wd50">
               <div class="tips-lists">
@@ -77,8 +80,11 @@
           <div class="card-left-title">党员学历统计</div>
           <div class="card-flex">
             <div class="echart-wr echart-wr100">
-              <div class="echart-cicle echart-cicle0"></div>
-              <div id="echartType" class="echart-org"></div>
+              <!-- <div class="echart-cicle echart-cicle0"></div> -->
+              <!-- <div id="echartType" class="echart-org"></div> -->
+              <screen-echarts-frame class="echart-org"
+                              @myChartMethod="pieInitOks"
+                              ref="eduChart"></screen-echarts-frame>
             </div>
             <div v-if="false" class="echarts-tips">
               <div class="tips-list">
@@ -123,6 +129,8 @@ import { requestPost } from "@/js/dai/request";
 import screenTable from "../components/screen-table/index";
 import cptCard from "@/views/modules/visual/cpts/card";
 import nextTick from "dai-js/tools/nextTick";
+import screenEchartsFrame from "../components/screen-echarts-frame";
+import { pieOption } from './options'
 
 import * as echarts from 'echarts';
 export default {
@@ -130,6 +138,7 @@ export default {
   components: {
     cptCard,
     screenTable,
+    screenEchartsFrame
   },
   data() {
     return {
@@ -212,126 +221,198 @@ export default {
           color: 'rgba(255, 186, 0, 1)'
         }
       ],
-
+      pieAgeChartS: null,
+      pieEduChartSs: null,
+      pieAgeOptions: null,
+      pieEduOptions: null
     };
   },
   async mounted() {
+    
     await nextTick(100);
-    this.initCharts()
-    this.initChartType()
+    this.initAgeCharts()
+    this.initEduCharts()
+    // this.initChartType()
     this.getBuildingwarnlist();
   },
   methods: {
-    initCharts() {
-      const eId = document.getElementById('echartOrg')
-      let _charts = echarts.init(eId)
+    pieInitOk (dom) {
+      console.log('pie准备好了', dom)
+      this.pieAgeChartS = dom
+      // this.pieInitState = true
+
+    },
+    pieInitOks (dom) {
+      console.log('pies准备好了', dom)
+      this.pieEduChartS = dom
+      // this.pieInitState = true
+
+    },
+    initAgeCharts() {
+      // const eId = document.getElementById('echartOrg')
+      // let _charts = echarts.init(eId)
       let option = {
-        tooltip: {
-          show: false,
-          trigger: 'item'
-        },
-        legend: {
-          show: false,
-          orient: 'vertical',
-          top: '40%',
-          left: 'right',
-          textStyle: {
-            color: '#fff'
-          }
-        },
-        title: {
-          text: '12000',  //图形标题，配置在中间对应效果图的80%
-          subtext: '总数',
-          left: "center",
-          top: "center",
-          textStyle: {
-            color: "#fff",
-            fontSize: 28,
-            align: "center"
-          },
-          subtextStyle: {
-            fontSize: 16,
-            color: '#fff'
+      //   tooltip: {
+      //     show: false,
+      //     trigger: 'item'
+      //   },
+      //   legend: {
+      //     show: false,
+      //     orient: 'vertical',
+      //     top: '40%',
+      //     left: 'right',
+      //     textStyle: {
+      //       color: '#fff'
+      //     }
+      //   },
+      //   title: {
+      //     text: '12000',  //图形标题，配置在中间对应效果图的80%
+      //     subtext: '总数',
+      //     left: "center",
+      //     top: "center",
+      //     textStyle: {
+      //       color: "#fff",
+      //       fontSize: 28,
+      //       align: "center"
+      //     },
+      //     subtextStyle: {
+      //       fontSize: 16,
+      //       color: '#fff'
+      //     }
+      //   },
+      //   series: [
+      //     {
+      //       // name: 'Access From',
+      //       type: 'pie',
+      //       // center: ['10%', '50%'],
+      //       radius: ['40%', '60%'],
+      //       avoidLabelOverlap: true,
+      //       // top: top + '%',
+      //       // height: '80%',
+      //       left: 'center',
+      //       width: 400,
+      //       label: {
+      //         show: true,
+      //         position: 'outer',
+      //         alignTo: 'edge',
+      //         formatter: '{a|{c}}\n{r|}\n{name|{b}}',
+      //         minMargin: 5,
+      //         edgeDistance: 20,
+      //         lineHeight: 15,
+      //         color: '#fff',
+      //         fontSize: 12,
+      //         // padding: [5],
+      //         distanceToLabelLine: 10,
+      //         rich: {
+      //           name: {
+      //             padding: [0, 6, 0, 6]
+      //           },
+      //           a: {
+      //             fontSize: 15,
+      //             color: '#fff',
+      //             padding: [0, 6, 0, 6]
+      //           },
+      //           r: {
+      //             backgroundColor: 'auto',
+      //             borderRadius: 6,
+      //             width: 6,
+      //             height: 6,
+      //             // padding: [3, 3, 0, -12]
+      //           }
+      //         }
+      //       },
+      //       emphasis: {
+      //         label: {
+      //           show: true,
+      //           fontSize: '14',
+      //           fontWeight: 'bold'
+      //         }
+      //       },
+      //       labelLine: {
+      //         show: false,
+      //         length: 20,
+      //         length2: 0,
+      //         maxSurfaceAngle: 80,
+      //         lineStyle: {
+      //           cap: 'round'
+      //         }
+      //       },
+      //       labelLayout: function (params) {
+      //         const isLeft = params.labelRect.x < this.pieChartS.getWidth() / 2;
+      //         const points = params.labelLinePoints;
+      //         // Update the end point.
+      //         points[2][0] = isLeft
+      //           ? params.labelRect.x
+      //           : params.labelRect.x + params.labelRect.width;
+      //         return {
+      //           labelLinePoints: points
+      //         };
+      //       },
+      //       data: this.ageItem
+      //     }
+      //   ]
+      }
+      this.pieAgeOptions = pieOption(this.pieAgeChartS)
+      this.clickAgePie(0)
+      let fun = params => {
+        this.clickAgePie(params.dataIndex)
+      }
+      this.$refs.ageChart.handleClick(fun)
+      // option && this.$refs.pieChart.setOption(option);
+
+    },
+    initEduCharts() {
+      // const eId = document.getElementById('echartOrg')
+      // let _charts = echarts.init(eId)
+      let option = {
+      
+      }
+      let legend = {
+        show: true,
+        orient: 'vertical',
+        top: '20%',
+        right: 0,
+        textStyle: {
+          width: 90,
+          color: '#fff',
+          rich: {
+            a: {
+              width: 90
+            }
           }
         },
-        series: [
-          {
-            // name: 'Access From',
-            type: 'pie',
-            // center: ['10%', '50%'],
-            radius: ['40%', '60%'],
-            avoidLabelOverlap: true,
-            // top: top + '%',
-            // height: '80%',
-            left: 'center',
-            width: 400,
-            label: {
-              show: true,
-              position: 'outer',
-              alignTo: 'edge',
-              formatter: '{a|{c}}\n{r|}\n{name|{b}}',
-              minMargin: 5,
-              edgeDistance: 20,
-              lineHeight: 15,
-              color: '#fff',
-              fontSize: 12,
-              // padding: [5],
-              distanceToLabelLine: 10,
-              rich: {
-                name: {
-                  padding: [0, 6, 0, 6]
-                },
-                a: {
-                  fontSize: 15,
-                  color: '#fff',
-                  padding: [0, 6, 0, 6]
-                },
-                r: {
-                  backgroundColor: 'auto',
-                  borderRadius: 6,
-                  width: 6,
-                  height: 6,
-                  // padding: [3, 3, 0, -12]
-                }
+        formatter: name => {
+          for (let a = 0; a < this.eduItem.length; a++) {
+            // this.data  这个数据中有名称和次数
+            if (this.eduItem[a].name === name) {
+              //两个名称进行对比，取出对应的次数
+              let params1 = name + "\n"; //然后return你需要的legend格式即可
+              console.log(params1);
+              let tmp = params1.split("\n");
+              let res = "" + params1;
+              for (let i in tmp) {
+                res = res.replace(tmp[i], "");
               }
-            },
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: '14',
-                fontWeight: 'bold'
-              }
-            },
-            labelLine: {
-              show: true,
-              length: 20,
-              length2: 0,
-              maxSurfaceAngle: 80,
-              lineStyle: {
-                cap: 'round'
-              }
-            },
-            labelLayout: function (params) {
-              const isLeft = params.labelRect.x < _charts.getWidth() / 2;
-              const points = params.labelLinePoints;
-              // Update the end point.
-              points[2][0] = isLeft
-                ? params.labelRect.x
-                : params.labelRect.x + params.labelRect.width;
-              return {
-                labelLinePoints: points
-              };
-            },
-            data: this.ageItem
+              return res + params1;
+            }
           }
-        ]
+        }
       }
-      option && _charts.setOption(option);
+      this.pieEduOptions = pieOption(this.pieEduChartS)
+      this.pieEduOptions.legend = { ...legend }
+      // this.pieEduOptions.series[1].width = 400
+      this.clickEduPie(0)
+      let fun = params => {
+        this.clickEduPie(params.dataIndex)
+      }
+      this.$refs.eduChart.handleClick(fun)
+      // option && this.$refs.pieChart.setOption(option);
 
     },
     initChartType() {
       const eId = document.getElementById('echartType')
       let _charts = echarts.init(eId)
+      
       let option = {
         tooltip: {
           trigger: 'item'
@@ -365,21 +446,6 @@ export default {
                 return res + params1;
               }
             }
-          //   var target;
-          //   for(var i = 0; i < this.eduItem.length; i++){
-          //       if(i == this.eduItem.length && parseFloat(this.eduItem[i].value * 100).toFixed(2) < parseFloat(0.01)){
-          //           target = " (<0.01"
-          //           break;
-          //       }
-          //       if(name == this.eduItem[i].name){
-          //           target = " (" + (this.eduItem[i].value * 100).toFixed(2) + ""
-          //           break;
-          //       }
-          //   }
-          //   var arr = [
-          //       '{a|' + name + target + '%)}',
-          //   ]
-          //   return arr.join('\n');
           }
         },
         title: {
@@ -467,6 +533,78 @@ export default {
       }
       option && _charts.setOption(option);
 
+    },
+    clickAgePie (seriesIndex) {
+      this.ageItem.forEach((element, index) => {
+        if (index === seriesIndex) {
+          element.label = {
+            show: true,
+
+          };
+          element.labelLine = {
+            show: true,
+            lineStyle: {
+              opacity: 1,
+            }
+
+          };
+          console.log('zlcm')
+        } else {
+          element.label = {
+            show: false,
+
+          };
+          element.labelLine = {
+            show: false,
+            lineStyle: {
+              opacity: 0,
+              color: 'rgba(255,255,255,0)'
+            }
+
+          };
+
+        }
+      });
+      this.pieAgeOptions.series[1].data = this.ageItem
+      // this.$refs.pieChart.hideLoading()
+      this.$refs.ageChart.setOption(this.pieAgeOptions)
+
+    },
+    clickEduPie (seriesIndex) {
+      this.eduItem.forEach((element, index) => {
+        if (index === seriesIndex) {
+          element.label = {
+            show: true,
+
+          };
+          element.labelLine = {
+            show: true,
+            lineStyle: {
+              opacity: 1,
+            }
+
+          };
+          console.log('zlcm')
+        } else {
+          element.label = {
+            show: false,
+
+          };
+          element.labelLine = {
+            show: false,
+            lineStyle: {
+              opacity: 0,
+              color: 'rgba(255,255,255,0)'
+            }
+
+          };
+
+        }
+      });
+      this.pieEduOptions.series[1].data = this.eduItem
+      // this.$refs.pieChart.hideLoading()
+      this.$refs.eduChart.setOption(this.pieEduOptions)
+
     },
     onClickList(index, level) {
       this.activeIndex = index;