vue中图谱关系插件relation-graph
- 一、效果图
- 二、安装下载（vue2.0版本的）
- 三、直接上代码
一、效果图
二、安装下载（vue2.0版本的）
npm install --save relation-graph
var foo = 'bar';
三、直接上代码
<template>
<div class="graphClass" ref="myPage">
<RelationGraph
ref="seeksRelationGraph"
:options="graphOptions"
:on-node-click="onNodeClick"
:on-line-click="onLineClick"
>
<div
class="node"
style="height: 100%"
slot="node"
slot-scope="{ node }"
@mouseover="showNodeTips(node, $event)"
@mouseout="hideNodeTips(node, $event)"
>
<p
style="
position: absolute;
top: 8px;
left: 38px;
min-width: 350px;
font-size: 10px;
color: #8c9094;
text-align: left;
"
>
{{ node.text }}
</p>
</div>
</RelationGraph>
<!-- 点击提示 -->
<div
v-show="isShowNodeTipsPanel"
:style="{
left: nodeMenuPanelPosition.x + 'px',
top: nodeMenuPanelPosition.y + 'px',
}"
style="
position: absolute;
padding: 5px 10px;
width: 250px;
background: rgba(230, 217, 202, 0.8);
z-index: 999;
"
>
<div style="line-height: 15px; color: #888888; font-size: 10px">
{{ currentNode.text }};[{{ currentNode.id }}]
</div>
</div>
</div>
</template>
<script>
import RelationGraph from 'relation-graph';
import { knowledgeGraphList } from '../../api';
export default {
components: { RelationGraph },
props: {
id: {
type: [Number, String],
default: '',
},
},
data() {
return {
activeKey: '',
isShowNodeTipsPanel: false,
nodeMenuPanelPosition: { x: 0, y: 0 },
currentNode: {},
graphOptions: {
allowShowMiniToolBar: false, //是否显示工具栏
allowSwitchLineShape: true,
allowSwitchJunctionPoint: true,
defaultNodeShape: 0, //默认的节点形状，0:圆形；1:矩形
// defaultExpandHolderPosition: 'bottom', //节点展开关闭的按钮位置
defaultLineShape: 1, //默认的线条样式（1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6）
defaultJunctionPoint: 'border', //默认的连线与节点接触的方式（border:边缘/ltrb:上下左右/tb:上下/lr:左右）当布局为树状布局时应使用tb或者lr，这样才会好看
// defaultNodeBorderWidth: 0, //节点边框粗细
defaultcolor: '#8c9094', //默认的线条颜色
defaultNodeColor: '#FACD91', //默认的节点背景颜色
defaultNodeWidth: '30', //节点宽度
defaultNodeHeight: '30', //节点高度
defaultFocusRootNode: true, //默认为根节点添加一个被选中的样式
moveToCenterWhenResize: true, //当图谱的大小发生变化时，是否重新让图谱的内容看起来居中
debug: true,
layouts: [
{
label: '中心',
layoutName: 'center', //布局方式（tree树状布局/center中心布局/force自动布局）
// layoutClassName: 'seeks-layout-center', //当使用这个布局时，会将此样式添加到图谱上
defaultJunctionPoint: 'border', //默认的连线与节点接触的方式
defaultNodeShape: 0, //默认的节点形状，0:圆形；1:矩形
defaultLineShape: 1, //默认的线条样式（1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6）
},
],
},
};
},
mounted() {
this.showSeeksGraph();
},
methods: {
showNodeTips(nodeObject, $event) {
this.currentNode = nodeObject;
const _base_position = this.$refs.myPage.getBoundingClientRect();
this.isShowNodeTipsPanel = true;
this.nodeMenuPanelPosition.x = $event.clientX - _base_position.x + 10;
this.nodeMenuPanelPosition.y = $event.clientY - _base_position.y + 10;
},
hideNodeTips(nodeObject, $event) {
this.isShowNodeTipsPanel = false;
},
callback(val) {
this.activeKey = val;
this.showSeeksGraph();
},
//渲染节点和连接线
showSeeksGraph() {
knowledgeGraphList({ id: this.id }).then(({ data }) => {
// 线
let lines = data.edges.map(item => ({
from: item.from.toString(),
to: item.to.toString(),
text: item.label,
color: item.label == '依据' ? '#FACD91' : item.label == '历史' ? '#67C23A' : '#82D2F8',
styleClass: 'my-line-highlightxxxxxxxxxxxxxxx',
lineShape: 6,
fromJunctionPoint: 'border',
toJunctionPoint: 'bottom',
}));
// 节点
let nodes = [];
data.nodes.forEach((item, index) => {
let color =
lines.filter(c => c.to == item.id).length > 0
? lines.filter(c => c.to == item.id)[0].color
: '#FACD91';
if (index == 0) {
nodes.push({
id: item.id.toString(),
text: item.label,
color: '#3e7afa',
});
} else {
nodes.push({
id: item.id.toString(),
text: item.label,
color: color,
});
}
});
var __graph_json_data = {
rootId: 'a',
nodes: nodes,
lines: lines,
};
// 以上数据中的node和link可以参考"Node节点"和"Link关系"中的参数进行配置
this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, graphInstance => {
setTimeout(() => {
graphInstance.stopAutoLayout();
}, 1000);
});
});
},
//点击节点触发的函数
onNodeClick(nodeObject, $event) {
const allLinks = this.$refs.seeksRelationGraph.getLinks();
allLinks.forEach(link => {
// 还原所有样式
link.relations.forEach(line => {
if (line.data.orignColor) {
line.color = line.data.orignColor;
}
if (line.data.orignFontColor) {
line.fontColor = line.data.orignColor;
}
if (line.data.orignLineWidth) {
line.lineWidth = line.data.orignLineWidth;
}
});
});
// 让与{nodeObject}相关的所有连线高亮
allLinks
.filter(link => link.fromNode === nodeObject || link.toNode === nodeObject)
.forEach(link => {
link.relations.forEach(line => {
line.data.orignColor = line.color;
line.data.orignFontColor = line.fontColor || line.color;
line.data.orignLineWidth = line.lineWidth || 1;
line.color = '#3e7afa';
line.fontColor = '#3e7afa';
line.lineWidth = 1;
});
});
// 有时候更改一些属性后，并不能马上同步到视图，这需要以下方法让视图强制根据数据同步到最新
this.$refs.seeksRelationGraph.getInstance().dataUpdated();
},
//店家连接线触发的函数
onLineClick(lineObject, $event) {
console.log('onLineClick:', lineObject);
},
},
};
</script>
<style lang="scss">
.graphClass {
height: 700px;
position: relative;
border: 1px solid #f2f3f3;
.rel-map-canvas {
margin-left: calc(50% - 10px) !important;
}
}
</style>
<style lang="scss" scoped>
::v-deep .relation-graph {
.my-line-highlightxxxxxxxxxxxxxxx {
animation: my-line-easy-anm1 2s linear infinite;
}
.rg-line-anm-1 {
animation: my-line-easy-anm1 2s linear infinite;
}
//取消点击线条后节点的闪烁效果
rel-node-flashing {
animation: none;
}
}
@keyframes my-line-easy-anm1 {
0% {
stroke-dashoffset: 100px;
stroke-dasharray: 5, 5, 5;
}
100% {
stroke-dasharray: 5, 5, 5;
stroke-dashoffset: 3px;
}
}
</style>
链接: https://relation-graph.com/#/docs/start
链接: https://cloud.tencent.com/developer/article/2325304
