开发准备
开源的vue知识图谱展示组件：relation-graph，很好用，重点免费
配置说明
如何使用
1，首先，使用npm或者cnpm安装relation-graph：
npm install --save relation-graph
2，在你的vue页面中使用这个组件：
<template>
<div>
<div
style="height:calc(100vh - 50px);"> <RelationGraph
ref="seeksRelationGraph" :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' // 这里可以参考"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>
