fix: 优化桑基图

@@ -82,7 +82,7 @@ watch(() => props.treeData, (val) => {
 
 
 const renderGraph = (graph: any, lineageData: any) => {
 const renderGraph = (graph: any, lineageData: any) => {
   if (!graph || !lineageData) return;
   if (!graph || !lineageData) return;
-  graph.setMinZoom(0.7);
+  graph.setMinZoom(1);
   graph.setMaxZoom(1);
   graph.setMaxZoom(1);
   graph.data(lineageData);
   graph.data(lineageData);
   graph.render();
   graph.render();
@@ -265,7 +265,7 @@ const initGraph = () => {
       ],
       ],
     },
     },
     defaultNode: {
     defaultNode: {
-      size: 24,
+      size: 20,
       anchorPoints: [
       anchorPoints: [
         [0, 0.5],
         [0, 0.5],
         [1, 0.5],
         [1, 0.5],
@@ -292,7 +292,7 @@ const initGraph = () => {
         return 16;
         return 16;
       },
       },
       getVGap: function getVGap() {
       getVGap: function getVGap() {
-        return 25;
+        return 15;
       },
       },
       getHGap: function getHGap() {
       getHGap: function getHGap() {
         return 120;
         return 120;
@@ -306,7 +306,7 @@ const initGraph = () => {
       label: handleLabelLength((node.isField ? node.metaStandardId : node.standardName) as string),
       label: handleLabelLength((node.isField ? node.metaStandardId : node.standardName) as string),
       collapsed: node.children?.length ? false : true,
       collapsed: node.children?.length ? false : true,
       labelCfg: {
       labelCfg: {
-        offset: 10,
+        offset: 7,
         style: {
         style: {
           fontSize: 13,
           fontSize: 13,
           fill: '#212121',
           fill: '#212121',
@@ -369,7 +369,7 @@ const observeResize = () => {
           return;
           return;
         }
         }
         graphRef.value.changeSize(width, height);
         graphRef.value.changeSize(width, height);
-        graphRef.value.setMinZoom(0.7);
+        graphRef.value.setMinZoom(1);
         graphRef.value.setMaxZoom(1);
         graphRef.value.setMaxZoom(1);
         graphRef.value.fitView(40, { direction: 'both' });
         graphRef.value.fitView(40, { direction: 'both' });
         graphRef.value.fitCenter();
         graphRef.value.fitCenter();
@@ -385,7 +385,7 @@ const observeResize = () => {
       return;
       return;
     }
     }
     graphRef.value.changeSize(width, height);
     graphRef.value.changeSize(width, height);
-    graphRef.value.setMinZoom(0.7);
+    graphRef.value.setMinZoom(1);
     graphRef.value.setMaxZoom(1);
     graphRef.value.setMaxZoom(1);
     graphRef.value.fitView(40, { direction: 'both' });
     graphRef.value.fitView(40, { direction: 'both' });
     graphRef.value.fitCenter();
     graphRef.value.fitCenter();
@@ -607,7 +607,7 @@ defineExpose({
   overflow-y: auto;
   overflow-y: auto;
 
 
   .title {
   .title {
-    font-size: 16px;
+    font-size: 14px;
     color: #212121;
     color: #212121;
     line-height: 24px;
     line-height: 24px;
     font-weight: 600;
     font-weight: 600;
@@ -615,7 +615,7 @@ defineExpose({
 
 
   .row {
   .row {
     margin-top: 8px;
     margin-top: 8px;
-    font-size: 14px;
+    font-size: 12px;
     color: #666666;
     color: #666666;
     word-break: break-all;
     word-break: break-all;
     line-height: 21px;
     line-height: 21px;

@@ -78,6 +78,7 @@ const sankeyInstance: any = ref();
 const containerRef = ref();
 const containerRef = ref();
 
 
 const setChartsOption = () => {
 const setChartsOption = () => {
+
   let option = {
   let option = {
     tooltip: {
     tooltip: {
       trigger: 'item',
       trigger: 'item',
@@ -85,19 +86,33 @@ const setChartsOption = () => {
         if (params.data.name) {
         if (params.data.name) {
           return null;
           return null;
         }
         }
-        return params.data.source + '     -->     ' + params.data.target
+        return params.data.source + '      >      ' + params.data.target
       }
       }
     },
     },
     color: ["#3DBCBE", "#6b67d1", "#7BBCE0", "#2B8EF3", "#51dca2", "#E19D46"],
     color: ["#3DBCBE", "#6b67d1", "#7BBCE0", "#2B8EF3", "#51dca2", "#E19D46"],
     series: [
     series: [
       {
       {
         type: 'sankey',
         type: 'sankey',
-        top: 80,
-        bottom: 40,
+        top: 60,
+        bottom: 20,
         draggable: false,
         draggable: false,
-        left: 40,
-        right: 80,
-        data: props.names,
+        left: 50,
+        right: 100,
+        label: {
+          fontSize: 10,
+        },
+        data: props.names?.map(n => {
+          if (n.isLast) {
+            return {
+              ...n,
+              label: {
+                width: 97,
+                overflow: 'breakAll'
+              }
+            }
+          }
+          return n;
+        }),
         links: props.treeData,
         links: props.treeData,
         lineStyle: {
         lineStyle: {
           color: 'source',
           color: 'source',
@@ -113,10 +128,9 @@ const setChartsOption = () => {
 const resizeObserver = ref();
 const resizeObserver = ref();
 
 
 const observeResize = () => {
 const observeResize = () => {
-  resizeObserver.value = new ResizeObserver(() => {
+  window.addEventListener('resize', (e) => {
     sankeyInstance.value?.resize();
     sankeyInstance.value?.resize();
   });
   });
-  resizeObserver.value.observe(containerRef.value);
 }
 }
 
 
 onMounted(() => {
 onMounted(() => {