是支持Vue2、Vue3、React的关系数据展示组件,支持通过【插槽】让使用者使用"普通HTML元素、Vue组件、React组件"来完全自定义图形元素,并提供实用的API接口让使用者轻松构建可交互的图形应用。
RelationGraph:官网网站快速使用
参数配置:参数
项目中引用relation-graph:
安装:
## npm 下载
npm install --save relation-graph
## yarn 下载
yarn add relation-graph
在Vue 2 中使用
1)relation-graph也支持在main.js文件中使用Vue.use(RelationGraph);
2)或者直接在vue的script中通过import引用
import RelationGraph from 'relation-graph'
<template>
<div>
<div>关系图</div>
<div style="height: calc(100vh - 60px)">
<RelationGraph
ref="graphRef"
: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: {
defaultJunctionPoint: "border",
// 这里可以参考"Graph 图谱"中的参数进行设置 https://www.relation-graph.com/#/docs/graph
},
};
},
mounted() {
this.showGraph();
},
methods: {
showGraph() {
const jsonData = {
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 },
],
lines: [
{ 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.graphRef.setJsonData(jsonData, (graphInstance) => {
// Called when the relation-graph is completed
console.log("graphInstance", graphInstance);
});
},
onNodeClick(nodeObject, $event) {
console.log("onNodeClick:", nodeObject);
},
onLineClick(lineObject, $event) {
console.log("onLineClick:", lineObject);
},
},
};
</script>