bug 79898

src/components/FlowChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="domId"></div>
+  <div :id="domId" class="chart-dom"></div>
 </template>
 
 <script>
@@ -290,7 +290,7 @@ export default {
               formatText (model) {
                 return model.name
               },
-              offset: 30
+              offset: 10
             }
           ]
         }
@@ -335,5 +335,12 @@ export default {
 </script>
 
 <style scoped lang="less">
+.chart-dom {
+  position: relative;
+}
 
+/deep/ .g6-tooltip {
+  max-width: 200px;
+  padding: 8px 10px;
+}
 </style>

src/components/MindMap.vue

@@ -4,6 +4,7 @@
 
 <script>
 import G6 from '@antv/g6'
+import insertCss from 'insert-css'
 
 // 收起图标
 const COLLAPSE_ICON = function COLLAPSE_ICON (x, y, r) {
@@ -38,6 +39,19 @@ const NODE_COLOR = [
 ]
 // 节点和收起展开之间的间距
 const NODE_ICON_MARGIN = 8
+// 最长文本显示长度
+const ELLIPSE_LENGTH = 30
+// 处理图的tooltip样式
+insertCss(`
+.g6-tooltip {
+    border-radius: 6px;
+    font-size: 12px;
+    color: #fff;
+    background-color: #000;
+    padding: 2px 8px;
+    text-align: center;
+  }
+`)
 
 export default {
   name: 'MindMap',
@@ -159,15 +173,11 @@ export default {
           })
 
           // 文本的部分
-          let textContent = (cfg.num || '') + ' ' + (cfg.name || '')
-          // if (textContent.length > 40) {
-          //   textContent = textContent.slice(0, 20) + '\n' + textContent.slice(20, 40) + '\n' + textContent.slice(40)
-          // } else if (textContent.length > 20) {
-          //   textContent = textContent.slice(0, 20) + '\n' + textContent.slice(20)
-          // }
+          let textContent = (cfg.num || '') + '  ' + (cfg.name || '')
+          const text = textContent.length > ELLIPSE_LENGTH ? textContent.substring(0, ELLIPSE_LENGTH) + '...' : textContent
           group.addShape('text', {
             attrs: {
-              text: textContent,
+              text: text,
               x: this.nodeWidth / 2,
               y: this.nodeHeight / 2,
               textAlign: 'center',
@@ -227,7 +237,17 @@ export default {
         width: document.getElementById(this.domId).clientWidth,
         height: document.getElementById(this.domId).clientHeight,
         modes: {
-          default: ['drag-canvas', 'zoom-canvas']
+          default: [
+            'drag-canvas',
+            'zoom-canvas',
+            {
+              type: 'tooltip',
+              formatText (model) {
+                return (model.num || '') + '&emsp;' + (model.name || '')
+              },
+              offset: 10
+            }
+          ]
         },
         defaultNode: {
           type: 'tree-node',
@@ -355,5 +375,11 @@ export default {
 .mind-map {
   width: 100%;
   height: 100%;
+  position: relative;
+}
+
+/deep/ .g6-tooltip {
+  max-width: 200px;
+  padding: 8px 10px;
 }
 </style>