桑基图大数据量下查看

 <template>
-  <div ref="containerRef" class='canvas-wrapper'>
+  <div ref="mainRef" class='canvas-wrapper'>
+    <div ref="containerRef" class='canvas-wrapper-content'>
 
+    </div>
   </div>
 </template>
 
@@ -78,6 +80,11 @@ const sankeyInstance: any = ref();
 const containerRef = ref();
 
 const setChartsOption = () => {
+  if (props.names.length > 250) {
+    containerRef.value.style.height = (props.names.length * 3.5) + 'px';
+  } else {
+    containerRef.value.style.height = '100%';
+  }
 
   let option = {
     tooltip: {
@@ -94,7 +101,7 @@ const setChartsOption = () => {
       {
         type: 'sankey',
         top: 60,
-        bottom: 20,
+        bottom: 40,
         draggable: false,
         left: 50,
         emphasis: {
@@ -112,7 +119,7 @@ const setChartsOption = () => {
             return {
               ...n,
               label: {
-                width: 97,
+                width: props.names.length > 300 ? 86 : 97,
                 overflow: 'breakAll'
               }
             }
@@ -135,6 +142,11 @@ const resizeObserver = ref();
 
 const observeResize = () => {
   window.addEventListener('resize', (e) => {
+    if (props.names.length > 250) {
+      containerRef.value.style.height = (props.names.length * 3.5) + 'px';
+    } else {
+      containerRef.value.style.height = '100%';
+    }
     sankeyInstance.value?.resize();
   });
 }
@@ -154,5 +166,12 @@ onMounted(() => {
   width: 100%;
   height: 100%;
   position: relative;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.canvas-wrapper-content {
+  width: 100%;
+  height: 100%;
 }
 </style>
\ No newline at end of file