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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
| <meta charSet="utf-8">
| <title>relation-graph demo</title>
|
| <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
| <!-- screenfull和html2canvas是relation-graph依赖的两个组件，需要引入 -->
| <script src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/5.1.0/screenfull.min.js"></script>
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
| <!-- 引入relation-graph -->
| <script src="https://unpkg.com/relation-graph/vue2/relation-graph.umd.js"></script>
| <body>
| <div id="app">
| <div>
| <div style="height:50px;padding-top:6px;padding-left: 30px;padding-right:30px;border-bottom: #efefef solid 1px;">
| <el-radio-group v-model="currentCase" size="small" @change="resetGraph">
| <el-radio-button label="横向树状图谱"></el-radio-button>
| <el-radio-button label="纵向树状图谱" ></el-radio-button>
| </el-radio-group>
| <el-button type="success" class="c-show-code-button"><el-link href="https://github.com/seeksdream/relation-graph/blob/master/examples/views/seeks-graph-docs/demo/Demo4BothwayTree.vue" target="_blank" style="color: #ffffff;">查看代码</el-link></el-button>
| </div>
| <div style="height:calc(100vh - 100px);">
| <relation-graph
| ref="seeksRelationGraph"
| :options="graphOptions"
| :on-node-click="onNodeClick"
| :on-line-click="onLineClick"
| />
| </div>
| </div>
| </div>
| </body>
| <script>
| const app = new Vue({
| el: '#app',
| data: {
| currentCase: '横向树状图谱',
| isShowCodePanel: false,
| graphOptions: {
| debug: true,
| 'backgrounImage': 'https://camo.githubusercontent.com/ede1654f055903cdc39044129d15d5b158f4f3b33ba5b7c21c7407792a506dea/687474703a2f2f72656c6174696f6e2d67726170682e636f6d2f776562736974652f6c6f676f',
| 'backgrounImageNoRepeat': true,
| 'layouts': [
| {
| 'layoutName': 'tree',
| 'from': 'left',
| 'max_per_width': '300',
| 'min_per_height': '40'
| }
| ],
| 'defaultNodeShape': 1,
| 'defaultNodeWidth': '100',
| 'defaultLineShape': 4,
| 'defaultJunctionPoint': 'lr',
| 'defaultNodeBorderWidth': 0,
| 'defaultLineColor': 'rgba(0, 186, 189, 1)',
| 'defaultNodeColor': 'rgba(0, 206, 209, 1)'
| }
| },
| mounted() {
| this.resetGraph();
| },
| methods: {
| resetGraph() {
| if (this.currentCase === '横向树状图谱') {
| this.graphOptions.layouts[0].from = 'left';
| this.graphOptions.layouts[0].min_per_width = 40;
| this.graphOptions.layouts[0].max_per_width = 300;
| this.graphOptions.layouts[0].min_per_height = 40;
| this.graphOptions.layouts[0].max_per_height = 200;
| this.graphOptions.defaultNodeWidth = 100;
| this.graphOptions.defaultNodeHeight = 30;
| this.graphOptions.defaultJunctionPoint = 'tb';
| } else {
| this.graphOptions.layouts[0].from = 'top';
| this.graphOptions.layouts[0].min_per_width = 40;
| this.graphOptions.layouts[0].max_per_width = 200;
| this.graphOptions.layouts[0].min_per_height = 40;
| this.graphOptions.layouts[0].max_per_height = 200;
| this.graphOptions.defaultNodeWidth = 30;
| this.graphOptions.defaultNodeHeight = 100;
| this.graphOptions.defaultJunctionPoint = 'lr';
| }
| this.$refs.seeksRelationGraph.setOptions(this.graphOptions, (graphInstance) => {
| this.showSeeksGraph();
| });
| },
| showSeeksGraph() {
| const __graph_json_data = {
| 'rootId': 'a',
| 'nodes': [
| { 'id': 'a', 'text': '根节点a' },
| { 'id': 'b', 'text': '根节点b' },
| // 根节点左侧的数据：
| { 'id': 'R-b', 'text': 'R-b' }, { 'id': 'R-b-1', 'text': 'R-b-1' }, { 'id': 'R-b-2', 'text': 'R-b-2' }, { 'id': 'R-b-3', 'text': 'R-b-3' },
| { 'id': 'R-c', 'text': 'R-c' }, { 'id': 'R-c-1', 'text': 'R-c-1' }, { 'id': 'R-c-2', 'text': 'R-c-2' },
| { 'id': 'R-d', 'text': 'R-d' }, { 'id': 'R-d-1', 'text': 'R-d-1' }, { 'id': 'R-d-2', 'text': 'R-d-2' }, { 'id': 'R-d-3', 'text': 'R-d-3' },
| // 根节点右侧的数据：
| { 'id': 'b', 'text': 'b' }, { 'id': 'b1', 'text': 'b1' }, { 'id': 'b1-1', 'text': 'b1-1' },
| { 'id': 'b1-2', 'text': 'b1-2' }, { 'id': 'b1-3', 'text': 'b1-3' }, { 'id': 'b1-4', 'text': 'b1-4' }, { 'id': 'b1-5', 'text': 'b1-5' },
| { 'id': 'b1-6', 'text': 'b1-6' }, { 'id': 'b2', 'text': 'b2' }, { 'id': 'b2-1', 'text': 'b2-1' }, { 'id': 'b2-2', 'text': 'b2-2' },
| { 'id': 'b2-3', 'text': 'b2-3' }, { 'id': 'b2-4', 'text': 'b2-4' }, { 'id': 'b3', 'text': 'b3' }, { 'id': 'b3-1', 'text': 'b3-1' },
| { 'id': 'b3-2', 'text': 'b3-2' }, { 'id': 'b3-3', 'text': 'b3-3' }, { 'id': 'b3-4', 'text': 'b3-4' }, { 'id': 'b3-5', 'text': 'b3-5' },
| { 'id': 'b3-6', 'text': 'b3-6' }, { 'id': 'b3-7', 'text': 'b3-7' }, { 'id': 'b4', 'text': 'b4' },
| { 'id': 'b4-1', 'text': 'b4-1' }, { 'id': 'b4-2', 'text': 'b4-2' }, { 'id': 'b4-3', 'text': 'b4-3' },
| { 'id': 'b4-4', 'text': 'b4-4' }, { 'id': 'b4-5', 'text': 'b4-5' }, { 'id': 'b4-6', 'text': 'b4-6' },
| { 'id': 'b4-7', 'text': 'b4-7' }, { 'id': 'b4-8', 'text': 'b4-8' }, { 'id': 'b4-9', 'text': 'b4-9' },
| { 'id': 'b5', 'text': 'b5' }, { 'id': 'b5-1', 'text': 'b5-1' }, { 'id': 'b5-2', 'text': 'b5-2' },
| { 'id': 'b5-3', 'text': 'b5-3' }, { 'id': 'b5-4', 'text': 'b5-4' }, { 'id': 'b6', 'text': 'b6' },
| { 'id': 'b6-1', 'text': 'b6-1' }, { 'id': 'b6-2', 'text': 'b6-2' }, { 'id': 'b6-3', 'text': 'b6-3' },
| { 'id': 'b6-4', 'text': 'b6-4' }, { 'id': 'b6-5', 'text': 'b6-5' }, { 'id': 'c', 'text': 'c' },
| { 'id': 'c1', 'text': 'c1' }, { 'id': 'c1-1', 'text': 'c1-1' }, { 'id': 'c1-2', 'text': 'c1-2' },
| { 'id': 'c1-3', 'text': 'c1-3' }, { 'id': 'c1-4', 'text': 'c1-4' }, { 'id': 'c1-5', 'text': 'c1-5' },
| { 'id': 'c1-6', 'text': 'c1-6' }, { 'id': 'c1-7', 'text': 'c1-7' }, { 'id': 'c2', 'text': 'c2' },
| { 'id': 'c2-1', 'text': 'c2-1' }, { 'id': 'c2-2', 'text': 'c2-2' }, { 'id': 'c3', 'text': 'c3' },
| { 'id': 'c3-1', 'text': 'c3-1' }, { 'id': 'c3-2', 'text': 'c3-2' }, { 'id': 'c3-3', 'text': 'c3-3' },
| { 'id': 'd', 'text': 'd' }, { 'id': 'd1', 'text': 'd1' }, { 'id': 'd1-1', 'text': 'd1-1' },
| { 'id': 'd1-2', 'text': 'd1-2' }, { 'id': 'd1-3', 'text': 'd1-3' }, { 'id': 'd1-4', 'text': 'd1-4' },
| { 'id': 'd1-5', 'text': 'd1-5' }, { 'id': 'd1-6', 'text': 'd1-6' }, { 'id': 'd1-7', 'text': 'd1-7' },
| { 'id': 'd1-8', 'text': 'd1-8' }, { 'id': 'd2', 'text': 'd2' }, { 'id': 'd2-1', 'text': 'd2-1' },
| { 'id': 'd2-2', 'text': 'd2-2' }, { 'id': 'd3', 'text': 'd3' }, { 'id': 'd3-1', 'text': 'd3-1' },
| { 'id': 'd3-2', 'text': 'd3-2' }, { 'id': 'd3-3', 'text': 'd3-3' }, { 'id': 'd3-4', 'text': 'd3-4' },
| { 'id': 'd3-5', 'text': 'd3-5' }, { 'id': 'd4', 'text': 'd4' }, { 'id': 'd4-1', 'text': 'd4-1' },
| { 'id': 'd4-2', 'text': 'd4-2' }, { 'id': 'd4-3', 'text': 'd4-3' }, { 'id': 'd4-4', 'text': 'd4-4' },
| { 'id': 'd4-5', 'text': 'd4-5' }, { 'id': 'd4-6', 'text': 'd4-6' }, { 'id': 'e', 'text': 'e' },
| { 'id': 'e1', 'text': 'e1' }, { 'id': 'e1-1', 'text': 'e1-1' }, { 'id': 'e1-2', 'text': 'e1-2' },
| { 'id': 'e1-3', 'text': 'e1-3' }, { 'id': 'e1-4', 'text': 'e1-4' }, { 'id': 'e1-5', 'text': 'e1-5' },
| { 'id': 'e1-6', 'text': 'e1-6' }, { 'id': 'e2', 'text': 'e2' }, { 'id': 'e2-1', 'text': 'e2-1' },
| { 'id': 'e2-2', 'text': 'e2-2' }, { 'id': 'e2-3', 'text': 'e2-3' }, { 'id': 'e2-4', 'text': 'e2-4' },
| { 'id': 'e2-5', 'text': 'e2-5' }, { 'id': 'e2-6', 'text': 'e2-6' }, { 'id': 'e2-7', 'text': 'e2-7' },
| { 'id': 'e2-8', 'text': 'e2-8' }, { 'id': 'e2-9', 'text': 'e2-9' }
| ],
| 'lines': [
| // 根节点左侧的关系数据，注意关系的方向，是从 节点--->根节点：
| { 'from': 'R-b', 'to': 'b' }, { 'from': 'R-b-1', 'to': 'R-b' }, { 'from': 'R-b-2', 'to': 'R-b' }, { 'from': 'R-b-3', 'to': 'R-b' },
| { 'from': 'R-c', 'to': 'a' }, { 'from': 'R-c-1', 'to': 'R-c' }, { 'from': 'R-c-2', 'to': 'R-c' },
| // 为了让节点显示在左侧，比必须让关系数据是这样："节点--->根节点："，但如果你还是想让关系的箭头从根节点指向左侧节点，你可以使用isReverse属性，这个属性可以让关系箭头朝反方向指
| { 'from': 'R-d', 'to': 'a', isReverse: true }, { 'from': 'R-d-1', 'to': 'R-d', isReverse: true }, { 'from': 'R-d-2', 'to': 'R-d', isReverse: true }, { 'from': 'R-d-3', 'to': 'R-d', isReverse: true },
| // 根节点右侧的关系数据，注意关系的方向，是从 根节点--->节点：
| { 'from': 'a', 'to': 'b' }, { 'from': 'b', 'to': 'b1' }, { 'from': 'b1', 'to': 'b1-1' }, { 'from': 'b1', 'to': 'b1-2' },
| { 'from': 'b1', 'to': 'b1-3' }, { 'from': 'b1', 'to': 'b1-4' }, { 'from': 'b1', 'to': 'b1-5' }, { 'from': 'b1', 'to': 'b1-6' },
| { 'from': 'b', 'to': 'b2' }, { 'from': 'b2', 'to': 'b2-1' }, { 'from': 'b2', 'to': 'b2-2' }, { 'from': 'b2', 'to': 'b2-3' },
| { 'from': 'b2', 'to': 'b2-4' }, { 'from': 'b', 'to': 'b3' }, { 'from': 'b3', 'to': 'b3-1' }, { 'from': 'b3', 'to': 'b3-2' },
| { 'from': 'b3', 'to': 'b3-3' }, { 'from': 'b3', 'to': 'b3-4' }, { 'from': 'b3', 'to': 'b3-5' }, { 'from': 'b3', 'to': 'b3-6' },
| { 'from': 'b3', 'to': 'b3-7' }, { 'from': 'b', 'to': 'b4' }, { 'from': 'b4', 'to': 'b4-1' }, { 'from': 'b4', 'to': 'b4-2' },
| { 'from': 'b4', 'to': 'b4-3' }, { 'from': 'b4', 'to': 'b4-4' }, { 'from': 'b4', 'to': 'b4-5' }, { 'from': 'b4', 'to': 'b4-6' },
| { 'from': 'b4', 'to': 'b4-7' }, { 'from': 'b4', 'to': 'b4-8' }, { 'from': 'b4', 'to': 'b4-9' }, { 'from': 'b', 'to': 'b5' },
| { 'from': 'b5', 'to': 'b5-1' }, { 'from': 'b5', 'to': 'b5-2' }, { 'from': 'b5', 'to': 'b5-3' }, { 'from': 'b5', 'to': 'b5-4' },
| { 'from': 'b', 'to': 'b6' }, { 'from': 'b6', 'to': 'b6-1' }, { 'from': 'b6', 'to': 'b6-2' }, { 'from': 'b6', 'to': 'b6-3' },
| { 'from': 'b6', 'to': 'b6-4' }, { 'from': 'b6', 'to': 'b6-5' }, { 'from': 'a', 'to': 'c' }, { 'from': 'c', 'to': 'c1' },
| { 'from': 'c1', 'to': 'c1-1' }, { 'from': 'c1', 'to': 'c1-2' }, { 'from': 'c1', 'to': 'c1-3' }, { 'from': 'c1', 'to': 'c1-4' },
| { 'from': 'c1', 'to': 'c1-5' }, { 'from': 'c1', 'to': 'c1-6' }, { 'from': 'c1', 'to': 'c1-7' }, { 'from': 'c', 'to': 'c2' },
| { 'from': 'c2', 'to': 'c2-1' }, { 'from': 'c2', 'to': 'c2-2' }, { 'from': 'c', 'to': 'c3' }, { 'from': 'c3', 'to': 'c3-1' },
| { 'from': 'c3', 'to': 'c3-2' }, { 'from': 'c3', 'to': 'c3-3' }, { 'from': 'a', 'to': 'd' }, { 'from': 'd', 'to': 'd1' },
| { 'from': 'd1', 'to': 'd1-1' }, { 'from': 'd1', 'to': 'd1-2' }, { 'from': 'd1', 'to': 'd1-3' }, { 'from': 'd1', 'to': 'd1-4' },
| { 'from': 'd1', 'to': 'd1-5' }, { 'from': 'd1', 'to': 'd1-6' }, { 'from': 'd1', 'to': 'd1-7' }, { 'from': 'd1', 'to': 'd1-8' },
| { 'from': 'd', 'to': 'd2' }, { 'from': 'd2', 'to': 'd2-1' }, { 'from': 'd2', 'to': 'd2-2' }, { 'from': 'd', 'to': 'd3' },
| { 'from': 'd3', 'to': 'd3-1' }, { 'from': 'd3', 'to': 'd3-2' }, { 'from': 'd3', 'to': 'd3-3' }, { 'from': 'd3', 'to': 'd3-4' },
| { 'from': 'd3', 'to': 'd3-5' }, { 'from': 'd', 'to': 'd4' }, { 'from': 'd4', 'to': 'd4-1' }, { 'from': 'd4', 'to': 'd4-2' },
| { 'from': 'd4', 'to': 'd4-3' }, { 'from': 'd4', 'to': 'd4-4' }, { 'from': 'd4', 'to': 'd4-5' }, { 'from': 'd4', 'to': 'd4-6' },
| { 'from': 'a', 'to': 'e' }, { 'from': 'e', 'to': 'e1' }, { 'from': 'e1', 'to': 'e1-1' }, { 'from': 'e1', 'to': 'e1-2' },
| { 'from': 'e1', 'to': 'e1-3' }, { 'from': 'e1', 'to': 'e1-4' }, { 'from': 'e1', 'to': 'e1-5' }, { 'from': 'e1', 'to': 'e1-6' },
| { 'from': 'e', 'to': 'e2' }, { 'from': 'e2', 'to': 'e2-1' }, { 'from': 'e2', 'to': 'e2-2' }, { 'from': 'e2', 'to': 'e2-3' },
| { 'from': 'e2', 'to': 'e2-4' }, { 'from': 'e2', 'to': 'e2-5' }, { 'from': 'e2', 'to': 'e2-6' }, { 'from': 'e2', 'to': 'e2-7' },
| { 'from': 'e2', 'to': 'e2-8' }, { 'from': 'e2', 'to': 'e2-9' }
| ] };
| this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (graphInstance) => {
| // 这些写上当图谱初始化完成后需要执行的代码
| });
| },
| onNodeClick(nodeObject, $event) {
| console.log('onNodeClick:', nodeObject);
| },
| onLineClick(lineObject, linkObject, $event) {
| console.log('onLineClick:', lineObject);
| }
| }
| })
| </script>
|
|
