使用html快速基于relation-graph实现关系图谱
relation-graph项目使用典型的vue编程方式开发的组件。 涉及到组件挂载，其可视化实现需要基于Vue前端框架，无法在纯html上使用。 网上迅速实现代码参考太少，故简单写个html使用模板供大家快速实现可视化。
配置：
1. 需本地存在relation-graph.min.js文件。文件地址：“ https://gitee.com/xx-other/relation-graph/blob/master/dist/relation-graph.min.js ” 保存到本地
2. 需要vue (此例子使用版本v2.7.13)。 可线上依赖方式（https://cdn.jsdelivr.net/npm/vue/dist/vue.js），也可保存到本地引入
模版：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=3.0,user-scalable=yes">
<title>relation-graph 模版htmltitle>
head>
<body>
<div id="app">
<div style="height:calc(100vh - 50px);">
<Relation-Graph ref="seeksRelationGraph" :options="graphOptions" :on-node-click="onNodeClick" :on-line-click="onLineClick" />
div>
div>
<script src="js/vue.min.js">script>
<script src="js/relation-graph.min.js">script>
<script>
const RelationGraph = window['relation-graph']
var app = new Vue({
el:'#app',
components: { RelationGraph },
data: {
graphOptions: {
allowSwitchLineShape: true,
allowSwitchJunctionPoint: true,
defaultJunctionPoint: 'border'
// 这里可以参考"Graph 图谱"中的参数进行设置
}
},
mounted() {
this.showSeeksGraph()
},
methods: {
showSeeksGraph(query) {
var __graph_json_data = {
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 }
],
links: [
{ 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' }
]
}
// 以上数据中的node和link可以参考"Node节点"和"Link关系"中的参数进行配置
this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
// Called when the relation-graph is completed
})
},
onNodeClick(nodeObject, $event) {
console.log('onNodeClick:', nodeObject)
},
onLineClick(lineObject, $event) {
console.log('onLineClick:', lineObject)
},
}
})
script>
body>
html>
效果图：
