Relation Graph一个关系图的使用

时间:2021-6-12 作者:qvyue
Relation Graph (http://www.relation-graph.com/)

Vue 关联关系图谱组件,可以展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱,可提供多种图谱布局,包括树状布局、中心布局、力学布局自动布局等。

  1. 引入relation-graph
npm install --save relation-graph

2.示例代码:
通过调整以下示例代码中的options、nodes、links的配置实现不同的展示效果,还可以通过事件在图谱中实现交互式功能,更多的示例

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) } } }

效果图

Relation Graph一个关系图的使用
image.png
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。