From ff27f2c3a7daa20a2454a4fc435206bc403e3ae5 Mon Sep 17 00:00:00 2001
From: weiyin <yin.wei@le9health.com>
Date: Thu, 22 Aug 2024 18:28:59 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=BF=90=E8=90=A5=E7=9B=91=E6=8E=A7?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E4=B8=AD=E7=8E=AF=E7=8A=B6=E5=9B=BE=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/pageMonitor/bottomMiddle/index.vue | 238 +++++++++++++++++++
 1 file changed, 238 insertions(+)

diff --git a/src/views/pageMonitor/bottomMiddle/index.vue b/src/views/pageMonitor/bottomMiddle/index.vue
index 56037c1..7ec72c8 100644
--- a/src/views/pageMonitor/bottomMiddle/index.vue
+++ b/src/views/pageMonitor/bottomMiddle/index.vue
@@ -58,11 +58,130 @@ export default {
               formatter: "{b}{c}",
               color: "inherit",
             },
+            labelLine: {
+              show: true,
+              length: 20,
+              length2: 25,
+              smooth: 0.6, // 可以使引导线稍微弯曲，使得标签位置更加合理
+            },
             padAngle: 5,
             itemStyle: {
               borderRadius: 10,
             },
           },
+          {
+            name: "外边框-outBig",
+            type: "pie",
+            clockWise: false, //顺时加载
+            hoverAnimation: false, //鼠标移入变大
+            center: ["50%", "50%"],
+            radius: ["62%", "62%"],
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            data: [
+              {
+                value: 9,
+                name: "",
+                itemStyle: {
+                  normal: {
+                    borderWidth: 2,
+                    borderColor: "#2F58B4",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            name: "外边框-outSmall",
+            type: "pie",
+            clockWise: false, //顺时加载
+            hoverAnimation: false, //鼠标移入变大
+            center: ["50%", "50%"],
+            radius: ["57%", "57%"],
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            showEmptyCircle: true,
+            itemStyle: {
+              shadowColor: "rgba(255, 0, 0, 1)",
+              shadowBlur: 10,
+              opacity: 1,
+            },
+            data: [
+              {
+                value: 9,
+                name: "",
+                itemStyle: {
+                  normal: {
+                    borderWidth: 2,
+                    borderColor: "#0D447C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            name: "内边框-inBig",
+            type: "pie",
+            clockWise: true, //顺时加载
+            hoverAnimation: false, //鼠标移入变大
+            center: ["50%", "50%"],
+            radius: ["25%", "25%"],
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            itemStyle: {
+              shadowColor: "rgba(255, 0, 0, 1)",
+              shadowBlur: 10,
+              opacity: 1,
+            },
+            data: [
+              {
+                value: 9,
+                name: "",
+                itemStyle: {
+                  normal: {
+                    borderWidth: 2,
+                    borderColor: "#006CFF",
+                    opacity: 0.4,
+                  },
+                },
+              },
+            ],
+          },
+          {
+            name: "内边框-inSmall",
+            type: "pie",
+            clockWise: true, //顺时加载
+            hoverAnimation: false, //鼠标移入变大
+            center: ["50%", "50%"],
+            radius: ["20%", "20%"],
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            data: [
+              {
+                value: 9,
+                name: "",
+                itemStyle: {
+                  normal: {
+                    borderWidth: 2,
+                    borderColor: "#fff",
+                    opacity: 0.2,
+                  },
+                },
+              },
+            ],
+          },
         ],
       },
       chartOptionsRight: {
@@ -82,11 +201,130 @@ export default {
               formatter: "{b}{c}",
               color: "inherit",
             },
+            labelLine: {
+              show: true,
+              length: 20,
+              length2: 25,
+              smooth: 0.6, // 可以使引导线稍微弯曲，使得标签位置更加合理
+            },
             padAngle: 5,
             itemStyle: {
               borderRadius: 10,
             },
           },
+          {
+            name: "外边框-outBig",
+            type: "pie",
+            clockWise: false, //顺时加载
+            hoverAnimation: false, //鼠标移入变大
+            center: ["50%", "50%"],
+            radius: ["62%", "62%"],
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            data: [
+              {
+                value: 9,
+                name: "",
+                itemStyle: {
+                  normal: {
+                    borderWidth: 2,
+                    borderColor: "#2F58B4",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            name: "外边框-outSmall",
+            type: "pie",
+            clockWise: false, //顺时加载
+            hoverAnimation: false, //鼠标移入变大
+            center: ["50%", "50%"],
+            radius: ["57%", "57%"],
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            showEmptyCircle: true,
+            itemStyle: {
+              shadowColor: "rgba(255, 0, 0, 1)",
+              shadowBlur: 10,
+              opacity: 1,
+            },
+            data: [
+              {
+                value: 9,
+                name: "",
+                itemStyle: {
+                  normal: {
+                    borderWidth: 2,
+                    borderColor: "#0D447C",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            name: "内边框-inBig",
+            type: "pie",
+            clockWise: true, //顺时加载
+            hoverAnimation: false, //鼠标移入变大
+            center: ["50%", "50%"],
+            radius: ["25%", "25%"],
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            itemStyle: {
+              shadowColor: "rgba(255, 0, 0, 1)",
+              shadowBlur: 10,
+              opacity: 1,
+            },
+            data: [
+              {
+                value: 9,
+                name: "",
+                itemStyle: {
+                  normal: {
+                    borderWidth: 2,
+                    borderColor: "#006CFF",
+                    opacity: 0.4,
+                  },
+                },
+              },
+            ],
+          },
+          {
+            name: "内边框-inSmall",
+            type: "pie",
+            clockWise: true, //顺时加载
+            hoverAnimation: false, //鼠标移入变大
+            center: ["50%", "50%"],
+            radius: ["20%", "20%"],
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            data: [
+              {
+                value: 9,
+                name: "",
+                itemStyle: {
+                  normal: {
+                    borderWidth: 2,
+                    borderColor: "#fff",
+                    opacity: 0.2,
+                  },
+                },
+              },
+            ],
+          },
         ],
       },
       toDate: dayjs().format("YYYY-MM-DD"),