vue中图谱关系插件relation-graph_vue图谱插件

一、效果图

二、安装下载（vue2.0版本的）

npm install --save relation-graph
var foo = 'bar';
1
2

三、直接上代码

<template>
  <div class="graphClass" ref="myPage">
    <RelationGraph
      ref="seeksRelationGraph"
      :options="graphOptions"
      :on-node-click="onNodeClick"
      :on-line-click="onLineClick"
    >
      <div
        class="node"
        style="height: 100%"
        slot="node"
        slot-scope="{ node }"
        @mouseover="showNodeTips(node, $event)"
        @mouseout="hideNodeTips(node, $event)"
      >
        <p
          style="
            position: absolute;
            top: 8px;
            left: 38px;
            min-width: 350px;
            font-size: 10px;
            color: #8c9094;
            text-align: left;
          "
        >
          {{ node.text }}
        </p>
      </div>
    </RelationGraph>
    <!-- 点击提示 -->
    <div
      v-show="isShowNodeTipsPanel"
      :style="{
        left: nodeMenuPanelPosition.x + 'px',
        top: nodeMenuPanelPosition.y + 'px',
      }"
      style="
        position: absolute;
        padding: 5px 10px;
        width: 250px;
        background: rgba(230, 217, 202, 0.8);
        z-index: 999;
      "
    >
      <div style="line-height: 15px; color: #888888; font-size: 10px">
        {{ currentNode.text }};[{{ currentNode.id }}]
      </div>
    </div>
  </div>
</template>
<script>
import RelationGraph from 'relation-graph';
import { knowledgeGraphList } from '../../api';
export default {
  components: { RelationGraph },
  props: {
    id: {
      type: [Number, String],
      default: '',
    },
  },
  data() {
    return {
      activeKey: '',
      isShowNodeTipsPanel: false,
      nodeMenuPanelPosition: { x: 0, y: 0 },
      currentNode: {},
      graphOptions: {
        allowShowMiniToolBar: false, //是否显示工具栏
        allowSwitchLineShape: true,
        allowSwitchJunctionPoint: true,
        defaultNodeShape: 0, //默认的节点形状，0:圆形；1:矩形
        // defaultExpandHolderPosition: 'bottom', //节点展开关闭的按钮位置
        defaultLineShape: 1, //默认的线条样式（1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6）
        defaultJunctionPoint: 'border', //默认的连线与节点接触的方式（border:边缘/ltrb:上下左右/tb:上下/lr:左右）当布局为树状布局时应使用tb或者lr，这样才会好看
        //   defaultNodeBorderWidth: 0, //节点边框粗细
        defaultcolor: '#8c9094', //默认的线条颜色
        defaultNodeColor: '#FACD91', //默认的节点背景颜色
        defaultNodeWidth: '30', //节点宽度
        defaultNodeHeight: '30', //节点高度
        defaultFocusRootNode: true, //默认为根节点添加一个被选中的样式
        moveToCenterWhenResize: true, //当图谱的大小发生变化时，是否重新让图谱的内容看起来居中
        debug: true,
        layouts: [
          {
            label: '中心',
            layoutName: 'center', //布局方式（tree树状布局/center中心布局/force自动布局）
            //   layoutClassName: 'seeks-layout-center', //当使用这个布局时，会将此样式添加到图谱上
            defaultJunctionPoint: 'border', //默认的连线与节点接触的方式
            defaultNodeShape: 0, //默认的节点形状，0:圆形；1:矩形
            defaultLineShape: 1, //默认的线条样式（1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6）
          },
        ],
      },
    };
  },
  mounted() {
    this.showSeeksGraph();
  },
  methods: {
    showNodeTips(nodeObject, $event) {
      this.currentNode = nodeObject;
      const _base_position = this.$refs.myPage.getBoundingClientRect();
      this.isShowNodeTipsPanel = true;
      this.nodeMenuPanelPosition.x = $event.clientX - _base_position.x + 10;
      this.nodeMenuPanelPosition.y = $event.clientY - _base_position.y + 10;
    },
    hideNodeTips(nodeObject, $event) {
      this.isShowNodeTipsPanel = false;
    },
    callback(val) {
      this.activeKey = val;
      this.showSeeksGraph();
    },
    //渲染节点和连接线
    showSeeksGraph() {
      knowledgeGraphList({ id: this.id }).then(({ data }) => {
        // 线
        let lines = data.edges.map(item => ({
          from: item.from.toString(),
          to: item.to.toString(),
          text: item.label,
          color: item.label == '依据' ? '#FACD91' : item.label == '历史' ? '#67C23A' : '#82D2F8',
          styleClass: 'my-line-highlightxxxxxxxxxxxxxxx',

          lineShape: 6,
          fromJunctionPoint: 'border',
          toJunctionPoint: 'bottom',
        }));
        // 节点
        let nodes = [];
        data.nodes.forEach((item, index) => {
          let color =
            lines.filter(c => c.to == item.id).length > 0
              ? lines.filter(c => c.to == item.id)[0].color
              : '#FACD91';

          if (index == 0) {
            nodes.push({
              id: item.id.toString(),
              text: item.label,
              color: '#3e7afa',
            });
          } else {
            nodes.push({
              id: item.id.toString(),
              text: item.label,
              color: color,
            });
          }
        });
        var __graph_json_data = {
          rootId: 'a',
          nodes: nodes,
          lines: lines,
        };
        // 以上数据中的node和link可以参考"Node节点"和"Link关系"中的参数进行配置
        this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, graphInstance => {
          setTimeout(() => {
            graphInstance.stopAutoLayout();
          }, 1000);
        });
      });
    },
    //点击节点触发的函数
    onNodeClick(nodeObject, $event) {
      const allLinks = this.$refs.seeksRelationGraph.getLinks();
      allLinks.forEach(link => {
        // 还原所有样式
        link.relations.forEach(line => {
          if (line.data.orignColor) {
            line.color = line.data.orignColor;
          }
          if (line.data.orignFontColor) {
            line.fontColor = line.data.orignColor;
          }
          if (line.data.orignLineWidth) {
            line.lineWidth = line.data.orignLineWidth;
          }
        });
      });
      // 让与{nodeObject}相关的所有连线高亮
      allLinks
        .filter(link => link.fromNode === nodeObject || link.toNode === nodeObject)
        .forEach(link => {
          link.relations.forEach(line => {
            line.data.orignColor = line.color;
            line.data.orignFontColor = line.fontColor || line.color;
            line.data.orignLineWidth = line.lineWidth || 1;
            line.color = '#3e7afa';
            line.fontColor = '#3e7afa';
            line.lineWidth = 1;
          });
        });
      // 有时候更改一些属性后，并不能马上同步到视图，这需要以下方法让视图强制根据数据同步到最新
      this.$refs.seeksRelationGraph.getInstance().dataUpdated();
    },
    //店家连接线触发的函数
    onLineClick(lineObject, $event) {
      console.log('onLineClick:', lineObject);
    },
  },
};
</script>
<style lang="scss">
.graphClass {
  height: 700px;
  position: relative;
  border: 1px solid #f2f3f3;
  .rel-map-canvas {
    margin-left: calc(50% - 10px) !important;
  }
}
</style>
<style lang="scss" scoped>
::v-deep .relation-graph {
  .my-line-highlightxxxxxxxxxxxxxxx {
    animation: my-line-easy-anm1 2s linear infinite;
  }
  .rg-line-anm-1 {
    animation: my-line-easy-anm1 2s linear infinite;
  }
  //取消点击线条后节点的闪烁效果
  rel-node-flashing {
    animation: none;
  }
}

@keyframes my-line-easy-anm1 {
  0% {
    stroke-dashoffset: 100px;
    stroke-dasharray: 5, 5, 5;
  }
  100% {
    stroke-dasharray: 5, 5, 5;
    stroke-dashoffset: 3px;
  }
}
</style>


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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243

链接: https://relation-graph.com/#/docs/start
链接: https://cloud.tencent.com/developer/article/2325304