feat: G6版本使用稳定4.8

src/views/monitor/topology/index.vue

@@ -1,16 +1,10 @@
 <script setup lang="ts">
 import { reactive, onMounted, ref } from 'vue';
-import { reactive, onMounted, ref } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import ChartGraphG6 from '@/components/ChartGraphG6/index.vue';
 import useI18n from '@/hooks/useI18n';
 import useNeInfoStore from '@/store/modules/neinfo';
-import { Extensions, Graph, GraphData, extend } from '@antv/g6';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import message from 'ant-design-vue/lib/message';
-const neInfoStore = useNeInfoStore();
-import useNeInfoStore from '@/store/modules/neinfo';
-import { Extensions, Graph, GraphData, extend } from '@antv/g6';
+import { Graph, GraphData } from '@antv/g6';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import message from 'ant-design-vue/lib/message';
 const neInfoStore = useNeInfoStore();
@@ -22,14 +16,7 @@ const graphG6Dom = ref<HTMLElement | undefined>(undefined);
 /**图实例对象 */
 let graphChart: any = null;
 
-/**图拓展 */
-const ExtGraph = extend(Graph, {
-  layouts: {},
-  edges: {
-    'polyline-edge': Extensions.PolylineEdge,
-    'cubic-edge': Extensions.CubicEdge,
-  },
-});
+ 
 
 /**图DOM节点实例对象 */
 const graphData = reactive<GraphData>({
@@ -468,7 +455,7 @@ function initChart() {
   console.log(graphG6Dom.value.offsetWidth, graphG6Dom.value.offsetHeight);
   console.log(graphG6Dom.value.clientWidth, graphG6Dom.value.clientHeight);
   console.log(graphG6Dom.value.scrollWidth, graphG6Dom.value.scrollHeight);
-  const graph = new ExtGraph({
+  const graph = new Graph({
     container: graphG6Dom.value,
     height: graphG6Dom.value.clientHeight,
     width: graphG6Dom.value.clientWidth,
@@ -679,66 +666,9 @@ function initChart() {
         },
       },
     },
-    data//: graphData,
+    data, //: graphData,
   });
-
-  graph.on('node:click', (e: any) => {
-    const s = graphChart.getItemState(e.itemId);
-    console.log(s);
-    // graph.updateData('node', {
-    //   id: e.itemId,
-    //   data: {
-    //     cluster: Math.random(),
-    //     keyShape: {
-    //       r: 32 + Math.random() * 10 - 5,
-    //       lineWidth: 6 + Math.random() * 6 - 3,
-    //       stroke: '#000',
-    //     },
-    //     labelShape: {
-    //       fontWeight: 700,
-    //     },
-    //   },
-    // });
-  });
-
-  graph.on('node:pointerenter', (e: any) => {
-    const { itemId } = e;
-    if (graph.getItemState(itemId, 'breathing')) {
-      graph.setItemState(itemId, 'breathing', false);
-    } else {
-      graph.setItemState(itemId, 'scaling', false);
-      graph.setItemState(itemId, 'breathing', true);
-    }
-    // graph.updateData('node', {
-    //   id: itemId,
-    //   data: {
-    //     label: `after been hovered ${itemId}`,
-    //     labelShape: {
-    //       fill: '#0f0',
-    //     },
-    //   },
-    // });
-  });
-
-  graph.on('node:pointerleave', (e: any) => {
-    const { itemId } = e;
-    if (graph.getItemState(itemId, 'breathing')) {
-      graph.setItemState(itemId, 'breathing', false);
-    } else {
-      graph.setItemState(itemId, 'scaling', false);
-      graph.setItemState(itemId, 'breathing', true);
-    }
-    // graph.updateData('node', {
-    //   id: itemId,
-    //   data: {
-    //     label: 'label before been hovered',
-    //     labelShape: {
-    //       fill: '#000',
-    //     },
-    //   },
-    // });
-  });
-
+  graph.render()
   graphChart = graph;
 }