VUE插件 - relation-graph 【人员关系图谱】_vue 任务图谱插件

relation-graph 实现关系图

相信很多朋友会有关系图谱的需求，但是 echarts 又满足不了各位的需求，怎么办呢？ 今天他来了！！
relation-graph 相比较 echarts 和 D3 , 在关系图谱功能方面它能够给使用者带来更好的体验！

下面简述一下使用方法：

1、下载 relation-graph

npm install --save relation-graph
1

2、组件引入

1、import RelationGraph from 'relation-graph'  

2、 也可以在 main.js 文件中使用  Vue.use(RelationGraph)  
	这样可以全局调用，但需要给设置独立标识防止报错！
1
2
3
4

3、html

<template>
   <div>
     <div style="height:calc(100vh - 60px);">
        <RelationGraph ref="graphRef" :options="graphOptions" />
     </div>
   </div>
 </template>
1
2
3
4
5
6
7

4、图谱功能配置

       graphOptions: {
         allowSwitchLineShape: true,
         allowSwitchJunctionPoint: true,
         defaultJunctionPoint: 'border'
       } 
1
2
3
4
5

// 这里的 graphOptions 类似于 echarts 中的 options 但只是对样式的修改，传值则用到 .setJsonData(data)。 
1

配上链接：
Graph 图谱
Layout 布局
Graph instance API

5、图谱展示数据

> 他的这个数据格式还是比较特殊的
1

rootId: ‘a’ : 这个是必填的用来标注中心点，默认起始点。
nodes:[ ] : 这个代表的是你展示的每个 node 节(可以添加一些要展示的信息)
lines:[ ] : 各节点间的联系(可以设置线条样式）

 const jsonData = {
         rootId: 'a',
         nodes: [
           { id: 'a', text: 'A', borderColor: 'yellow' },
           { id: 'b', text: 'B', color: '#43a2f1', fontColor: 'yellow' },
           { id: 'c', text: 'C', nodeShape: 1, width: 80, height: 60 },
           { id: 'e', text: 'E', nodeShape: 0, width: 150, height: 150 }
         ],
         lines: [
           { from: 'a', to: 'b', text: '关系1', color: '#43a2f1' },
           { from: 'a', to: 'c', text: '关系2' },
           { from: 'a', to: 'e', text: '关系3' },
           { from: 'b', to: 'e', color: '#67C23A' }
         ]
       }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

上面这些是需要简单了解的，对以后简单调整样式会有帮助！

上代码！上代码！

整体代码

<template>
   <div>
     <div style="height:calc(100vh - 60px);">
        <RelationGraph ref="graphRef" :options="graphOptions" :on-node-click="onNodeClick" :on-line-click="onLineClick" />
     </div>
   </div>
 </template>

 <script> 
 import RelationGraph from 'relation-graph'
 export default {
   name: 'Demo',
   components: { RelationGraph },
   data() {
     return {
       graphOptions: {
         allowSwitchLineShape: true,
         allowSwitchJunctionPoint: true,
         defaultJunctionPoint: 'border'
       }
     }
   },
   mounted() {
     this.showGraph()
   },
   methods: {
     showGraph() {
       const jsonData = {
         rootId: 'a',
         nodes: [
           { id: 'a', text: 'A', borderColor: 'yellow' },
           { id: 'b', text: 'B', color: '#43a2f1', fontColor: 'yellow' },
           { id: 'c', text: 'C', nodeShape: 1, width: 80, height: 60 },
           { id: 'e', text: 'E', nodeShape: 0, width: 150, height: 150 }
         ],
         lines: [
           { from: 'a', to: 'b', text: '关系1', color: '#43a2f1' },
           { from: 'a', to: 'c', text: '关系2' },
           { from: 'a', to: 'e', text: '关系3' },
           { from: 'b', to: 'e', color: '#67C23A' }
         ]
       }
       this.$refs.graphRef.setJsonData(jsonData, (graphInstance) => {})
     },
     onNodeClick(nodeObject, $event) {
       console.log('onNodeClick:', nodeObject)
     },
     onLineClick(lineObject, $event) {
       console.log('onLineClick:', lineObject)
     }
   }
 }
 </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

后续会发布：【发布了会附上链接 】

1、节点居中 相关内容效果高亮
2、新增下级人员
3、节点详情展示等