增加告警效果

src/views/home/g6.js

@@ -40,13 +40,12 @@ export function getG6Options({ container = 'container' }) {
       preventOverlap: true,
       strictRadial: false
     },
-    animate: true,
     defaultNode: {
       size: 30,
       style: {
-        fill: '#fa8c16',
-        stroke: '#000',
-        lineWidth: 1
+        // fill: '#fa8c16',
+        // stroke: '#000',
+        // lineWidth: 1
       },
       labelCfg: {
         style: {
@@ -75,8 +74,7 @@ export function getG6Options({ container = 'container' }) {
         opacity: 1
       },
       inactive: {
-        opacity: 0.4,
-        fill: '#000'
+        opacity: 0.4
       }
     },
     edgeStateStyles: {
@@ -110,6 +108,93 @@ export function getG6Options({ container = 'container' }) {
 //   graph.changeSize(container.scrollWidth, container.scrollHeight)
 // }
 
+// Background Animation 节点动画
+G6.registerNode(
+  'background-animate',
+  {
+    afterDraw(cfg, group) {
+      const r = cfg.size / 2
+      const back1 = group.addShape('circle', {
+        zIndex: -3,
+        attrs: {
+          x: 0,
+          y: 0,
+          r,
+          fill: cfg.color,
+          opacity: 0.6
+        },
+        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
+        name: 'back1-shape'
+      })
+      const back2 = group.addShape('circle', {
+        zIndex: -2,
+        attrs: {
+          x: 0,
+          y: 0,
+          r,
+          fill: cfg.color,
+          opacity: 0.6
+        },
+        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
+        name: 'back2-shape'
+      })
+      const back3 = group.addShape('circle', {
+        zIndex: -1,
+        attrs: {
+          x: 0,
+          y: 0,
+          r,
+          fill: cfg.color,
+          opacity: 0.6
+        },
+        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
+        name: 'back3-shape'
+      })
+      group.sort() // Sort according to the zIndex
+      back1.animate(
+        {
+          // Magnifying and disappearing
+          r: r + 10,
+          opacity: 0.1
+        },
+        {
+          duration: 3000,
+          easing: 'easeCubic',
+          delay: 0,
+          repeat: true // repeat
+        }
+      ) // no delay
+      back2.animate(
+        {
+          // Magnifying and disappearing
+          r: r + 10,
+          opacity: 0.1
+        },
+        {
+          duration: 3000,
+          easing: 'easeCubic',
+          delay: 1000,
+          repeat: true // repeat
+        }
+      ) // 1s delay
+      back3.animate(
+        {
+          // Magnifying and disappearing
+          r: r + 10,
+          opacity: 0.1
+        },
+        {
+          duration: 3000,
+          easing: 'easeCubic',
+          delay: 2000,
+          repeat: true // repeat
+        }
+      ) // 3s delay
+    }
+  },
+  'image'
+)
+
 export function getMockData() {
   const img = new Image()
   img.src = 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg'
@@ -118,12 +203,23 @@ export function getMockData() {
   const imgs = ['C.svg', 'Elastic.svg', 'Hadoop.svg', 'Flink.svg', 'Hive.svg', 'jaeger.svg', 'python.svg', 'Docker2.svg', 'Prometheus.svg', 'java.svg']
 
   const nodes = imgs.map((img, i) => {
-    return {
-      id: String(i),
-      label: img.split(','),
-      type: 'image',
-      size: [40, 40],
-      img: '/imgs/' + img
+    if (i !== 4) {
+      return {
+        id: String(i),
+        label: img.split(','),
+        type: 'image',
+        size: [40, 40],
+        img: '/imgs/' + img
+      }
+    } else {
+      return {
+        id: String(i),
+        label: img.split(','),
+        type: 'background-animate',
+        size: 30,
+        color: '#f00',
+        img: '/imgs/' + img
+      }
     }
   })
 
@@ -179,7 +275,7 @@ export function getMockData2() {
   const img = new Image()
   img.src = 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg'
 
-  const imgs = ['C.svg', 'Elastic.svg', 'Hadoop.svg', 'Flink.svg', 'Hive.svg', 'jaeger.svg', 'python.svg', 'Docker2.svg', 'Prometheus.svg', 'java.svg']
+  const imgs = ['C.svg', 'Elastic.svg', 'Hadoop.svg', 'Flink.svg', 'Hive.svg', 'jaeger.svg', 'error.gif']
 
   const nodes = imgs.map((img, i) => {
     return {