钻取模拟数据

src/views/payroll/staffWage/StaffWageDrill.vue

@@ -1,6 +1,6 @@
 <template>
   <m-dialog title="绩效明细" ref="dialog">
-    <div style="height: 200px">
+    <div style="height: 300px">
       <RelationGraph ref="graphRef" :options="graphOptions" />
     </div>
     <div class="mb-3">
@@ -81,18 +81,19 @@ export default {
         defaultLineColor: '#cccccc', // 默认的线条颜色
         defaultLineWidth: 2, // 默认的线条粗细（像素）
         defaultLineShape: 2, // 默认的线条样式（1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6）使用示例
-        defaultNodeShape: 1, // 默认的节点形状，0:圆形；1:矩形
+        // defaultNodeShape: 1, // 默认的节点形状，0:圆形；1:矩形
         defaultShowLineLabel: true, // 默认是否显示连线文字，v2版本此选项已无效，主要是这个选项没什么用
-        hideNodeContentByZoom: true, // 是否根据缩放比例隐藏节点内容
+        hideNodeContentByZoom: false, // 是否根据缩放比例隐藏节点内容
+        defaultNodeWidth: 200,
         // disableDragCanvas: false,
         // lineUseTextPath: false,
-        defaultLineMarker: { // 默认的线条箭头样式，示例参考：配置工具中的选项：连线箭头样式
-          markerWidth: 24,
-          markerHeight: 24,
-          refX: 6,
-          refY: 6,
-          data: 'M2,2 L10,6 L2,10 L6,6 L2,2'
-        },
+        // defaultLineMarker: { // 默认的线条箭头样式，示例参考：配置工具中的选项：连线箭头样式
+        //   markerWidth: 24,
+        //   markerHeight: 24,
+        //   refX: 6,
+        //   refY: 6,
+        //   data: 'M2,2 L10,6 L2,10 L6,6 L2,2'
+        // },
         layouts: [
           {
             label: '自动布局',
@@ -127,18 +128,18 @@ export default {
         const jsonData = {
           rootId: 'a',
           nodes: [
-            { id: 'a', text: 'a' },
-            { id: 'b', text: 'b' },
-            { id: 'b1', text: 'b1' },
-            { id: 'b1-1', text: 'b1-1' },
-            { id: 'b1-2', text: 'b1-2' }
+            { id: '1', text: '客户经理绩效工资' },
+            { id: '2', text: '存款类收益工资' },
+            { id: '3', text: '贷款类收益工资' },
+            { id: '5', text: '管户客户存款存量收益工资' },
+            { id: '6', text: '管户客户存款增量收益工资' }
           ],
           lines: [
-            { from: 'a', to: 'b' },
-            { from: 'b', to: 'b1' },
-            { from: 'b1', to: 'b1-1' },
-            { from: 'b1', to: 'b1-2' },
-            { from: 'b1', to: 'b1-3' }
+            { from: '1', to: '2' },
+            { from: '1', to: '3' },
+            { from: '1', to: '4' },
+            { from: '2', to: '5' },
+            { from: '2', to: '6' }
           ]
         }
         this.$refs.graphRef.setOptions(this.graphOptions)