vue2中，开源vue关系图谱组件Relation-Graph的使用——relation-graph示例
npm地址：https://www.npmjs.com/package/relation-graph
文档：http://relation-graph.com/#/docs/start
在线demo：http://relation-graph.com/#/demo/simple
安装
npm install --save relation-graph 效果
代码
index.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> 版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10867.html