修改样式

src/views/v2/AllLink.vue

@@ -12,52 +12,42 @@ const data = {
     {
       id: '0',
       label: 'Zabbix server linux',
-      cluster: 'a',
     },
     {
       id: '1',
       label: 'xybclinux',
-      cluster: 'b',
     },
     {
       id: '2',
       label: 'Zabbix server tomcat',
-      cluster: 'b',
     },
     {
       id: '3',
       label: 'Zabbix server mysql',
-      cluster: 'b',
     },
     {
       id: '4',
       label: 'tomcat pilot',
-      cluster: 'c',
     },
     {
       id: '5',
       label: 'xybcmysql',
-      cluster: 'c',
     },
     {
       id: '6',
       label: 'Xybc',
-      cluster: 'a',
     },
     {
       id: '7',
       label: 'linux pilot',
-      cluster: 'd',
     },
     {
       id: '8',
       label: 'Zabbix server',
-      cluster: 'd',
     },
     {
       id: '9',
       label: 'pilot alive',
-      cluster: 'e',
     },
   ],
   edges: [
@@ -129,19 +119,19 @@ function draw() {
   const nodes = data.nodes;
   const clusterMap = new Map();
   let clusterId = 0;
-  nodes.forEach(function (node) {
-    // cluster
-    if (node.cluster && clusterMap.get(node.cluster) === undefined) {
-      clusterMap.set(node.cluster, clusterId);
-      clusterId++;
-    }
-    const cid = clusterMap.get(node.cluster);
-    if (!node.style) {
-      node.style = {};
-    }
-    node.style.fill = colors[cid % colors.length];
-    node.style.stroke = strokes[cid % strokes.length];
-  });
+  // nodes.forEach(function (node) {
+  //   // cluster
+  //   if (node.cluster && clusterMap.get(node.cluster) === undefined) {
+  //     clusterMap.set(node.cluster, clusterId);
+  //     clusterId++;
+  //   }
+  //   const cid = clusterMap.get(node.cluster);
+  //   if (!node.style) {
+  //     node.style = {};
+  //   }
+  //   node.style.fill = colors[cid % colors.length];
+  //   node.style.stroke = strokes[cid % strokes.length];
+  // });
 
   const container = chartRef.value
   const width = container.scrollWidth;
@@ -154,20 +144,38 @@ function draw() {
       default: ['drag-canvas', 'drag-node'],
     },
     layout: {
-      type: 'fruchterman',
-      gravity: 10,
-      speed: 5,
-      clustering: true,
+      type: 'radial',
+      unitRadius: 70,
+      preventOverlap: true,
+      strictRadial: false,
     },
     animate: true,
     defaultNode: {
-      size: 20,
+      size: 40,
+      style: {
+        fill: '#fa8c16',
+        stroke: '#000',
+        lineWidth: 0
+      },
+      labelCfg: {
+        style: {
+          fill: '#fff',
+          fontSize: 12,
+          // background: {
+          //   fill: '#ffffff',
+          //   stroke: '#9EC9FF',
+          //   padding: [2, 2, 2, 2],
+          //   radius: 2,
+          // },
+        },
+        position: 'bottom',
+      },
     },
     defaultEdge: {
       style: {
         endArrow: {
           path: 'M 0,0 L 8,4 L 8,-4 Z',
-          fill: '#e2e2e2',
+          fill: '#fff',
         },
       },
     },
@@ -181,7 +189,6 @@ function draw() {
       if (!container || !container.scrollWidth || !container.scrollHeight) return;
       graph.changeSize(container.scrollWidth, container.scrollHeight);
     };
-
 }
 
 </script>