修改

src/api/system/index.js

@@ -16,3 +16,11 @@ export function signPatientCount(query) {
         params: query
     })
 }
+export function serviceModeStatistics(query) {
+    return request({
+        url: '/system/homePage/serviceModeStatistics',
+        method: 'get',
+        params: query
+    })
+}
+

src/views/index.vue

@@ -32,7 +32,15 @@
         <div class="wait">待办任务</div>
         <div class="all">
           <div class="person" @click="goback">
-            人工审核
+            <el-tooltip
+              class=""
+              effect="dark"
+              content="任务总数量"
+              placement="top"
+            >
+              <span class="">人工审核</span>
+            </el-tooltip>
+
             <el-badge :value="139" class="item"></el-badge>
             <i class="el-icon-arrow-right"></i>
           </div>
@@ -43,7 +51,15 @@
         </div>
         <div class="all">
           <div class="person" @click="gofollowup">
-            人工随访
+            <el-tooltip
+              class=""
+              effect="dark"
+              content="随访总数量"
+              placement="top"
+            >
+              <span class="">人工随访</span>
+            </el-tooltip>
+
             <el-badge :value="22" class="item"></el-badge>
             <i class="el-icon-arrow-right"></i>
           </div>
@@ -68,7 +84,11 @@
 </template>
 
 <script>
-import { topStatistics, signPatientCount } from "@/api/system/index";
+import {
+  topStatistics,
+  signPatientCount,
+  serviceModeStatistics,
+} from "@/api/system/index";
 import * as echarts from "echarts";
 
 export default {
@@ -78,6 +98,7 @@ export default {
       // 版本号
       version: "0.0.1",
       list: {},
+      namelist: [],
     };
   },
   mounted() {
@@ -104,7 +125,6 @@ export default {
       });
     },
     getlist() {
-      // 基于准备好的dom，初始化echarts实例
       signPatientCount().then((res) => {
         console.log(res, "res");
         var countydata = [];
@@ -207,38 +227,65 @@ export default {
       });
     },
     info() {
-      var chartDom = document.getElementById("main");
-      var myChart = echarts.init(chartDom);
-      var option = {
-        tooltip: {
-          trigger: "item",
-        },
-        legend: {
-          top: "2%",
-          right: "2%",
-          left: "center",
-        },
-        color: ["#91ED93", "#68B4FF", "#3363FF"],
-        series: [
-          {
-            name: "Access From",
-            type: "pie",
-            radius: ["40%", "70%"],
-            // center: ['50%', '70%'],
-            // adjust the start and end angle
-            // startAngle: 180,
-            // endAngle: 360,
-            data: [
-              { value: 1048, name: "AI电话" },
-              { value: 735, name: "短信" },
-              { value: 580, name: "微信" },
-              { value: 484, name: "人工随访" },
-            ],
-          },
-        ],
-      };
+      serviceModeStatistics().then((res) => {
+        let arr = [];
+        res.data.forEach((element) => {
+          arr.push({
+            value: element.count, //将数组的conut值赋给value
+            name: element.name, //将数组的name值赋给name
+          });
+          var chartDom = document.getElementById("main");
+          var myChart = echarts.init(chartDom);
+          var option = {
+            tooltip: {
+              trigger: "item",
+            },
+            legend: {
+              top: "2%",
+              right: "2%",
+              left: "center",
+            },
+            color: ["#91ED93", "#68B4FF", "#3363FF", "orange"],
+            series: [
+              {
+                name: "",
+                type: "pie",
+                radius: ["40%", "70%"],
+                data: arr,
+                label: {
+                  show: true,
+                  formatter: "{b}:{c}", // 设置标签显示格式为 "名称： 百分比"
+                  position: "outside", // 将标签放置在扇区外部
+                },
 
-      option && myChart.setOption(option);
+                labelLine: {
+                  show: true,
+                  length2: 30, // 设置线的长度
+                  maxSurfaceAngle: 80, // 设置线的角度范围
+                },
+              },
+              {
+                type: "pie",
+                radius: ["40%", "70%"],
+                data: arr,
+                emphasis: {
+                  itemStyle: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: "rgba(0, 0, 0, 0.5)",
+                  },
+                },
+                label: {
+                  show: true,
+                  formatter: "{d}%", // 设置标签显示格式为 "名称： 百分比"
+                  position: "inside", // 将标签放置在扇区外部
+                },
+              },
+            ],
+          };
+          option && myChart.setOption(option);
+        });
+      });
     },
   },
 };
@@ -320,7 +367,8 @@ export default {
   width: 17%;
   background: #fff;
   border-radius: 5px;
-  height: calc(100vh - 450px);
+  height: 300px;
+  // height: calc(100vh - 450px);
   .wait {
     // padding: 20px;
     font-weight: 600;
@@ -336,16 +384,6 @@ export default {
     font-weight: 600;
     font-size: 12px;
   }
-  // .number{
-  //   display: inline-block;
-  //   width: 22px;
-  //   height: 22px;
-  //   line-height: 22px;
-  //   text-align: center;
-  //   border-radius: 50%;
-  //   background: red;
-  //   color: white;
-  // }
   .el-icon-arrow-right {
     float: right;
   }