style: --

src/pages/A9knowlege/components/Chart/index.module.scss

@@ -4,14 +4,13 @@
   gap: 10px;
   position: absolute;
   inset: 0;
-  padding: 28px 20px 20px 32px;
+  padding: 28px 0 20px 32px;
 }
 
 .chartWrap {
   flex: 1;
-  margin: -5px -2px;
+  padding-right: 20px;
   overflow-y: auto;
-  overflow-x: hidden;
 }
 
 .quickQuestions {
@@ -80,6 +79,7 @@
   align-items: center;
   justify-content: center;
   gap: 8px;
+  padding-right: 20px;
 
   &::before {
     content: '';

src/pages/A9knowlege/index.tsx

@@ -76,6 +76,10 @@ function A9knowlege() {
           links: graph.links,
           categories: graph.categories,
           roam: true,
+          scaleLimit: {
+            min: 0.5,
+            max: 3
+          },
           label: { position: 'right' },
           emphasis: { focus: 'adjacency' },
           force: { repulsion: 200, edgeLength: [50, 120] },
@@ -85,9 +89,20 @@ function A9knowlege() {
     }
 
     myChart.setOption(option, true)
-    myChart.off('click')
+    myChart.on('mouseover', function (params: any) {
+      myChart.dispatchAction({
+        type: 'downplay'
+      })
+    })
     myChart.on('click', function (params: any) {
       if (!params || !params.data) return
+
+      // 高亮相关节点连线
+      myChart.dispatchAction({
+        type: 'highlight',
+        dataIndex: params.dataIndex
+      })
+
       const node = params.data
       if (node && node.raw && node.raw.type) {
         setDetail(node.raw)