From 720b905f1504b2ffa713b14968bd9ef39c99cc2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=88=98=E7=AB=8B=E6=A0=87?= <2658037827@qq.com>
Date: Tue, 12 Dec 2023 18:34:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9bug=20=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/dataBoard/renfang/index.scss  |  12 +-
 src/views/dataBoard/cpts/map/index.vue        |  39 +-
 .../components/MapDialog/List12345.vue        |  14 +-
 .../overview/components/MapDialog/index.vue   |  67 +-
 .../components/MapResourceInfoMore.vue        |   2 +-
 .../dataBoard/overview/components/wtqd.vue    |   2 +-
 src/views/dataBoard/renfang/cpts/rkfx.vue     |  63 +-
 .../dataBoard/renfang/cpts/rkfxPieOption.js   |   2 +-
 src/views/dataBoard/renfang/index.vue         |  18 +-
 .../visualizing/components/dangyuan.vue       | 305 +-------
 .../visualizing/components/dibaorenyuan.vue   | 667 +++--------------
 .../visualizing/components/laonianren.vue     | 310 +-------
 .../visualizing/components/pie_config.js      | 113 +++
 .../visualizing/components/shiyerenyuan.vue   | 678 +-----------------
 .../visualizing/components/teshurenqun.vue    | 106 +--
 .../visualizing/components/zhiyuanzhe.vue     | 308 +-------
 .../modules/PersonnelPortrait/index.vue       |  72 +-
 17 files changed, 497 insertions(+), 2281 deletions(-)
 create mode 100644 src/views/dataBoard/renfang/visualizing/components/pie_config.js

diff --git a/src/assets/scss/dataBoard/renfang/index.scss b/src/assets/scss/dataBoard/renfang/index.scss
index 2a9c5b0aa..d285a460a 100644
--- a/src/assets/scss/dataBoard/renfang/index.scss
+++ b/src/assets/scss/dataBoard/renfang/index.scss
@@ -13,7 +13,7 @@
 
   .g-center {
     position: relative;
-    width: 820px;
+    width: 920px;
   }
 
   .g-right {
@@ -795,19 +795,21 @@
 .visualizing {
   display: flex;
   justify-content: space-between;
-
   &-left {
-    width: 50%;
+    width: calc(50% - 80px);
     height: 400px;
+    margin: 0 40px;
   }
 
   &-right {
-    width: 50%;
+    width: calc(50% - 80px);
     height: 400px;
+    margin: 0 40px;
   }
 
   &-item {
-    width: 33.3%;
+    width: calc(33.3% - 80px);
     height: 400px;
+    margin: 0 40px;
   }
 }
\ No newline at end of file
diff --git a/src/views/dataBoard/cpts/map/index.vue b/src/views/dataBoard/cpts/map/index.vue
index 03190c640..ee1b2a2ae 100644
--- a/src/views/dataBoard/cpts/map/index.vue
+++ b/src/views/dataBoard/cpts/map/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="m-map" :class="{ 'z-td': mapType == 'td' }">
-    <div id="map" :style="{ transform: `scale(${zoom})` }"></div>
+    <div id="map"></div>
+<!--    :style="{ transform: `scale(${zoom})` }"-->
     <div class="btn" v-if="mapStyleType == 'light'" v-show="false" @click="shiftMapStyle('dark')">切换深色模式</div>
     <div class="btn" v-show="false" v-else @click="shiftMapStyle('light')">切换浅色模式</div>
     <!-- :style="{ transform: `scale(${zoom})` }" -->
@@ -978,48 +979,50 @@ export default {
     }
   }
 
+
   /deep/ .l7-popup {
     z-index: 100;
   }
 
   /deep/ .l7-popup-content {
     //background: rgba(#fff, 1);
-    background: rgba(3, 31, 73, 0.72);
-    border: 1px solid #74c9ff;
+    width: 416px;
+    padding: 0 20px !important;
     opacity: 0.9;
-    border-radius: 5px;
     color: #fff;
+    border: 1px solid #74c9ff;
     //box-shadow: 0 0 20px 3px inset rgba(#22f, 0.1);
-    width: 416px;
-    padding: 0 20px !important;
+    border-radius: 5px;
+    background: rgba(3, 31, 73, 0.72);
     background: url("@/assets/images/overview/dia_con.png");
+    border: none;
 
     &:before {
-      content: "";
-      display: block;
-      background: url("@/assets/images/overview/dia_head.png");
-      height: 29px;
-      width: 100%;
       position: absolute;
       top: -27.5px;
       left: 0;
+      display: block;
+      width: 100%;
+      height: 29px;
+      content: "";
+      background: url("@/assets/images/overview/dia_head.png");
     }
 
     &:after {
-      content: "";
-      display: block;
-      background: url("@/assets/images/overview/dia_foot.png");
-      height: 26px;
-      width: 100%;
-      left: 0;
       position: absolute;
       bottom: -24px;
+      left: 0;
+      display: block;
+      width: 100%;
+      height: 26px;
+      content: "";
+      background: url("@/assets/images/overview/dia_foot.png");
     }
   }
 
   /deep/ .l7-popup-close-button {
-    padding: 4px;
     font-size: 36px;
+    padding: 4px;
     color: rgba(#fff, 0.8);
   }
 
diff --git a/src/views/dataBoard/overview/components/MapDialog/List12345.vue b/src/views/dataBoard/overview/components/MapDialog/List12345.vue
index 08b5cbe66..770226e65 100644
--- a/src/views/dataBoard/overview/components/MapDialog/List12345.vue
+++ b/src/views/dataBoard/overview/components/MapDialog/List12345.vue
@@ -5,17 +5,17 @@
                 element-loading-background="rgba(0, 0, 0, 0.3)">
         <el-table-column label="序号" type="index" width="80"/>
         <el-table-column label="所属网格" show-overflow-tooltip prop="gridName" width="120"/>
-        <el-table-column label="接收时间" prop="happenTime" width="180"/>
-        <el-table-column label="问题描述" show-overflow-tooltip prop="eventContent" width="120"/>
-        <el-table-column label="办结时限" prop="timeLimit" width="180"/>
-        <el-table-column label="联系人" prop="name" width="120"/>
-        <el-table-column label="联系电话" prop="mobile" width="120">
+        <el-table-column label="接收时间" prop="happenTime" width="160"/>
+        <el-table-column label="问题描述" show-overflow-tooltip prop="eventContent" min-width="120"/>
+        <el-table-column label="办结时限" prop="timeLimit" width="160"/>
+        <el-table-column label="联系人" prop="name" width="80"/>
+        <el-table-column label="联系电话" prop="mobile" width="100">
           <template slot-scope="scope">
             {{ $sensitive(scope.row.mobile, 3, 7) }}
           </template>
         </el-table-column>
-        <el-table-column label="状态" prop="statusName" width="120"/>
-        <el-table-column label="操作" prop="op" width="250">
+        <el-table-column label="状态" prop="statusName" width="80"/>
+        <el-table-column label="操作" prop="op" width="200">
           <template slot-scope="scope">
             <CallPhone text="拨打电话"/>
             <span class="handle" @click="handleDispatch(scope.row)">处理</span>
diff --git a/src/views/dataBoard/overview/components/MapDialog/index.vue b/src/views/dataBoard/overview/components/MapDialog/index.vue
index 408b89145..11bbc6e06 100644
--- a/src/views/dataBoard/overview/components/MapDialog/index.vue
+++ b/src/views/dataBoard/overview/components/MapDialog/index.vue
@@ -20,25 +20,25 @@
         </div>
 
         <div class="contents">
-     <div class="map-dialog-con">
-              <div class="tree">
-                <el-tree
-                    ref="tree"
-                    :data="type === 'njjwtqk'?njjwtqkTree:type === 'bmysxqk'?bmysxqkTree:type === 'xqwwcqk'?xqwwcqkTree:[]"
-                    :default-expand-all="true"
-                    :props="defaultProps"
-                    highlight-current
-                    icon-class="el-icon-arrow-right"
-                    node-key="value"
-                    @node-click="handleNodeClick"
-                >
+          <div class="map-dialog-con">
+            <div class="tree">
+              <el-tree
+                  ref="tree"
+                  :data="type === 'njjwtqk'?njjwtqkTree:type === 'bmysxqk'?bmysxqkTree:type === 'xqwwcqk'?xqwwcqkTree:[]"
+                  :default-expand-all="true"
+                  :props="defaultProps"
+                  highlight-current
+                  icon-class="el-icon-arrow-right"
+                  node-key="value"
+                  @node-click="handleNodeClick"
+              >
                    <span slot-scope="{ node, data }" class="custom-tree-node">
                       <span>{{ node.label }}</span>
                       <span v-if="data.total">（{{ data.total }}）</span>
                    </span>
-                </el-tree>
-              </div>
-          <div class="right-con">
+              </el-tree>
+            </div>
+            <div class="right-con">
               <template v-if="type === 'njjwtqk'">
                 <div class="eventDetails">
                   <img
@@ -56,7 +56,7 @@
                 <DifficultyCharts v-if="catVal === 1" :currentLevelData="currentLevelData"
                                   style="margin-bottom: 56px;"/>
                 <DisputeDispatch v-if="catVal === 2" :currentLevelData="currentLevelData" style="margin-bottom: 56px;"/>
-                <Njjwtqk :currentLevelData="currentLevelData" :catVal="catVal"/>
+                <Njjwtqk :catVal="catVal" :currentLevelData="currentLevelData"/>
               </template>
 
               <template v-if="type === 'bmysxqk'">
@@ -82,8 +82,8 @@
                 <DemandList :categoryCode="catVal" :currentLevelData="currentLevelData"/>
               </template>
 
-        </div>
-        </div>
+            </div>
+          </div>
         </div>
       </div>
     </el-dialog>
@@ -118,9 +118,7 @@ export default {
     DemandList,
     ResourceDispatch
   },
-  props: {
-
-  },
+  props: {},
   data() {
     return {
       total: 10,
@@ -146,7 +144,7 @@ export default {
       this.dialogVisible = false;
       this.$emit('close')
     },
-    open(data,type) {
+    open(data, type) {
       this.dialogVisible = true;
       this.currentLevelData = data
       this.type = type
@@ -181,7 +179,9 @@ export default {
             item.label = item.label + '(' + data.filter(item2 => item2.markType === item.value)[0].total + ')'
           })
           this.njjwtqkTree = njjwtqkTree
-          this.$refs.tree.setCurrentKey(this.catVal)
+          this.$nextTick(() => {
+            this.$refs.tree.setCurrentKey(this.catVal)
+          })
         })
       }
       if (this.type === 'xqwwcqk') {
@@ -204,7 +204,9 @@ export default {
               })
             }
           })
-          this.$refs.tree.setCurrentKey(this.catVal)
+          this.$nextTick(() => {
+            this.$refs.tree.setCurrentKey(this.catValSub)
+          })
         })
       }
     },
@@ -222,8 +224,11 @@ export default {
               }
             });
             this.xqwwcqkTree = this.xqwwcqkTree.filter(item => item.value)
-            this.$refs.tree.setCurrentKey(this.catVal)
+            this.catVal = this.xqwwcqkTree[0].value
             this.catLabel = this.xqwwcqkTree[0].label;
+            this.$nextTick(() => {
+              this.$refs.tree.setCurrentKey(this.catVal)
+            })
           })
           .catch(() => {
             return this.$message.error("网络错误");
@@ -266,15 +271,15 @@ export default {
 .handle {
   font-size: 14px;
   margin-left: 10px;
-  color: #9A69EC;
   cursor: pointer;
+  color: #9A69EC;
 }
 
 .view {
   font-size: 14px;
   margin-left: 10px;
-  color: #007FF1;
   cursor: pointer;
+  color: #007FF1;
 }
 
 .eventDetails {
@@ -291,18 +296,22 @@ export default {
 .tree {
   height: 855px;
 }
+
 .map-dialog-con {
   display: flex;
   justify-content: space-between;
 }
+
 .tree {
   flex: 0 0 180px;
 }
+
 .right-con {
-  width: calc(100% - 200px);
   flex: 0 0 calc(100% - 200px);
+  width: calc(100% - 200px);
 }
+
 .pagination-container {
-  padding-bottom: 0!important;
+  padding-bottom: 0 !important;
 }
 </style>
diff --git a/src/views/dataBoard/overview/components/MapResourceInfoMore.vue b/src/views/dataBoard/overview/components/MapResourceInfoMore.vue
index 9a921fcda..12b111351 100644
--- a/src/views/dataBoard/overview/components/MapResourceInfoMore.vue
+++ b/src/views/dataBoard/overview/components/MapResourceInfoMore.vue
@@ -355,7 +355,7 @@ export default {
 @import "~@/assets/scss/dataBoard/dialog.scss";
 
 .contents {
-  padding: 40px 50px;
+  padding: 40px 50px 0;
 
   .items {
     font-size: 14px;
diff --git a/src/views/dataBoard/overview/components/wtqd.vue b/src/views/dataBoard/overview/components/wtqd.vue
index 22e2ed5f4..e2a8a9710 100644
--- a/src/views/dataBoard/overview/components/wtqd.vue
+++ b/src/views/dataBoard/overview/components/wtqd.vue
@@ -369,7 +369,7 @@ export default {
     background: #0a2a5c;
 
     span {
-      text-align: center;
+      //text-align: center;
     }
 
     > :nth-child(1) {
diff --git a/src/views/dataBoard/renfang/cpts/rkfx.vue b/src/views/dataBoard/renfang/cpts/rkfx.vue
index 4e9491067..010951383 100644
--- a/src/views/dataBoard/renfang/cpts/rkfx.vue
+++ b/src/views/dataBoard/renfang/cpts/rkfx.vue
@@ -16,11 +16,13 @@
         />
       </div>
       <div class="legend cur">
-        <div v-for="item in pieData" :key="'pie' + item.name" class="legend-row" @click="handleClickItem(item)">
-          <div class="name">{{ item.name }}</div>
-          <div class="content">
-            <div class="num">{{ item.value }}</div>
-            <div class="unit">人</div>
+        <div>
+          <div v-for="item in pieData" :key="'pie' + item.name" class="legend-row" @click="handleClickItem(item)">
+            <div class="name">{{ item.name }}</div>
+            <div class="content">
+              <div class="num">{{ item.value }}</div>
+              <div class="unit">人</div>
+            </div>
           </div>
         </div>
       </div>
@@ -377,31 +379,37 @@ export default {
       cursor: pointer;
       text-align: center;
       color: #ffffff;
-      background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg.png);
+      background-image: url(@/assets/images/shuju/renfang/rkfx-bg.png);
       background-size: cover;
     }
 
     .item-sel {
-      background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg-sel.png);
+      background-image: url(@/assets/images/shuju/renfang/rkfx-bg-sel.png);
       background-size: cover;
     }
   }
 
   .pie-main {
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
     margin-left: 25px;
 
     .legend {
       // flex: 0 0 140px;
-      margin-top: 40px;
+      //margin-top: 40px;
+      display: flex;
+      overflow-y: auto;
+      overflow-x: hidden;
+      align-items: center;
+      height: 178px;
+      padding: 0 20px 0 0px;
 
       .legend-row {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        margin-top: 15px;
+        margin-bottom: 15px;
 
         &:nth-child(1) .name::before {
           background: #1a95ff;
@@ -444,35 +452,38 @@ export default {
         }
 
         .name {
-          font-family: PingFangSC-Regular, PingFang SC;
-          font-size: 12px;
+          font-family: PingFang SC;
+          font-size: 14px;
           font-weight: 400;
-          line-height: 17px;
-          position: relative;
-          margin-left: 5px;
-          color: rgba(255, 255, 255, 0.65);
+          color: #A3B9DA;
+          display: flex;
+          align-items: center;
+          white-space: nowrap;
+          margin-right: 24px;
 
           &::before {
-            position: absolute;
-            top: 4px;
-            left: -15px;
+            //position: absolute;
+            //top: 4px;
+            //left: -15px;
+            display: block;
+            margin-right: 5px;
             width: 8px;
+            flex: 0 0 8px;
             height: 8px;
             content: "";
           }
         }
 
         .content {
-          font-family: PingFangSC-Medium, PingFang SC;
+          font-family: PingFang SC;
           font-weight: 500;
           display: flex;
-          align-items: flex-end;
-          margin-left: 24px;
-          color: #ffffff;
+          align-items: center;
+          color: #FFFFFF;
         }
 
         .num {
-          font-size: 20px;
+          font-size: 18px;
         }
 
         .unit {
@@ -484,9 +495,9 @@ export default {
 
     .pie {
       flex: 0 0 280px;
+      height: 180px;
       min-height: 146px;
-      height: 100%;
-      margin-top: 32px;
+      //margin-top: 32px;
     }
   }
 }
diff --git a/src/views/dataBoard/renfang/cpts/rkfxPieOption.js b/src/views/dataBoard/renfang/cpts/rkfxPieOption.js
index 4c3ce315f..edc0e9670 100644
--- a/src/views/dataBoard/renfang/cpts/rkfxPieOption.js
+++ b/src/views/dataBoard/renfang/cpts/rkfxPieOption.js
@@ -21,7 +21,7 @@ export function pieOption() {
 			{
 				name: "",
 				type: "pie",
-				radius: ["50%", "100%"],
+				radius: ["50%", "80%"],
 				center: ["50%", "50%"],
 				roseType: "area",
 				itemStyle: {
diff --git a/src/views/dataBoard/renfang/index.vue b/src/views/dataBoard/renfang/index.vue
index 17a1a16d0..29a81e5c9 100644
--- a/src/views/dataBoard/renfang/index.vue
+++ b/src/views/dataBoard/renfang/index.vue
@@ -220,17 +220,8 @@
           </div>
         </div>
 
-        <div class="bgImg m-box m-cate">
+        <div class="bgImg m-box m-cate map-bottom">
           <div class="box-title">
-            <!--            <img
-                            class="box-title-bg"
-                            src="~@/assets/images/shuju/main/card-title-bg-800.png"
-                        />
-                        <div v-if="!displayedForecast" class="box-title-txt">
-                          居民分类统计
-                        </div>
-                        <div v-else class="box-title-txt">居民分类统计-智能预测</div>
-                        -->
             <Title v-if="!displayedForecast" text="居民概览">
               <template>
               <div
@@ -818,12 +809,15 @@ export default {
 @import "@/assets/scss/dataBoard/renfang/index.scss";
 
 .bgImg {
-  margin-top: 5px;
+  margin-bottom: 7px;
   background: url('@/assets/images/shuju/overview/box-bg.png') no-repeat;
   background-size: 100% 100%;
 }
 
 .m-box {
-  height: 320px;
+  height: 323px;
+}
+.map-bottom {
+  margin: 0 17px;
 }
 </style>
diff --git a/src/views/dataBoard/renfang/visualizing/components/dangyuan.vue b/src/views/dataBoard/renfang/visualizing/components/dangyuan.vue
index b48261795..47f09f590 100644
--- a/src/views/dataBoard/renfang/visualizing/components/dangyuan.vue
+++ b/src/views/dataBoard/renfang/visualizing/components/dangyuan.vue
@@ -26,6 +26,7 @@
 <script>
 import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue";
 import * as echarts from "echarts";
+import {color, legend, series, title} from "@/views/dataBoard/renfang/visualizing/components/pie_config";
 
 function dataFormatter(arr) {
   return arr.map((item) => {
@@ -100,101 +101,13 @@ export default {
       let div = document.getElementById("dyLeftChart");
       this.myChart1 = echarts.init(div);
       const option = {
-        color: [
-          "#15a7ed",
-          "#22b998",
-          "#5f6ff4",
-          "#a66eeb",
-          "#faa834",
-          "#fd6200",
-          "#fb3905",
-        ],
-        legend: {
-          orient: "vertical",
-          top: 20,
-          left: 10,
-          icon: "rect",
-          itemHeight: 14,
-          itemWidth: 14,
-          textStyle: {
-            color: "#ffffff",
-            rich: {
-              name: {
-                width: 90,
-                fontSize: 12,
-                color: "#dddee7",
-              },
-              value: {
-                width: 30,
-                align: "right",
-                fontSize: 18,
-              },
+            tooltip: {
+              trigger: "item",
             },
-          },
-          data: this.dyLeft,
-          formatter: (name) => {
-            if (this.dyLeft.length) {
-              const item = this.dyLeft.filter((item) => item.name === name)[0];
-              return `{name|${name}}{value| ${item.value}}`;
-            }
-          },
-        },
-        toolbox: {
-          show: false,
-          feature: {
-            mark: { show: true },
-            dataView: { show: true, readOnly: false },
-            restore: { show: true },
-            saveAsImage: { show: true },
-          },
-        },
-        title: {
-          show: !this.dyLeft || this.dyLeft.length == 0, // 是否要展示“暂无数据”矢量图
-          text: " {a|}", // 写入占位符a，以便后续填充内容
-          x: "center",
-          y: "center",
-          subtext: "暂无数据", // 子标题
-          itemGap: -10, // 设置主副标题间隔
-          textStyle: {
-            rich: {
-              a: {
-                height: 128, // 设置图片高度
-                width: 268, // 设置图片宽度
-                backgroundColor: {
-                  // 引入图片，作为背景图，填写相对路径
-                  image: require("@/assets/images/overview/zanwu.png"),
-                },
-              },
-            },
-          },
-          subtextStyle: {
-            // 配置副标题的文字样式
-            fontSize: 12,
-            color: "#ffffff",
-          },
-        },
-        series: [
-          {
-            type: "pie",
-            radius: this.dyLeft && this.dyLeft.length > 0 ? [30, 130] : [0, 0],
-            center: ["50%", "50%"],
-            roseType: "area",
-            itemStyle: {
-              borderRadius: 0,
-            },
-            top: 20,
-            left: -40,
-            label: {
-              position: "inside",
-              formatter: "{d}%",
-              textStyle: {
-                color: "#ffffff",
-                fontSize: 12,
-              },
-            },
-            data: this.dyLeft,
-          },
-        ],
+            color,
+            legend: legend(this.dyLeft),
+            title: title(this.dyLeft),
+            series: series(this.dyLeft)
       };
       this.myChart1.setOption(option);
       this.myChart1.on("click", (e) => {
@@ -216,102 +129,13 @@ export default {
       let div = document.getElementById("dyRightChart");
       this.myChart2 = echarts.init(div);
       const option = {
-        color: [
-          "#15a7ed",
-          "#22b998",
-          "#5f6ff4",
-          "#a66eeb",
-          "#faa834",
-          "#fd6200",
-          "#fb3905",
-        ],
-        legend: {
-          orient: "vertical",
-          top: 20,
-          left: 10,
-          icon: "rect",
-          itemHeight: 14,
-          itemWidth: 14,
-          textStyle: {
-            color: "#ffffff",
-            rich: {
-              name: {
-                width: 80,
-                fontSize: 12,
-                color: "#dddee7",
-              },
-              value: {
-                width: 30,
-                align: "right",
-                fontSize: 18,
-              },
-            },
-          },
-          data: this.dyRight,
-          formatter: (name) => {
-            if (this.dyRight.length) {
-              const item = this.dyRight.filter((item) => item.name === name)[0];
-              return `{name|${name}}{value| ${item.value}}`;
-            }
-          },
-        },
-        toolbox: {
-          show: false,
-          feature: {
-            mark: { show: true },
-            dataView: { show: true, readOnly: false },
-            restore: { show: true },
-            saveAsImage: { show: true },
-          },
-        },
-        title: {
-          show: !this.dyRight || this.dyRight.length == 0, // 是否要展示“暂无数据”矢量图
-          text: " {a|}", // 写入占位符a，以便后续填充内容
-          x: "center",
-          y: "center",
-          subtext: "暂无数据", // 子标题
-          itemGap: -10, // 设置主副标题间隔
-          textStyle: {
-            rich: {
-              a: {
-                height: 128, // 设置图片高度
-                width: 268, // 设置图片宽度
-                backgroundColor: {
-                  // 引入图片，作为背景图，填写相对路径
-                  image: require("@/assets/images/overview/zanwu.png"),
-                },
-              },
+            tooltip: {
+              trigger: "item",
             },
-          },
-          subtextStyle: {
-            // 配置副标题的文字样式
-            fontSize: 12,
-            color: "#ffffff",
-          },
-        },
-        series: [
-          {
-            type: "pie",
-            radius:
-                this.dyRight && this.dyRight.length > 0 ? [30, 130] : [0, 0],
-            center: ["50%", "50%"],
-            roseType: "area",
-            itemStyle: {
-              borderRadius: 0,
-            },
-            top: 20,
-            left: -40,
-            label: {
-              position: "inside",
-              formatter: "{d}%",
-              textStyle: {
-                color: "#ffffff",
-                fontSize: 12,
-              },
-            },
-            data: this.dyRight,
-          },
-        ],
+            color,
+            legend: legend(this.dyRight),
+            title: title(this.dyRight),
+            series: series(this.dyRight)
       };
       this.myChart2.on("click", (e) => {
         this.$router.push({
@@ -334,102 +158,13 @@ export default {
       let div = document.getElementById("resiServiceChart");
       this.myChart3 = echarts.init(div);
       const option = {
-        color: [
-          "#15a7ed",
-          "#22b998",
-          "#5f6ff4",
-          "#a66eeb",
-          "#faa834",
-          "#fd6200",
-          "#fb3905",
-        ],
-        legend: {
-          orient: "vertical",
-          top: 20,
-          left: 10,
-          icon: "rect",
-          itemHeight: 14,
-          itemWidth: 14,
-          textStyle: {
-            color: "#ffffff",
-            rich: {
-              name: {
-                width: 90,
-                fontSize: 12,
-                color: "#dddee7",
-              },
-              value: {
-                width: 30,
-                align: "right",
-                fontSize: 18,
-              },
+            tooltip: {
+              trigger: "item",
             },
-          },
-          data: this.resiService,
-          formatter: (name) => {
-            if (this.resiService.length) {
-              const item = this.resiService.filter((item) => item.name === name)[0];
-              return `{name|${name}}{value| ${item.value}}`;
-            }
-          },
-        },
-        toolbox: {
-          show: false,
-          feature: {
-            mark: { show: true },
-            dataView: { show: true, readOnly: false },
-            restore: { show: true },
-            saveAsImage: { show: true },
-          },
-        },
-        title: {
-          show: !this.resiService || this.resiService.length == 0, // 是否要展示“暂无数据”矢量图
-          text: " {a|}", // 写入占位符a，以便后续填充内容
-          x: "center",
-          y: "center",
-          subtext: "暂无数据", // 子标题
-          itemGap: -10, // 设置主副标题间隔
-          textStyle: {
-            rich: {
-              a: {
-                height: 128, // 设置图片高度
-                width: 268, // 设置图片宽度
-                backgroundColor: {
-                  // 引入图片，作为背景图，填写相对路径
-                  image: require("@/assets/images/overview/zanwu.png"),
-                },
-              },
-            },
-          },
-          subtextStyle: {
-            // 配置副标题的文字样式
-            fontSize: 12,
-            color: "#ffffff",
-          },
-        },
-        series: [
-          {
-            type: "pie",
-            radius:
-                this.resiService && this.resiService.length > 0 ? [30, 130] : [0, 0],
-            center: ["50%", "50%"],
-            roseType: "area",
-            itemStyle: {
-              borderRadius: 0,
-            },
-            top: 20,
-            left: -40,
-            label: {
-              position: "inside",
-              formatter: "{d}%",
-              textStyle: {
-                color: "#ffffff",
-                fontSize: 12,
-              },
-            },
-            data: this.resiService,
-          },
-        ],
+            color,
+            legend: legend(this.resiService),
+            title: title(this.resiService),
+            series: series(this.resiService)
       };
       this.myChart3.setOption(option);
       this.myChart3.on("click", (e) => {
@@ -458,6 +193,6 @@ export default {
 ></style>
 <style lang="scss" scoped>
 .laonianren {
-  padding: 140px 240px;
+  padding: 140px 130px;
 }
 </style>
diff --git a/src/views/dataBoard/renfang/visualizing/components/dibaorenyuan.vue b/src/views/dataBoard/renfang/visualizing/components/dibaorenyuan.vue
index 963f90ede..ed3322b4f 100644
--- a/src/views/dataBoard/renfang/visualizing/components/dibaorenyuan.vue
+++ b/src/views/dataBoard/renfang/visualizing/components/dibaorenyuan.vue
@@ -3,19 +3,19 @@
     <div class="visualizing">
       <div class="visualizing-item">
         <div>
-          <data-title title="低保类别统计" />
+          <data-title title="低保类别统计"/>
         </div>
         <div id="dbryChart1" style="height: 380px"></div>
       </div>
       <div class="visualizing-item">
         <div>
-          <data-title title="低保显示原因统计" />
+          <data-title title="低保显示原因统计"/>
         </div>
         <div id="dbryChart2" style="height: 380px"></div>
       </div>
       <div class="visualizing-item">
         <div>
-          <data-title title="低保享受服务情况统计" />
+          <data-title title="低保享受服务情况统计"/>
         </div>
         <div id="resiServiceChart" style="height: 400px"></div>
       </div>
@@ -23,13 +23,13 @@
     <div class="visualizing">
       <div class="visualizing-left">
         <div>
-          <data-title title="温暖找人统计" />
+          <data-title title="温暖找人统计"/>
         </div>
         <div id="dbryChart3" style="height: 380px"></div>
       </div>
       <div class="visualizing-right">
         <div>
-          <data-title title="服务找人统计" />
+          <data-title title="服务找人统计"/>
         </div>
         <div id="dbryChart4" style="height: 380px"></div>
       </div>
@@ -40,6 +40,7 @@
 <script>
 import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue";
 import * as echarts from "echarts";
+import {color, legend, series, title} from "@/views/dataBoard/renfang/visualizing/components/pie_config";
 
 function dataFormatter(arr) {
   return arr.map((item) => {
@@ -49,6 +50,7 @@ function dataFormatter(arr) {
     };
   });
 }
+
 export default {
   name: "dibaorenyuan",
   props: {
@@ -79,168 +81,73 @@ export default {
   methods: {
     getData() {
       this.$http
-        .get("/actual/base/peopleRoomOverview/lowIncomePie?type=0")
-        .then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg);
-          }
-          this.dbryData1 = dataFormatter(res.data);
-          this.dbryDataCharts1();
-        })
-        .catch(() => {});
+          .get("/actual/base/peopleRoomOverview/lowIncomePie?type=0")
+          .then(({data: res}) => {
+            if (res.code !== 0) {
+              return this.$message.error(res.msg);
+            }
+            this.dbryData1 = dataFormatter(res.data);
+            this.dbryDataCharts1();
+          })
+          .catch(() => {
+          });
       this.$http
-        .get("/actual/base/peopleRoomOverview/lowIncomePie?type=1")
-        .then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg);
-          }
-          this.dbryData2 = dataFormatter(res.data);
-          this.dbryDataCharts2();
-        })
-        .catch(() => {});
+          .get("/actual/base/peopleRoomOverview/lowIncomePie?type=1")
+          .then(({data: res}) => {
+            if (res.code !== 0) {
+              return this.$message.error(res.msg);
+            }
+            this.dbryData2 = dataFormatter(res.data);
+            this.dbryDataCharts2();
+          })
+          .catch(() => {
+          });
       this.$http
-        .get("/actual/base/peopleRoomOverview/lowIncomePie?type=2")
-        .then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg);
-          }
-          this.dbryData3 = dataFormatter(res.data);
-          this.dbryDataCharts3();
-        })
-        .catch(() => {});
+          .get("/actual/base/peopleRoomOverview/lowIncomePie?type=2")
+          .then(({data: res}) => {
+            if (res.code !== 0) {
+              return this.$message.error(res.msg);
+            }
+            this.dbryData3 = dataFormatter(res.data);
+            this.dbryDataCharts3();
+          })
+          .catch(() => {
+          });
       this.$http
-        .get("/actual/base/peopleRoomOverview/lowIncomePie?type=3")
-        .then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg);
-          }
-          this.dbryData4 = dataFormatter(res.data);
-          this.dbryDataCharts4();
-        })
-        .catch(() => {});
+          .get("/actual/base/peopleRoomOverview/lowIncomePie?type=3")
+          .then(({data: res}) => {
+            if (res.code !== 0) {
+              return this.$message.error(res.msg);
+            }
+            this.dbryData4 = dataFormatter(res.data);
+            this.dbryDataCharts4();
+          })
+          .catch(() => {
+          });
       this.$http
-        .get("/actual/base/peopleRoomOverview/findPeoplePie/SUBSISTENCE_ALLOWANCE_FLAG")
-        .then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg);
-          }
-          this.resiService = dataFormatter(res.data);
-          this.initResiServiceCharts();
-        })
-        .catch(() => {});
+          .get("/actual/base/peopleRoomOverview/findPeoplePie/SUBSISTENCE_ALLOWANCE_FLAG")
+          .then(({data: res}) => {
+            if (res.code !== 0) {
+              return this.$message.error(res.msg);
+            }
+            this.resiService = dataFormatter(res.data);
+            this.initResiServiceCharts();
+          })
+          .catch(() => {
+          });
     },
     dbryDataCharts1() {
       let div = document.getElementById("dbryChart1");
       this.myChart1 = echarts.init(div);
       const option = {
-        color: [
-          "#15a7ed",
-          "#22b998",
-          "#5f6ff4",
-          "#a66eeb",
-          "#faa834",
-          "#fd6200",
-          "#fb3905",
-        ],
+
         tooltip: {
-          show: true,
-        },
-        legend: {
-          orient: "vertical",
-          top: 20,
-          left: 10,
-          icon: "rect",
-          itemHeight: 14,
-          itemWidth: 14,
-          textStyle: {
-            color: "#ffffff",
-            rich: {
-              name: {
-                width: 90,
-                fontSize: 12,
-                color: "#dddee7",
-              },
-              value: {
-                width: 30,
-                align: "right",
-                fontSize: 18,
-              },
-            },
-          },
-          data: this.dbryData1,
-          tooltip: {
-            show: true,
-          },
-          formatter: (name) => {
-            if (this.dbryData1.length) {
-              const item = this.dbryData1.filter(
-                (item) => item.name === name
-              )[0];
-              return `{name|${echarts.format.truncateText(
-                name,
-                100,
-                "14px Microsoft Yahei",
-                "…"
-              )}}{value| ${item.value}}`;
-            }
-          },
-        },
-        toolbox: {
-          show: false,
-          feature: {
-            mark: { show: true },
-            dataView: { show: true, readOnly: false },
-            restore: { show: true },
-            saveAsImage: { show: true },
-          },
-        },
-        title: {
-          show: !this.dbryData1 || this.dbryData1.length == 0, // 是否要展示“暂无数据”矢量图
-          text: " {a|}", // 写入占位符a，以便后续填充内容
-          x: "center",
-          y: "center",
-          subtext: "暂无数据", // 子标题
-          itemGap: -10, // 设置主副标题间隔
-          textStyle: {
-            rich: {
-              a: {
-                height: 126, // 设置图片高度
-                width: 268, // 设置图片宽度
-                backgroundColor: {
-                  // 引入图片，作为背景图，填写相对路径
-                  image: require("@/assets/images/overview/zanwu.png"),
-                },
-              },
-            },
-          },
-          subtextStyle: {
-            // 配置副标题的文字样式
-            fontSize: 12,
-            color: "#ffffff",
-          },
+          trigger: "item",
         },
-        series: [
-          {
-            type: "pie",
-            radius: this.dbryData1 && this.dbryData1.length > 0?[30, 130]:[0,0],
-            center: ["50%", "50%"],
-            roseType: "area",
-            itemStyle: {
-              borderRadius: 0,
-            },
-            top: 20,
-            left: -40,
-            label: {
-              position: "inside",
-              formatter: "{d}%",
-              textStyle: {
-                color: "#ffffff",
-                fontSize: 12,
-              },
-            },
-            data: this.dbryData1,
-          },
-        ],
+        color,
+        legend: legend(this.dbryData1),
+        title: title(this.dbryData1),
+        series: series(this.dbryData1)
       };
       this.myChart1.setOption(option);
       this.myChart1.on("click", (e) => {
@@ -262,114 +169,13 @@ export default {
       let div = document.getElementById("dbryChart2");
       this.myChart2 = echarts.init(div);
       const option = {
-        color: [
-          "#15a7ed",
-          "#22b998",
-          "#5f6ff4",
-          "#a66eeb",
-          "#faa834",
-          "#fd6200",
-          "#fb3905",
-        ],
         tooltip: {
-          show: true,
-        },
-        legend: {
-          orient: "vertical",
-          top: 20,
-          left: 10,
-          icon: "rect",
-          itemHeight: 14,
-          itemWidth: 14,
-          textStyle: {
-            color: "#ffffff",
-            rich: {
-              name: {
-                width: 90,
-                fontSize: 12,
-                color: "#dddee7",
-              },
-              value: {
-                width: 30,
-                align: "right",
-                fontSize: 18,
-              },
-            },
-          },
-          data: this.dbryData2,
-          tooltip: {
-            show: true,
-          },
-          formatter: (name) => {
-            if (this.dbryData2.length) {
-              const item = this.dbryData2.filter(
-                (item) => item.name === name
-              )[0];
-              return `{name|${echarts.format.truncateText(
-                name,
-                100,
-                "14px Microsoft Yahei",
-                "…"
-              )}}{value| ${item.value}}`;
-            }
-          },
-        },
-        toolbox: {
-          show: false,
-          feature: {
-            mark: { show: true },
-            dataView: { show: true, readOnly: false },
-            restore: { show: true },
-            saveAsImage: { show: true },
-          },
-        },
-        title: {
-          show: !this.dbryData2 || this.dbryData2.length == 0, // 是否要展示“暂无数据”矢量图
-          text: " {a|}", // 写入占位符a，以便后续填充内容
-          x: "center",
-          y: "center",
-          subtext: "暂无数据", // 子标题
-          itemGap: -10, // 设置主副标题间隔
-          textStyle: {
-            rich: {
-              a: {
-                height: 126, // 设置图片高度
-                width: 268, // 设置图片宽度
-                backgroundColor: {
-                  // 引入图片，作为背景图，填写相对路径
-                  image: require("@/assets/images/overview/zanwu.png"),
-                },
-              },
-            },
-          },
-          subtextStyle: {
-            // 配置副标题的文字样式
-            fontSize: 12,
-            color: "#ffffff",
-          },
+          trigger: "item",
         },
-        series: [
-          {
-            type: "pie",
-            radius: this.dbryData2 && this.dbryData2.length > 0?[30, 130]:[0,0],
-            center: ["50%", "50%"],
-            roseType: "area",
-            itemStyle: {
-              borderRadius: 0,
-            },
-            top: 20,
-            left: -40,
-            label: {
-              position: "inside",
-              formatter: "{d}%",
-              textStyle: {
-                color: "#ffffff",
-                fontSize: 12,
-              },
-            },
-            data: this.dbryData2,
-          },
-        ],
+        color,
+        legend: legend(this.dbryData2),
+        title: title(this.dbryData2),
+        series: series(this.dbryData2)
       };
       this.myChart2.setOption(option);
       this.myChart2.on("click", (a, b) => {
@@ -391,116 +197,13 @@ export default {
       let div = document.getElementById("dbryChart3");
       this.myChart3 = echarts.init(div);
       const option = {
-        color: [
-          "#15a7ed",
-          "#22b998",
-          "#5f6ff4",
-          "#a66eeb",
-          "#faa834",
-          "#fd6200",
-          "#fb3905",
-        ],
         tooltip: {
-          show: true,
-        },
-        legend: {
-          type: "scroll",
-          orient: "vertical",
-          top: 20,
-          left: 10,
-          icon: "rect",
-          itemHeight: 14,
-          itemWidth: 14,
-          textStyle: {
-            width: 120,
-            color: "#ffffff",
-            rich: {
-              name: {
-                width: 90,
-                fontSize: 12,
-                color: "#dddee7",
-              },
-              value: {
-                width: 30,
-                align: "right",
-                fontSize: 18,
-              },
-            },
-          },
-          data: this.dbryData3,
-          tooltip: {
-            show: true,
-          },
-          formatter: (name) => {
-            if (this.dbryData3.length) {
-              const item = this.dbryData3.filter(
-                (item) => item.name === name
-              )[0];
-              return `{name|${echarts.format.truncateText(
-                name,
-                100,
-                "14px Microsoft Yahei",
-                "…"
-              )}}{value| ${item.value}}`;
-            }
-          },
-        },
-        toolbox: {
-          show: false,
-          feature: {
-            mark: { show: true },
-            dataView: { show: true, readOnly: false },
-            restore: { show: true },
-            saveAsImage: { show: true },
-          },
+          trigger: "item",
         },
-        title: {
-          show: !this.dbryData3 || this.dbryData3.length == 0, // 是否要展示“暂无数据”矢量图
-          text: " {a|}", // 写入占位符a，以便后续填充内容
-          x: "center",
-          y: "center",
-          subtext: "暂无数据", // 子标题
-          itemGap: -10, // 设置主副标题间隔
-          textStyle: {
-            rich: {
-              a: {
-                height: 126, // 设置图片高度
-                width: 268, // 设置图片宽度
-                backgroundColor: {
-                  // 引入图片，作为背景图，填写相对路径
-                  image: require("@/assets/images/overview/zanwu.png"),
-                },
-              },
-            },
-          },
-          subtextStyle: {
-            // 配置副标题的文字样式
-            fontSize: 12,
-            color: "#ffffff",
-          },
-        },
-        series: [
-          {
-            type: "pie",
-            radius: this.dbryData3 && this.dbryData3.length > 0?[30, 130]:[0,0],
-            center: ["50%", "50%"],
-            roseType: "area",
-            itemStyle: {
-              borderRadius: 0,
-            },
-            top: 20,
-            left: -40,
-            label: {
-              position: "inside",
-              formatter: "{d}%",
-              textStyle: {
-                color: "#ffffff",
-                fontSize: 12,
-              },
-            },
-            data: this.dbryData3,
-          },
-        ],
+        color,
+        legend: legend(this.dbryData3),
+        title: title(this.dbryData3),
+        series: series(this.dbryData3)
       };
       this.myChart3.setOption(option);
       this.myChart3.on("click", (a, b) => {
@@ -521,115 +224,13 @@ export default {
       let div = document.getElementById("dbryChart4");
       this.myChart4 = echarts.init(div);
       const option = {
-        color: [
-          "#15a7ed",
-          "#22b998",
-          "#5f6ff4",
-          "#a66eeb",
-          "#faa834",
-          "#fd6200",
-          "#fb3905",
-        ],
         tooltip: {
-          show: true,
-        },
-        legend: {
-          type: "scroll",
-          orient: "vertical",
-          top: 20,
-          left: 10,
-          icon: "rect",
-          itemHeight: 14,
-          itemWidth: 14,
-          textStyle: {
-            color: "#ffffff",
-            rich: {
-              name: {
-                width: 90,
-                fontSize: 12,
-                color: "#dddee7",
-              },
-              value: {
-                width: 30,
-                align: "right",
-                fontSize: 18,
-              },
-            },
-          },
-          data: this.dbryData4,
-          tooltip: {
-            show: true,
-          },
-          formatter: (name) => {
-            if (this.dbryData4.length) {
-              const item = this.dbryData4.filter(
-                (item) => item.name === name
-              )[0];
-              return `{name|${echarts.format.truncateText(
-                name,
-                100,
-                "14px Microsoft Yahei",
-                "…"
-              )}}{value| ${item.value}}`;
-            }
-          },
-        },
-        toolbox: {
-          show: false,
-          feature: {
-            mark: { show: true },
-            dataView: { show: true, readOnly: false },
-            restore: { show: true },
-            saveAsImage: { show: true },
-          },
-        },
-        title: {
-          show: !this.dbryData4 || this.dbryData4.length == 0, // 是否要展示“暂无数据”矢量图
-          text: " {a|}", // 写入占位符a，以便后续填充内容
-          x: "center",
-          y: "center",
-          subtext: "暂无数据", // 子标题
-          itemGap: -10, // 设置主副标题间隔
-          textStyle: {
-            rich: {
-              a: {
-                height: 126, // 设置图片高度
-                width: 268, // 设置图片宽度
-                backgroundColor: {
-                  // 引入图片，作为背景图，填写相对路径
-                  image: require("@/assets/images/overview/zanwu.png"),
-                },
-              },
-            },
-          },
-          subtextStyle: {
-            // 配置副标题的文字样式
-            fontSize: 12,
-            color: "#ffffff",
-          },
+          trigger: "item",
         },
-        series: [
-          {
-            type: "pie",
-            radius: this.dbryData4 && this.dbryData4.length > 0?[30, 130]:[0,0],
-            center: ["50%", "50%"],
-            roseType: "area",
-            itemStyle: {
-              borderRadius: 0,
-            },
-            top: 20,
-            left: -40,
-            label: {
-              position: "inside",
-              formatter: "{d}%",
-              textStyle: {
-                color: "#ffffff",
-                fontSize: 12,
-              },
-            },
-            data: this.dbryData4,
-          },
-        ],
+        color,
+        legend: legend(this.dbryData4),
+        title: title(this.dbryData4),
+        series: series(this.dbryData4)
       };
       this.myChart4.setOption(option);
       this.myChart4.on("click", (a, b) => {
@@ -651,102 +252,13 @@ export default {
       let div = document.getElementById("resiServiceChart");
       this.resiChart = echarts.init(div);
       const option = {
-        color: [
-          "#15a7ed",
-          "#22b998",
-          "#5f6ff4",
-          "#a66eeb",
-          "#faa834",
-          "#fd6200",
-          "#fb3905",
-        ],
-        legend: {
-          orient: "vertical",
-          top: 20,
-          left: 10,
-          icon: "rect",
-          itemHeight: 14,
-          itemWidth: 14,
-          textStyle: {
-            color: "#ffffff",
-            rich: {
-              name: {
-                width: 90,
-                fontSize: 12,
-                color: "#dddee7",
-              },
-              value: {
-                width: 30,
-                align: "right",
-                fontSize: 18,
-              },
-            },
-          },
-          data: this.resiService,
-          formatter: (name) => {
-            if (this.resiService.length) {
-              const item = this.resiService.filter((item) => item.name === name)[0];
-              return `{name|${name}}{value| ${item.value}}`;
-            }
-          },
-        },
-        toolbox: {
-          show: false,
-          feature: {
-            mark: { show: true },
-            dataView: { show: true, readOnly: false },
-            restore: { show: true },
-            saveAsImage: { show: true },
-          },
-        },
-        title: {
-          show: !this.resiService || this.resiService.length == 0, // 是否要展示“暂无数据”矢量图
-          text: " {a|}", // 写入占位符a，以便后续填充内容
-          x: "center",
-          y: "center",
-          subtext: "暂无数据", // 子标题
-          itemGap: -10, // 设置主副标题间隔
-          textStyle: {
-            rich: {
-              a: {
-                height: 128, // 设置图片高度
-                width: 268, // 设置图片宽度
-                backgroundColor: {
-                  // 引入图片，作为背景图，填写相对路径
-                  image: require("@/assets/images/overview/zanwu.png"),
-                },
-              },
-            },
-          },
-          subtextStyle: {
-            // 配置副标题的文字样式
-            fontSize: 12,
-            color: "#ffffff",
-          },
+        tooltip: {
+          trigger: "item",
         },
-        series: [
-          {
-            type: "pie",
-            radius:
-              this.resiService && this.resiService.length > 0 ? [30, 130] : [0, 0],
-            center: ["50%", "50%"],
-            roseType: "area",
-            itemStyle: {
-              borderRadius: 0,
-            },
-            top: 20,
-            left: -40,
-            label: {
-              position: "inside",
-              formatter: "{d}%",
-              textStyle: {
-                color: "#ffffff",
-                fontSize: 12,
-              },
-            },
-            data: this.resiService,
-          },
-        ],
+        color,
+        legend: legend(this.resiService),
+        title: title(this.resiService),
+        series: series(this.resiService)
       };
       this.resiChart.setOption(option);
       this.resiChart.on("click", (e) => {
@@ -769,15 +281,16 @@ export default {
 </script>
 
 <style
-  lang="scss"
-  src="@/assets/scss/dataBoard/renfang/index.scss"
-  scoped
+    lang="scss"
+    scoped
+    src="@/assets/scss/dataBoard/renfang/index.scss"
 ></style>
 
 <style lang="scss" scoped>
 .dibaorenyuan {
-  padding: 0px 240px;
+  padding: 0px 130px;
 }
+
 #dbryChart3 {
   .echarts-legend {
     white-space: normal;
@@ -786,8 +299,8 @@ export default {
 
 :v-deep #dbryChart3 {
   .echarts-legend span {
-    padding: 5px 0;
     display: block;
+    padding: 5px 0;
   }
 }
 </style>
diff --git a/src/views/dataBoard/renfang/visualizing/components/laonianren.vue b/src/views/dataBoard/renfang/visualizing/components/laonianren.vue
index 5867db29e..2c440281c 100644
--- a/src/views/dataBoard/renfang/visualizing/components/laonianren.vue
+++ b/src/views/dataBoard/renfang/visualizing/components/laonianren.vue
@@ -26,7 +26,7 @@
 <script>
 import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue";
 import * as echarts from "echarts";
-
+import {color, legend,title,series} from './pie_config.js'
 function dataFormatter(arr) {
   return arr.map((item) => {
     return {
@@ -99,104 +99,16 @@ export default {
       let div = document.getElementById("lnrLeftChart");
       this.myChart1 = echarts.init(div);
       const option = {
-        color: [
-          "#15a7ed",
-          "#22b998",
-          "#5f6ff4",
-          "#a66eeb",
-          "#faa834",
-          "#fd6200",
-          "#fb3905",
-        ],
-        legend: {
-          orient: "vertical",
-          top: 20,
-          left: 10,
-          icon: "rect",
-          itemHeight: 14,
-          itemWidth: 14,
-          textStyle: {
-            color: "#ffffff",
-            rich: {
-              name: {
-                width: 90,
-                fontSize: 12,
-                color: "#dddee7",
-              },
-              value: {
-                width: 30,
-                align: "right",
-                fontSize: 18,
-              },
-            },
-          },
-          data: this.lnrLeft,
-          formatter: (name) => {
-            if (this.lnrLeft.length) {
-              const item = this.lnrLeft.filter((item) => item.name === name)[0];
-              return `{name|${name}}{value| ${item.value}}`;
-            }
-          },
-        },
-        toolbox: {
-          show: false,
-          feature: {
-            mark: { show: true },
-            dataView: { show: true, readOnly: false },
-            restore: { show: true },
-            saveAsImage: { show: true },
-          },
-        },
-        title: {
-          show: !this.lnrLeft || this.lnrLeft.length == 0, // 是否要展示“暂无数据”矢量图
-          text: " {a|}", // 写入占位符a，以便后续填充内容
-          x: "center",
-          y: "center",
-          subtext: "暂无数据", // 子标题
-          itemGap: -10, // 设置主副标题间隔
-          textStyle: {
-            rich: {
-              a: {
-                height: 128, // 设置图片高度
-                width: 268, // 设置图片宽度
-                backgroundColor: {
-                  // 引入图片，作为背景图，填写相对路径
-                  image: require("@/assets/images/overview/zanwu.png"),
-                },
-              },
-            },
-          },
-          subtextStyle: {
-            // 配置副标题的文字样式
-            fontSize: 12,
-            color: "#ffffff",
-          },
+        tooltip: {
+          trigger: "item",
         },
-        series: [
-          {
-            type: "pie",
-            radius:
-              this.lnrLeft && this.lnrLeft.length > 0 ? [30, 130] : [0, 0],
-            center: ["50%", "50%"],
-            roseType: "area",
-            itemStyle: {
-              borderRadius: 0,
-            },
-            top: 20,
-            left: -40,
-            label: {
-              position: "inside",
-              formatter: "{d}%",
-              textStyle: {
-                color: "#ffffff",
-                fontSize: 12,
-              },
-            },
-            data: this.lnrLeft,
-          },
-        ],
+        color,
+        legend: legend(this.lnrLeft),
+        title: title(this.lnrLeft),
+        series: series(this.lnrLeft)
       };
       this.myChart1.setOption(option);
+
       this.myChart1.on("click", (e) => {
         this.$router.push({
           path: "/dataBoard/renfang/resi-class-new",
@@ -216,104 +128,13 @@ export default {
       let div = document.getElementById("lnrRightChart");
       this.myChart2 = echarts.init(div);
       const option = {
-        color: [
-          "#15a7ed",
-          "#22b998",
-          "#5f6ff4",
-          "#a66eeb",
-          "#faa834",
-          "#fd6200",
-          "#fb3905",
-        ],
-        legend: {
-          orient: "vertical",
-          top: 20,
-          left: 10,
-          icon: "rect",
-          itemHeight: 14,
-          itemWidth: 14,
-          textStyle: {
-            color: "#ffffff",
-            rich: {
-              name: {
-                width: 80,
-                fontSize: 12,
-                color: "#dddee7",
-              },
-              value: {
-                width: 30,
-                align: "right",
-                fontSize: 18,
-              },
-            },
-          },
-          data: this.lnrRight,
-          formatter: (name) => {
-            if (this.lnrRight.length) {
-              const item = this.lnrRight.filter(
-                (item) => item.name === name
-              )[0];
-              return `{name|${name}}{value| ${item.value}}`;
-            }
-          },
-        },
-        title: {
-          show: !this.lnrRight || this.lnrRight.length == 0, // 是否要展示“暂无数据”矢量图
-          text: " {a|}", // 写入占位符a，以便后续填充内容
-          x: "center",
-          y: "center",
-          subtext: "暂无数据", // 子标题
-          itemGap: -10, // 设置主副标题间隔
-          textStyle: {
-            rich: {
-              a: {
-                height: 128, // 设置图片高度
-                width: 268, // 设置图片宽度
-                backgroundColor: {
-                  // 引入图片，作为背景图，填写相对路径
-                  image: require("@/assets/images/overview/zanwu.png"),
-                },
-              },
-            },
-          },
-          subtextStyle: {
-            // 配置副标题的文字样式
-            fontSize: 12,
-            color: "#ffffff",
-          },
-        },
-        toolbox: {
-          show: false,
-          feature: {
-            mark: { show: true },
-            dataView: { show: true, readOnly: false },
-            restore: { show: true },
-            saveAsImage: { show: true },
-          },
-        },
-        series: [
-          {
-            type: "pie",
-            radius:
-              this.lnrRight && this.lnrRight.length > 0 ? [30, 130] : [0, 0],
-            center: ["50%", "50%"],
-            roseType: "area",
-            itemStyle: {
-              borderRadius: 0,
+            tooltip: {
+              trigger: "item",
             },
-            top: 20,
-            left: -40,
-            label: {
-              position: "inside",
-              formatter: "{d}%",
-              textStyle: {
-                color: "#ffffff",
-                fontSize: 12,
-              },
-            },
-            data: this.lnrRight,
-          },
-        ],
+            color,
+            legend: legend(this.lnrRight),
+            title: title(this.lnrRight),
+            series: series(this.lnrRight)
       };
       this.myChart2.on("click", (e) => {
         console.log('a, b::', e);
@@ -336,102 +157,13 @@ export default {
       let div = document.getElementById("lnrServiceChart");
       this.myChart3 = echarts.init(div);
       const option = {
-        color: [
-          "#15a7ed",
-          "#22b998",
-          "#5f6ff4",
-          "#a66eeb",
-          "#faa834",
-          "#fd6200",
-          "#fb3905",
-        ],
-        legend: {
-          orient: "vertical",
-          top: 20,
-          left: 10,
-          icon: "rect",
-          itemHeight: 14,
-          itemWidth: 14,
-          textStyle: {
-            color: "#ffffff",
-            rich: {
-              name: {
-                width: 90,
-                fontSize: 12,
-                color: "#dddee7",
-              },
-              value: {
-                width: 30,
-                align: "right",
-                fontSize: 18,
-              },
+            tooltip: {
+              trigger: "item",
             },
-          },
-          data: this.lnrService,
-          formatter: (name) => {
-            if (this.lnrService.length) {
-              const item = this.lnrService.filter((item) => item.name === name)[0];
-              return `{name|${name}}{value| ${item.value}}`;
-            }
-          },
-        },
-        toolbox: {
-          show: false,
-          feature: {
-            mark: { show: true },
-            dataView: { show: true, readOnly: false },
-            restore: { show: true },
-            saveAsImage: { show: true },
-          },
-        },
-        title: {
-          show: !this.lnrService || this.lnrService.length == 0, // 是否要展示“暂无数据”矢量图
-          text: " {a|}", // 写入占位符a，以便后续填充内容
-          x: "center",
-          y: "center",
-          subtext: "暂无数据", // 子标题
-          itemGap: -10, // 设置主副标题间隔
-          textStyle: {
-            rich: {
-              a: {
-                height: 128, // 设置图片高度
-                width: 268, // 设置图片宽度
-                backgroundColor: {
-                  // 引入图片，作为背景图，填写相对路径
-                  image: require("@/assets/images/overview/zanwu.png"),
-                },
-              },
-            },
-          },
-          subtextStyle: {
-            // 配置副标题的文字样式
-            fontSize: 12,
-            color: "#ffffff",
-          },
-        },
-        series: [
-          {
-            type: "pie",
-            radius:
-              this.lnrService && this.lnrService.length > 0 ? [30, 130] : [0, 0],
-            center: ["50%", "50%"],
-            roseType: "area",
-            itemStyle: {
-              borderRadius: 0,
-            },
-            top: 20,
-            left: -40,
-            label: {
-              position: "inside",
-              formatter: "{d}%",
-              textStyle: {
-                color: "#ffffff",
-                fontSize: 12,
-              },
-            },
-            data: this.lnrService,
-          },
-        ],
+            color,
+            legend: legend(this.lnrService),
+            title: title(this.lnrService),
+            series: series(this.lnrService)
       };
       this.myChart3.setOption(option);
       this.myChart3.on("click", (e) => {
@@ -460,6 +192,6 @@ export default {
 ></style>
 <style lang="scss" scoped>
 .laonianren {
-  padding: 140px 240px;
+  padding: 140px 130px;
 }
 </style>
diff --git a/src/views/dataBoard/renfang/visualizing/components/pie_config.js b/src/views/dataBoard/renfang/visualizing/components/pie_config.js
new file mode 100644
index 000000000..b16e561b8
--- /dev/null
+++ b/src/views/dataBoard/renfang/visualizing/components/pie_config.js
@@ -0,0 +1,113 @@
+import * as echarts from "echarts";
+
+export function legend(data) {
+   return {
+       orient: "vertical",
+       top: 20,
+       left: 0,
+       icon: "rect",
+       itemHeight: 8,
+       itemWidth: 8,
+       textStyle: {
+           color: "#ffffff",
+           rich: {
+               name: {
+                   width: 90,
+                   fontSize: 12,
+                   color: "#9393AB",
+               },
+               value: {
+                   fontSize: 16,
+               },
+           },
+       },
+       data: data,
+       formatter: (name) => {
+        /*   if (data.length) {
+               const item = data.filter((item) => item.name === name)[0];
+               return `{name|${name}}{value| ${item.value}}`;
+           }*/
+           if (data.length) {
+               const item = data.filter(
+                   (item) => item.name === name
+               )[0];
+               return `{name|${echarts.format.truncateText(
+                   name,
+                   100,
+                   "14px Microsoft Yahei",
+                   "…"
+               )}}{value| ${item.value}}`;
+           }
+       }
+   }
+}
+
+export const color = [
+    "#15a7ed",
+    "#22b998",
+    "#5f6ff4",
+    "#a66eeb",
+    "#faa834",
+    "#fd6200",
+    "#fb3905",
+]
+
+
+export function title(data) {
+    return {
+        show: !data || data.length == 0,
+        text: " {a|}", // 写入占位符a，以便后续填充内容
+        x: "center",
+        y: "center",
+        subtext: "暂无数据", // 子标题
+        itemGap: -10, // 设置主副标题间隔
+        textStyle: {
+            rich: {
+                a: {
+                    height: 128, // 设置图片高度
+                    width: 268, // 设置图片宽度
+                    backgroundColor: {
+                        // 引入图片，作为背景图，填写相对路径
+                        image: require("@/assets/images/overview/zanwu.png"),
+                    },
+                },
+            },
+        },
+        subtextStyle: {
+            // 配置副标题的文字样式
+            fontSize: 12,
+            color: "#ffffff",
+        },
+    }
+}
+
+export function series(data) {
+    var total = data.map(item => item.value).join('+')
+    return [
+        {
+            type: "pie",
+            radius: data.length > 0?["40%", "60%"]:[0,0],
+            center: ["70%", "50%"],
+            label: {
+                show: true,
+                position: "center",
+                color: "rgba(13, 17, 29,0)",
+                formatter: `{primary|${eval(total)}}\n{point|总数}}`,
+                rich: {
+                    primary: {
+                        fontSize: 30,
+                        color: '#ffffff',
+                        align: 'center'
+                    },
+                    point: {
+                        fontSize: 14,
+                        fontWeight: 400,
+                        color: "#A3B9DA",
+                        align: 'center'
+                    }
+                }
+            },
+            data
+        },
+    ]
+}
\ No newline at end of file
diff --git a/src/views/dataBoard/renfang/visualizing/components/shiyerenyuan.vue b/src/views/dataBoard/renfang/visualizing/components/shiyerenyuan.vue
index a269dc361..01e9af9cd 100644
--- a/src/views/dataBoard/renfang/visualizing/components/shiyerenyuan.vue
+++ b/src/views/dataBoard/renfang/visualizing/components/shiyerenyuan.vue
@@ -46,6 +46,7 @@
 <script>
 import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue";
 import * as echarts from "echarts";
+import {color, legend, series, title} from "@/views/dataBoard/renfang/visualizing/components/pie_config";
 
 function dataFormatter(arr) {
   return arr.map((item) => {
@@ -152,115 +153,13 @@ export default {
       let div = document.getElementById("syryChart1");
       this.myChart1 = echarts.init(div);
       const option = {
-        color: [
-          "#15a7ed",
-          "#22b998",
-          "#5f6ff4",
-          "#a66eeb",
-          "#faa834",
-          "#fd6200",
-          "#fb3905",
-        ],
-        tooltip: {
-          show: true,
-        },
-        legend: {
-          orient: "vertical",
-          top: 20,
-          left: 10,
-          icon: "rect",
-          itemHeight: 14,
-          itemWidth: 14,
-          tooltip: {
-            show: true,
-          },
-          formatter: (name) => {
-            if (this.syryData1.length) {
-              const item = this.syryData1.filter(
-                (item) => item.name === name
-              )[0];
-              return `{name|${echarts.format.truncateText(
-                name,
-                100,
-                "14px Microsoft Yahei",
-                "…"
-              )}}{value| ${item.value}}`;
-            }
-          },
-          textStyle: {
-            color: "#ffffff",
-            rich: {
-              name: {
-                width: 90,
-                fontSize: 12,
-                color: "#dddee7",
-              },
-              value: {
-                width: 60,
-                align: "right",
-                fontSize: 18,
-              },
-            },
-          },
-          data: this.syryData1,
-        },
-        toolbox: {
-          show: false,
-          feature: {
-            mark: { show: true },
-            dataView: { show: true, readOnly: false },
-            restore: { show: true },
-            saveAsImage: { show: true },
-          },
-        },
-        title: {
-          show: !this.syryData1 || this.syryData1.length == 0, // 是否要展示“暂无数据”矢量图
-          text: " {a|}", // 写入占位符a，以便后续填充内容
-          x: "center",
-          y: "center",
-          subtext: "暂无数据", // 子标题
-          itemGap: -10, // 设置主副标题间隔
-          textStyle: {
-            rich: {
-              a: {
-                height: 128, // 设置图片高度
-                width: 268, // 设置图片宽度
-                backgroundColor: {
-                  // 引入图片，作为背景图，填写相对路径
-                  image: require("@/assets/images/overview/zanwu.png"),
-                },
-              },
-            },
-          },
-          subtextStyle: {
-            // 配置副标题的文字样式
-            fontSize: 12,
-            color: "#ffffff",
-          },
-        },
-        series: [
-          {
-            type: "pie",
-            radius:
-              this.syryData1 && this.syryData1.length > 0 ? [30, 130] : [0, 0],
-            center: ["50%", "50%"],
-            roseType: "area",
-            itemStyle: {
-              borderRadius: 0,
+            tooltip: {
+              trigger: "item",
             },
-            top: -20,
-            left: 10,
-            label: {
-              position: "inside",
-              formatter: "{d}%",
-              textStyle: {
-                color: "#ffffff",
-                fontSize: 12,
-              },
-            },
-            data: this.syryData1,
-          },
-        ],
+            color,
+            legend: legend(this.syryData1),
+            title: title(this.syryData1),
+            series: series(this.syryData1)
       };
       this.myChart1.setOption(option);
       this.myChart1.on("click", (e) => {
@@ -282,115 +181,13 @@ export default {
       let div = document.getElementById("syryChart2");
       this.myChart2 = echarts.init(div);
       const option = {
-        color: [
-          "#15a7ed",
-          "#22b998",
-          "#5f6ff4",
-          "#a66eeb",
-          "#faa834",
-          "#fd6200",
-          "#fb3905",
-        ],
-        tooltip: {
-          show: true,
-        },
-        legend: {
-          orient: "vertical",
-          top: 20,
-          left: 10,
-          icon: "rect",
-          itemHeight: 14,
-          itemWidth: 14,
-          textStyle: {
-            color: "#ffffff",
-            rich: {
-              name: {
-                width: 90,
-                fontSize: 12,
-                color: "#dddee7",
-              },
-              value: {
-                width: 60,
-                align: "right",
-                fontSize: 18,
-              },
-            },
-          },
-          data: this.syryData2,
-          tooltip: {
-            show: true,
-          },
-          formatter: (name) => {
-            if (this.syryData2.length) {
-              const item = this.syryData2.filter(
-                (item) => item.name === name
-              )[0];
-              return `{name|${echarts.format.truncateText(
-                name,
-                100,
-                "14px Microsoft Yahei",
-                "…"
-              )}}{value| ${item.value}}`;
-            }
-          },
-        },
-        toolbox: {
-          show: false,
-          feature: {
-            mark: { show: true },
-            dataView: { show: true, readOnly: false },
-            restore: { show: true },
-            saveAsImage: { show: true },
-          },
-        },
-        title: {
-          show: !this.syryData2 || this.syryData2.length == 0, // 是否要展示“暂无数据”矢量图
-          text: " {a|}", // 写入占位符a，以便后续填充内容
-          x: "center",
-          y: "center",
-          subtext: "暂无数据", // 子标题
-          itemGap: -10, // 设置主副标题间隔
-          textStyle: {
-            rich: {
-              a: {
-                height: 128, // 设置图片高度
-                width: 268, // 设置图片宽度
-                backgroundColor: {
-                  // 引入图片，作为背景图，填写相对路径
-                  image: require("@/assets/images/overview/zanwu.png"),
-                },
-              },
+            tooltip: {
+              trigger: "item",
             },
-          },
-          subtextStyle: {
-            // 配置副标题的文字样式
-            fontSize: 12,
-            color: "#ffffff",
-          },
-        },
-        series: [
-          {
-            type: "pie",
-            radius:
-              this.syryData2 && this.syryData2.length > 0 ? [30, 130] : [0, 0],
-            center: ["50%", "50%"],
-            roseType: "area",
-            itemStyle: {
-              borderRadius: 0,
-            },
-            top: -20,
-            left: 10,
-            label: {
-              position: "inside",
-              formatter: "{d}%",
-              textStyle: {
-                color: "#ffffff",
-                fontSize: 12,
-              },
-            },
-            data: this.syryData2,
-          },
-        ],
+            color,
+            legend: legend(this.syryData2),
+            title: title(this.syryData2),
+            series: series(this.syryData2)
       };
       this.myChart2.setOption(option);
       this.myChart2.on("click", (e) => {
@@ -412,117 +209,13 @@ export default {
       let div = document.getElementById("syryChart3");
       this.myChart3 = echarts.init(div);
       const option = {
-        color: [
-          "#15a7ed",
-          "#22b998",
-          "#5f6ff4",
-          "#a66eeb",
-          "#faa834",
-          "#fd6200",
-          "#fb3905",
-        ],
-        tooltip: {
-          show: true,
-        },
-        legend: {
-          type: "scroll",
-          orient: "vertical",
-          top: 20,
-          left: 10,
-          icon: "rect",
-          itemHeight: 14,
-          itemWidth: 14,
-          tooltip: {
-            show: true,
-          },
-          formatter: (name) => {
-            if (this.syryData3.length) {
-              const item = this.syryData3.filter(
-                (item) => item.name === name
-              )[0];
-              return `{name|${echarts.format.truncateText(
-                name,
-                100,
-                "14px Microsoft Yahei",
-                "…"
-              )}}{value| ${item.value}}`;
-            }
-          },
-          textStyle: {
-            width: 120,
-            color: "#ffffff",
-            rich: {
-              name: {
-                width: 90,
-                fontSize: 12,
-                color: "#dddee7",
-              },
-              value: {
-                width: 60,
-                align: "right",
-                fontSize: 18,
-              },
+            tooltip: {
+              trigger: "item",
             },
-          },
-          data: this.syryData3,
-        },
-        toolbox: {
-          show: false,
-          feature: {
-            mark: { show: true },
-            dataView: { show: true, readOnly: false },
-            restore: { show: true },
-            saveAsImage: { show: true },
-          },
-        },
-        title: {
-          show: !this.syryData3 || this.syryData3.length == 0, // 是否要展示“暂无数据”矢量图
-          text: " {a|}", // 写入占位符a，以便后续填充内容
-          x: "center",
-          y: "center",
-          subtext: "暂无数据", // 子标题
-          itemGap: -10, // 设置主副标题间隔
-          textStyle: {
-            rich: {
-              a: {
-                height: 128, // 设置图片高度
-                width: 268, // 设置图片宽度
-                backgroundColor: {
-                  // 引入图片，作为背景图，填写相对路径
-                  image: require("@/assets/images/overview/zanwu.png"),
-                },
-              },
-            },
-          },
-          subtextStyle: {
-            // 配置副标题的文字样式
-            fontSize: 12,
-            color: "#ffffff",
-          },
-        },
-        series: [
-          {
-            type: "pie",
-            radius:
-              this.syryData3 && this.syryData3.length > 0 ? [30, 130] : [0, 0],
-            center: ["50%", "50%"],
-            roseType: "area",
-            itemStyle: {
-              borderRadius: 0,
-            },
-            top: -20,
-            left: 10,
-            label: {
-              position: "inside",
-              formatter: "{d}%",
-              textStyle: {
-                color: "#ffffff",
-                fontSize: 12,
-              },
-            },
-            data: this.syryData3,
-          },
-        ],
+            color,
+            legend: legend(this.syryData3),
+            title: title(this.syryData3),
+            series: series(this.syryData3)
       };
       this.myChart3.setOption(option);
       this.myChart3.on("click", (e) => {
@@ -544,116 +237,13 @@ export default {
       let div = document.getElementById("syryChart4");
       this.myChart4 = echarts.init(div);
       const option = {
-        color: [
-          "#15a7ed",
-          "#22b998",
-          "#5f6ff4",
-          "#a66eeb",
-          "#faa834",
-          "#fd6200",
-          "#fb3905",
-        ],
-        tooltip: {
-          show: true,
-        },
-        legend: {
-          type: "scroll",
-          orient: "vertical",
-          top: 20,
-          left: 10,
-          icon: "rect",
-          itemHeight: 14,
-          itemWidth: 14,
-          textStyle: {
-            color: "#ffffff",
-            rich: {
-              name: {
-                width: 90,
-                fontSize: 12,
-                color: "#dddee7",
-              },
-              value: {
-                width: 60,
-                align: "right",
-                fontSize: 18,
-              },
+            tooltip: {
+              trigger: "item",
             },
-          },
-          data: this.syryData4,
-          tooltip: {
-            show: true,
-          },
-          formatter: (name) => {
-            if (this.syryData4.length) {
-              const item = this.syryData4.filter(
-                (item) => item.name === name
-              )[0];
-              return `{name|${echarts.format.truncateText(
-                name,
-                100,
-                "14px Microsoft Yahei",
-                "…"
-              )}}{value| ${item.value}}`;
-            }
-          },
-        },
-        toolbox: {
-          show: false,
-          feature: {
-            mark: { show: true },
-            dataView: { show: true, readOnly: false },
-            restore: { show: true },
-            saveAsImage: { show: true },
-          },
-        },
-        title: {
-          show: !this.syryData4 || this.syryData4.length == 0, // 是否要展示“暂无数据”矢量图
-          text: " {a|}", // 写入占位符a，以便后续填充内容
-          x: "center",
-          y: "center",
-          subtext: "暂无数据", // 子标题
-          itemGap: -10, // 设置主副标题间隔
-          textStyle: {
-            rich: {
-              a: {
-                height: 128, // 设置图片高度
-                width: 268, // 设置图片宽度
-                backgroundColor: {
-                  // 引入图片，作为背景图，填写相对路径
-                  image: require("@/assets/images/overview/zanwu.png"),
-                },
-              },
-            },
-          },
-          subtextStyle: {
-            // 配置副标题的文字样式
-            fontSize: 12,
-            color: "#ffffff",
-          },
-        },
-        series: [
-          {
-            type: "pie",
-            radius:
-              this.syryData4 && this.syryData4.length > 0 ? [30, 130] : [0, 0],
-            center: ["50%", "50%"],
-            roseType: "area",
-            itemStyle: {
-              borderRadius: 0,
-            },
-            top: -20,
-            left: 10,
-            label: {
-              position: "inside",
-              formatter: "{d}%",
-              textStyle: {
-                color: "#ffffff",
-                fontSize: 12,
-              },
-            },
-            data: this.syryData4,
-          },
-        ],
+            color,
+            legend: legend(this.syryData4),
+            title: title(this.syryData4),
+            series: series(this.syryData4)
       };
       this.myChart4.setOption(option);
       this.myChart4.on("click", (e) => {
@@ -674,116 +264,13 @@ export default {
       let div = document.getElementById("syryChart5");
       this.myChart5 = echarts.init(div);
       const option = {
-        color: [
-          "#15a7ed",
-          "#22b998",
-          "#5f6ff4",
-          "#a66eeb",
-          "#faa834",
-          "#fd6200",
-          "#fb3905",
-        ],
-        tooltip: {
-          show: true,
-        },
-        legend: {
-          type: "scroll",
-          orient: "vertical",
-          top: 20,
-          left: 10,
-          icon: "rect",
-          itemHeight: 14,
-          itemWidth: 14,
-          tooltip: {
-            show: true,
-          },
-          formatter: (name) => {
-            if (this.syryData5.length) {
-              const item = this.syryData5.filter(
-                (item) => item.name === name
-              )[0];
-              return `{name|${echarts.format.truncateText(
-                name,
-                100,
-                "14px Microsoft Yahei",
-                "…"
-              )}}{value| ${item.value}}`;
-            }
-          },
-          textStyle: {
-            color: "#ffffff",
-            rich: {
-              name: {
-                width: 90,
-                fontSize: 12,
-                color: "#dddee7",
-              },
-              value: {
-                width: 60,
-                align: "right",
-                fontSize: 18,
-              },
-            },
-          },
-          data: this.syryData5,
-        },
-        toolbox: {
-          show: false,
-          feature: {
-            mark: { show: true },
-            dataView: { show: true, readOnly: false },
-            restore: { show: true },
-            saveAsImage: { show: true },
-          },
-        },
-        title: {
-          show: !this.syryData5 || this.syryData5.length == 0, // 是否要展示“暂无数据”矢量图
-          text: " {a|}", // 写入占位符a，以便后续填充内容
-          x: "center",
-          y: "center",
-          subtext: "暂无数据", // 子标题
-          itemGap: -10, // 设置主副标题间隔
-          textStyle: {
-            rich: {
-              a: {
-                height: 128, // 设置图片高度
-                width: 268, // 设置图片宽度
-                backgroundColor: {
-                  // 引入图片，作为背景图，填写相对路径
-                  image: require("@/assets/images/overview/zanwu.png"),
-                },
-              },
+            tooltip: {
+              trigger: "item",
             },
-          },
-          subtextStyle: {
-            // 配置副标题的文字样式
-            fontSize: 12,
-            color: "#ffffff",
-          },
-        },
-        series: [
-          {
-            type: "pie",
-            radius:
-              this.syryData5 && this.syryData5.length > 0 ? [30, 130] : [0, 0],
-            center: ["50%", "50%"],
-            roseType: "area",
-            itemStyle: {
-              borderRadius: 0,
-            },
-            top: -20,
-            left: 10,
-            label: {
-              position: "inside",
-              formatter: "{d}%",
-              textStyle: {
-                color: "#ffffff",
-                fontSize: 12,
-              },
-            },
-            data: this.syryData5,
-          },
-        ],
+            color,
+            legend: legend(this.syryData5),
+            title: title(this.syryData5),
+            series: series(this.syryData5)
       };
       this.myChart5.setOption(option);
       this.myChart5.on("click", (e) => {
@@ -804,102 +291,13 @@ export default {
       let div = document.getElementById("resiServiceChart");
       this.resiChart = echarts.init(div);
       const option = {
-        color: [
-          "#15a7ed",
-          "#22b998",
-          "#5f6ff4",
-          "#a66eeb",
-          "#faa834",
-          "#fd6200",
-          "#fb3905",
-        ],
-        legend: {
-          orient: "vertical",
-          top: 20,
-          left: 10,
-          icon: "rect",
-          itemHeight: 14,
-          itemWidth: 14,
-          textStyle: {
-            color: "#ffffff",
-            rich: {
-              name: {
-                width: 90,
-                fontSize: 12,
-                color: "#dddee7",
-              },
-              value: {
-                width: 30,
-                align: "right",
-                fontSize: 18,
-              },
-            },
-          },
-          data: this.resiService,
-          formatter: (name) => {
-            if (this.resiService.length) {
-              const item = this.resiService.filter((item) => item.name === name)[0];
-              return `{name|${name}}{value| ${item.value}}`;
-            }
-          },
-        },
-        toolbox: {
-          show: false,
-          feature: {
-            mark: { show: true },
-            dataView: { show: true, readOnly: false },
-            restore: { show: true },
-            saveAsImage: { show: true },
-          },
-        },
-        title: {
-          show: !this.resiService || this.resiService.length == 0, // 是否要展示“暂无数据”矢量图
-          text: " {a|}", // 写入占位符a，以便后续填充内容
-          x: "center",
-          y: "center",
-          subtext: "暂无数据", // 子标题
-          itemGap: -10, // 设置主副标题间隔
-          textStyle: {
-            rich: {
-              a: {
-                height: 128, // 设置图片高度
-                width: 268, // 设置图片宽度
-                backgroundColor: {
-                  // 引入图片，作为背景图，填写相对路径
-                  image: require("@/assets/images/overview/zanwu.png"),
-                },
-              },
+            tooltip: {
+              trigger: "item",
             },
-          },
-          subtextStyle: {
-            // 配置副标题的文字样式
-            fontSize: 12,
-            color: "#ffffff",
-          },
-        },
-        series: [
-          {
-            type: "pie",
-            radius:
-              this.resiService && this.resiService.length > 0 ? [30, 130] : [0, 0],
-            center: ["50%", "50%"],
-            roseType: "area",
-            itemStyle: {
-              borderRadius: 0,
-            },
-            top: 20,
-            left: -40,
-            label: {
-              position: "inside",
-              formatter: "{d}%",
-              textStyle: {
-                color: "#ffffff",
-                fontSize: 12,
-              },
-            },
-            data: this.resiService,
-          },
-        ],
+            color,
+            legend: legend(this.resiService),
+            title: title(this.resiService),
+            series: series(this.resiService)
       };
       this.resiChart.setOption(option);
       this.resiChart.on("click", (e) => {
@@ -929,7 +327,7 @@ export default {
 
 <style lang="scss" scoped>
 .dibaorenyuan {
-  padding: 0px 240px;
+  padding: 0px 130px;
 }
 #syryChart3 {
   .echarts-legend {
diff --git a/src/views/dataBoard/renfang/visualizing/components/teshurenqun.vue b/src/views/dataBoard/renfang/visualizing/components/teshurenqun.vue
index 87f39879f..95158b1fa 100644
--- a/src/views/dataBoard/renfang/visualizing/components/teshurenqun.vue
+++ b/src/views/dataBoard/renfang/visualizing/components/teshurenqun.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="visualizing laonianren">
-      <div class="visualizing-item">
+      <div class="visualizing-left">
         <div>
           <data-title title="特殊人群享受服务情况统计" />
         </div>
@@ -14,6 +14,7 @@
 <script>
 import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue";
 import * as echarts from "echarts";
+import {color, legend, series, title} from "@/views/dataBoard/renfang/visualizing/components/pie_config";
 
 function dataFormatter(arr) {
   return arr.map((item) => {
@@ -66,102 +67,13 @@ export default {
       let div = document.getElementById("resiServiceChart");
       this.myChart3 = echarts.init(div);
       const option = {
-        color: [
-          "#15a7ed",
-          "#22b998",
-          "#5f6ff4",
-          "#a66eeb",
-          "#faa834",
-          "#fd6200",
-          "#fb3905",
-        ],
-        legend: {
-          orient: "vertical",
-          top: 20,
-          left: 10,
-          icon: "rect",
-          itemHeight: 14,
-          itemWidth: 14,
-          textStyle: {
-            color: "#ffffff",
-            rich: {
-              name: {
-                width: 90,
-                fontSize: 12,
-                color: "#dddee7",
-              },
-              value: {
-                width: 30,
-                align: "right",
-                fontSize: 18,
-              },
+            tooltip: {
+              trigger: "item",
             },
-          },
-          data: this.lnrService,
-          formatter: (name) => {
-            if (this.lnrService.length) {
-              const item = this.lnrService.filter((item) => item.name === name)[0];
-              return `{name|${name}}{value| ${item.value}}`;
-            }
-          },
-        },
-        toolbox: {
-          show: false,
-          feature: {
-            mark: { show: true },
-            dataView: { show: true, readOnly: false },
-            restore: { show: true },
-            saveAsImage: { show: true },
-          },
-        },
-        title: {
-          show: !this.lnrService || this.lnrService.length == 0, // 是否要展示“暂无数据”矢量图
-          text: " {a|}", // 写入占位符a，以便后续填充内容
-          x: "center",
-          y: "center",
-          subtext: "暂无数据", // 子标题
-          itemGap: -10, // 设置主副标题间隔
-          textStyle: {
-            rich: {
-              a: {
-                height: 128, // 设置图片高度
-                width: 268, // 设置图片宽度
-                backgroundColor: {
-                  // 引入图片，作为背景图，填写相对路径
-                  image: require("@/assets/images/overview/zanwu.png"),
-                },
-              },
-            },
-          },
-          subtextStyle: {
-            // 配置副标题的文字样式
-            fontSize: 12,
-            color: "#ffffff",
-          },
-        },
-        series: [
-          {
-            type: "pie",
-            radius:
-              this.lnrService && this.lnrService.length > 0 ? [30, 130] : [0, 0],
-            center: ["50%", "50%"],
-            roseType: "area",
-            itemStyle: {
-              borderRadius: 0,
-            },
-            top: 20,
-            left: -40,
-            label: {
-              position: "inside",
-              formatter: "{d}%",
-              textStyle: {
-                color: "#ffffff",
-                fontSize: 12,
-              },
-            },
-            data: this.lnrService,
-          },
-        ],
+            color,
+            legend: legend(this.lnrService),
+            title: title(this.lnrService),
+            series: series(this.lnrService)
       };
       this.myChart3.setOption(option);
       this.myChart3.on("click", (e) => {
@@ -190,6 +102,6 @@ export default {
 ></style>
 <style lang="scss" scoped>
 .laonianren {
-  padding: 140px 240px;
+  padding: 140px 130px;
 }
 </style>
diff --git a/src/views/dataBoard/renfang/visualizing/components/zhiyuanzhe.vue b/src/views/dataBoard/renfang/visualizing/components/zhiyuanzhe.vue
index 80a724467..3f187268a 100644
--- a/src/views/dataBoard/renfang/visualizing/components/zhiyuanzhe.vue
+++ b/src/views/dataBoard/renfang/visualizing/components/zhiyuanzhe.vue
@@ -26,6 +26,7 @@
 <script>
 import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue";
 import * as echarts from "echarts";
+import {color, legend, series, title} from "@/views/dataBoard/renfang/visualizing/components/pie_config";
 
 function dataFormatter(arr) {
   return arr.map((item) => {
@@ -100,102 +101,13 @@ export default {
       let div = document.getElementById("zyzLeftChart");
       this.myChart1 = echarts.init(div);
       const option = {
-        color: [
-          "#15a7ed",
-          "#22b998",
-          "#5f6ff4",
-          "#a66eeb",
-          "#faa834",
-          "#fd6200",
-          "#fb3905",
-        ],
-        legend: {
-          orient: "vertical",
-          top: 20,
-          left: 10,
-          icon: "rect",
-          itemHeight: 14,
-          itemWidth: 14,
-          textStyle: {
-            color: "#ffffff",
-            rich: {
-              name: {
-                width: 90,
-                fontSize: 12,
-                color: "#dddee7",
-              },
-              value: {
-                width: 30,
-                align: "right",
-                fontSize: 18,
-              },
+            tooltip: {
+              trigger: "item",
             },
-          },
-          data: this.zyzLeft,
-          formatter: (name) => {
-            if (this.zyzLeft.length) {
-              const item = this.zyzLeft.filter((item) => item.name === name)[0];
-              return `{name|${name}}{value| ${item.value}}`;
-            }
-          },
-        },
-        toolbox: {
-          show: false,
-          feature: {
-            mark: { show: true },
-            dataView: { show: true, readOnly: false },
-            restore: { show: true },
-            saveAsImage: { show: true },
-          },
-        },
-        title: {
-          show: !this.zyzLeft || this.zyzLeft.length == 0, // 是否要展示“暂无数据”矢量图
-          text: " {a|}", // 写入占位符a，以便后续填充内容
-          x: "center",
-          y: "center",
-          subtext: "暂无数据", // 子标题
-          itemGap: -10, // 设置主副标题间隔
-          textStyle: {
-            rich: {
-              a: {
-                height: 128, // 设置图片高度
-                width: 268, // 设置图片宽度
-                backgroundColor: {
-                  // 引入图片，作为背景图，填写相对路径
-                  image: require("@/assets/images/overview/zanwu.png"),
-                },
-              },
-            },
-          },
-          subtextStyle: {
-            // 配置副标题的文字样式
-            fontSize: 12,
-            color: "#ffffff",
-          },
-        },
-        series: [
-          {
-            type: "pie",
-            radius:
-              this.zyzLeft && this.zyzLeft.length > 0 ? [30, 130] : [0, 0],
-            center: ["50%", "50%"],
-            roseType: "area",
-            itemStyle: {
-              borderRadius: 0,
-            },
-            top: 20,
-            left: -40,
-            label: {
-              position: "inside",
-              formatter: "{d}%",
-              textStyle: {
-                color: "#ffffff",
-                fontSize: 12,
-              },
-            },
-            data: this.zyzLeft,
-          },
-        ],
+            color,
+            legend: legend(this.zyzLeft),
+            title: title(this.zyzLeft),
+            series: series(this.zyzLeft)
       };
       this.myChart1.setOption(option);
       this.myChart1.on("click", (e) => {
@@ -217,104 +129,13 @@ export default {
       let div = document.getElementById("zyzRightChart");
       this.myChart2 = echarts.init(div);
       const option = {
-        color: [
-          "#15a7ed",
-          "#22b998",
-          "#5f6ff4",
-          "#a66eeb",
-          "#faa834",
-          "#fd6200",
-          "#fb3905",
-        ],
-        legend: {
-          orient: "vertical",
-          top: 20,
-          left: 10,
-          icon: "rect",
-          itemHeight: 14,
-          itemWidth: 14,
-          textStyle: {
-            color: "#ffffff",
-            rich: {
-              name: {
-                width: 80,
-                fontSize: 12,
-                color: "#dddee7",
-              },
-              value: {
-                width: 30,
-                align: "right",
-                fontSize: 18,
-              },
+            tooltip: {
+              trigger: "item",
             },
-          },
-          data: this.zyzRight,
-          formatter: (name) => {
-            if (this.zyzRight.length) {
-              const item = this.zyzRight.filter(
-                (item) => item.name === name
-              )[0];
-              return `{name|${name}}{value| ${item.value}}`;
-            }
-          },
-        },
-        toolbox: {
-          show: false,
-          feature: {
-            mark: { show: true },
-            dataView: { show: true, readOnly: false },
-            restore: { show: true },
-            saveAsImage: { show: true },
-          },
-        },
-        title: {
-          show: !this.zyzRight || this.zyzRight.length == 0, // 是否要展示“暂无数据”矢量图
-          text: " {a|}", // 写入占位符a，以便后续填充内容
-          x: "center",
-          y: "center",
-          subtext: "暂无数据", // 子标题
-          itemGap: -10, // 设置主副标题间隔
-          textStyle: {
-            rich: {
-              a: {
-                height: 128, // 设置图片高度
-                width: 268, // 设置图片宽度
-                backgroundColor: {
-                  // 引入图片，作为背景图，填写相对路径
-                  image: require("@/assets/images/overview/zanwu.png"),
-                },
-              },
-            },
-          },
-          subtextStyle: {
-            // 配置副标题的文字样式
-            fontSize: 12,
-            color: "#ffffff",
-          },
-        },
-        series: [
-          {
-            type: "pie",
-            radius:
-              this.zyzRight && this.zyzRight.length > 0 ? [30, 130] : [0, 0],
-            center: ["50%", "50%"],
-            roseType: "area",
-            itemStyle: {
-              borderRadius: 0,
-            },
-            top: 20,
-            left: -40,
-            label: {
-              position: "inside",
-              formatter: "{d}%",
-              textStyle: {
-                color: "#ffffff",
-                fontSize: 12,
-              },
-            },
-            data: this.zyzRight,
-          },
-        ],
+            color,
+            legend: legend(this.zyzRight),
+            title: title(this.zyzRight),
+            series: series(this.zyzRight)
       };
       this.myChart2.on("click", (e) => {
         this.$router.push({
@@ -337,102 +158,13 @@ export default {
       let div = document.getElementById("resiServiceChart");
       this.resiChart = echarts.init(div);
       const option = {
-        color: [
-          "#15a7ed",
-          "#22b998",
-          "#5f6ff4",
-          "#a66eeb",
-          "#faa834",
-          "#fd6200",
-          "#fb3905",
-        ],
-        legend: {
-          orient: "vertical",
-          top: 20,
-          left: 10,
-          icon: "rect",
-          itemHeight: 14,
-          itemWidth: 14,
-          textStyle: {
-            color: "#ffffff",
-            rich: {
-              name: {
-                width: 90,
-                fontSize: 12,
-                color: "#dddee7",
-              },
-              value: {
-                width: 30,
-                align: "right",
-                fontSize: 18,
-              },
+            tooltip: {
+              trigger: "item",
             },
-          },
-          data: this.resiService,
-          formatter: (name) => {
-            if (this.resiService.length) {
-              const item = this.resiService.filter((item) => item.name === name)[0];
-              return `{name|${name}}{value| ${item.value}}`;
-            }
-          },
-        },
-        toolbox: {
-          show: false,
-          feature: {
-            mark: { show: true },
-            dataView: { show: true, readOnly: false },
-            restore: { show: true },
-            saveAsImage: { show: true },
-          },
-        },
-        title: {
-          show: !this.resiService || this.resiService.length == 0, // 是否要展示“暂无数据”矢量图
-          text: " {a|}", // 写入占位符a，以便后续填充内容
-          x: "center",
-          y: "center",
-          subtext: "暂无数据", // 子标题
-          itemGap: -10, // 设置主副标题间隔
-          textStyle: {
-            rich: {
-              a: {
-                height: 128, // 设置图片高度
-                width: 268, // 设置图片宽度
-                backgroundColor: {
-                  // 引入图片，作为背景图，填写相对路径
-                  image: require("@/assets/images/overview/zanwu.png"),
-                },
-              },
-            },
-          },
-          subtextStyle: {
-            // 配置副标题的文字样式
-            fontSize: 12,
-            color: "#ffffff",
-          },
-        },
-        series: [
-          {
-            type: "pie",
-            radius:
-              this.resiService && this.resiService.length > 0 ? [30, 130] : [0, 0],
-            center: ["50%", "50%"],
-            roseType: "area",
-            itemStyle: {
-              borderRadius: 0,
-            },
-            top: 20,
-            left: -40,
-            label: {
-              position: "inside",
-              formatter: "{d}%",
-              textStyle: {
-                color: "#ffffff",
-                fontSize: 12,
-              },
-            },
-            data: this.resiService,
-          },
-        ],
+            color,
+            legend: legend(this.resiService),
+            title: title(this.resiService),
+            series: series(this.resiService)
       };
       this.resiChart.setOption(option);
       this.resiChart.on("click", (e) => {
@@ -461,6 +193,6 @@ export default {
 ></style>
 <style lang="scss" scoped>
 .laonianren {
-  padding: 140px 240px;
+  padding: 140px 130px;
 }
 </style>
diff --git a/src/views/dataBoard/satisfactionEval/modules/PersonnelPortrait/index.vue b/src/views/dataBoard/satisfactionEval/modules/PersonnelPortrait/index.vue
index 0754effa0..4c15cb62f 100644
--- a/src/views/dataBoard/satisfactionEval/modules/PersonnelPortrait/index.vue
+++ b/src/views/dataBoard/satisfactionEval/modules/PersonnelPortrait/index.vue
@@ -19,7 +19,9 @@
           {{ ageClassification }}
         </div>
       </div>
-      <div class="tag" :class="index === 0?'red':index === 1? 'purple2':index === 2? 'green2':'purple2'" :key="index" v-for="(residentTag,index) in residentTagArray" >
+      <div class="tag red" :key="index"
+           v-for="(residentTag,index) in residentTagArray"
+      >
         <div :class="[residentTag.length > 5 ? 'smallSize' : '', 'text']">
           {{ residentTag }}
         </div>
@@ -339,40 +341,100 @@ $green2: #58cc32;
     &:nth-of-type(3) {
       left: 162px;
       top: 0;
+      .text {
+        background: $yellow;
+      }
+
+      &:after {
+        background: $yellow;
+      }
     }
 
     &:nth-of-type(5) {
-      left: 297px;
-      top: 73px;
+      left: 323px;
+      top: 107px;
+      .text {
+        background: $blue;
+      }
+
+      &:after {
+        background: $blue;
+      }
     }
 
     &:nth-of-type(2) {
       left: 316px;
       top: 203px;
+      .text {
+        background: $red;
+      }
+
+      &:after {
+        background: $red;
+      }
     }
 
     &:nth-of-type(6) {
       left: 228px;
       top: 246px;
+      .text {
+        background: $light;
+      }
+
+      &:after {
+        background: $light;
+      }
     }
 
     &:nth-of-type(4) {
       left: 77px;
       top: 246px;
+      .text {
+        background: $green;
+      }
+
+      &:after {
+        background: $green;
+      }
     }
 
     &:nth-of-type(7) {
       left: 0px;
       top: 158px;
+      .text {
+        background: $orange;
+      }
+
+      &:after {
+        background: $orange;
+      }
     }
 
     &:nth-of-type(1) {
       left: 48px;
       top: 57px;
+      .text {
+        background: $purple;
+      }
 
+      &:after {
+        background: $purple;
+      }
     }
-  }
 
+    &:nth-of-type(8) {
+      left: 260px;
+      top: 29px;
+      .text {
+        background: $green2;
+      }
+
+      &:after {
+        background: $green2;
+      }
+    }
+  }
+/*
   .yellow {
     .text {
       background: $yellow;
@@ -459,7 +521,7 @@ $green2: #58cc32;
     &:after {
       background: $green2;
     }
-  }
+  }*/
 }
 
 .btn {