学校首页

src/views/schoolSection/home/index.vue

             domId: "onlineEcharts1",
             onlineNum: this.onlineDeviceList[0].num,
             onlineTatalNum: this.onlineDeviceList[0].tatalnum,
-            onlineColor: "#339CFF",
+            onlineColor: ["#ABD5FF", "#339CFF", "#E2EEFE"],
             subtext: "最近1小时"
           });
           this.initOnlineEcharts({
             domId: "onlineEcharts2",
             onlineNum: this.onlineDeviceList[1].num,
             onlineTatalNum: this.onlineDeviceList[1].tatalnum,
-            onlineColor: "#52C41A",
+            onlineColor: ["#D3F6C1", "#52C41A", "#E9FFDE"],
             subtext: "最近48小时"
           });
           this.initOnlineEcharts({
             domId: "onlineEcharts3",
             onlineNum: this.onlineDeviceList[2].num,
             onlineTatalNum: this.onlineDeviceList[2].tatalnum,
-            onlineColor: "#ED4A99",
+            onlineColor: ["#FCC9E3", "#ED4A99", "#FFE0EF"],
             subtext: "最近7天"
           });
         } else {
     initOnlineEcharts({ onlineNum, onlineTatalNum, onlineColor, domId }) {
       let options = {
         tooltip: {
-          trigger: "item",
-          formatter: "{d}%",
-          show: true
+          show: false
         },
         legend: {
           show: false
         },
         series: [
           {
+            z: 1,
+            silent: true,
             name: "底盘",
             type: "pie",
+            startAngle: 90,
             radius: ["40%", "55%"],
             center: ["50%", "45%"],
-            avoidLabelOverlap: false,
-            hoverAnimation: false,
-            label: {
-              normal: {
-                show: false,
-                position: "center"
-              },
-              emphasis: {
-                show: false
-              }
+            itemStyle: {
+              borderRadius: "50%",
+              borderColor: "none",
+              borderWidth: 1
             },
-            labelLine: {
-              normal: {
-                show: false
-              }
+            label: {
+              show: false
             },
             data: [
               {
                 value: onlineNum,
                 name: "在线",
-                selected: false,
                 itemStyle: {
-                  color: onlineColor
+                  normal: {
+                    color: {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: onlineColor[0]
+                        },
+                        {
+                          offset: 1,
+                          color: onlineColor[1]
+                        }
+                      ]
+                    },
+                    label: {
+                      show: false
+                    },
+                    labelLine: {
+                      show: false
+                    }
+                  }
                 }
               },
               {
                 value: onlineTatalNum - onlineNum,
-                tooltip: {
-                  show: false
-                },
                 name: "离线",
                 itemStyle: {
-                  color: "#E9EEF4"
+                  color: "rgba(255,255,255,0)",
+                  decal: {
+                    symbol: "none"
+                  }
                 },
                 label: {
-                  normal: {
-                    show: false
+                  show: false
+                }
+              }
+            ]
+          },
+          // 白色小圆
+          {
+            z: 2,
+            name: "cricle",
+            type: "pie",
+            radius: ["41%", "53.5%"],
+            center: ["50%", "45%"],
+            silent: true,
+            startAngle:
+              108 + ((onlineTatalNum - onlineNum) / onlineTatalNum) * 360,
+            itemStyle: {
+              borderRadius: "50%",
+              borderColor: "none",
+              borderWidth: 1
+            },
+            label: {
+              show: false
+            },
+            data: [
+              {
+                value: 4,
+                name: "Search Engine",
+                itemStyle: {
+                  color: "#fff"
+                }
+              },
+              {
+                value: 100,
+                itemStyle: {
+                  color: "none",
+                  decal: {
+                    symbol: "none"
                   }
+                },
+                label: {
+                  show: false
                 }
               }
             ]
+          },
+          // 背景
+          {
+            z: 0,
+            type: "pie",
+            name: "内层细圆环",
+            radius: ["40%", "55%"],
+            center: ["50%", "45%"],
+            startAngle: 90,
+            hoverAnimation: false,
+            clockWise: true,
+            silent: true,
+            itemStyle: {
+              normal: {
+                color: onlineColor[2],
+                shadowBlur: 0,
+                shadowColor: "#66666a"
+              }
+            },
+            tooltip: {
+              show: false
+            },
+            label: {
+              show: false
+            },
+            data: [onlineTatalNum]
           }
         ]
       };