鼠标浮动到节点上时告警节点显示告警信息

src/views/home/g6.js

@@ -4,17 +4,21 @@ import G6 from '@antv/g6'
 const tooltip = new G6.Tooltip({
   offsetX: 10,
   offsetY: 10,
-  // 允许出现 tooltip 的 item 类型
   // itemTypes: ['node', 'edge'],
   itemTypes: ['node'],
-  // 自定义 tooltip 内容
   getContent: (e) => {
+    const data = e.item.getModel()
     const outDiv = document.createElement('div')
     outDiv.style.width = 'fit-content'
-    //outDiv.style.padding = '0px 0px 20px 0px';
-    outDiv.innerHTML = `<ul>
-        <li>节点ID: ${e.item.getModel().id}</li>
-        <li>节点名称: ${e.item.getModel().label || e.item.getModel().id}</li>
+    outDiv.innerHTML = data.info
+      ? `<ul>
+        <li>节点ID: ${data.id}</li>
+        <li style="margin-top:5px;">节点名称: ${data.label}</li>
+        <li style="margin-top:5px;">报警原因: ${data.info}</li>
+      </ul>`
+      : `<ul>
+        <li>节点ID: ${data.id}</li>
+        <li style="margin-top:5px;">节点名称: ${data.label}</li>
       </ul>`
     return outDiv
   }
@@ -59,7 +63,7 @@ export function getG6Options({ container = 'container' }) {
       size: 30,
       type: 'image',
       style: {
-        // fill: '#fa8c16',
+        // fill: '#f00',
         // stroke: '#000',
         // lineWidth: 1
       },
@@ -200,7 +204,7 @@ G6.registerNode(
       back1.animate(
         {
           // Magnifying and disappearing
-          r: r + 10,
+          r: r + 15,
           opacity: 0.1
         },
         {
@@ -213,7 +217,7 @@ G6.registerNode(
       back2.animate(
         {
           // Magnifying and disappearing
-          r: r + 10,
+          r: r + 15,
           opacity: 0.1
         },
         {
@@ -226,7 +230,7 @@ G6.registerNode(
       back3.animate(
         {
           // Magnifying and disappearing
-          r: r + 10,
+          r: r + 15,
           opacity: 0.1
         },
         {
@@ -518,6 +522,15 @@ const nodeTree2 = [
                 id: '19',
                 label: 'VM\nVM02',
                 img: '/imgs/vm.svg',
+                type: 'background-animate',
+                info: '网络异常',
+                color: '#f00',
+                labelCfg: {
+                  style: {
+                    fill: '#f00'
+                  },
+                  position: 'bottom'
+                },
                 children: [
                   {
                     id: '22',