vue中图谱关系插件relation-graph

一、效果图
二、安装下载（vue2.0版本的）
三、直接上代码

一、效果图

在这里插入图片描述

二、安装下载（vue2.0版本的）

npm install --save relation-graph
var foo = 'bar';

三、直接上代码

<template><div class="graphClass" ref="myPage"><RelationGraphref="seeksRelationGraph":options="graphOptions":on-node-click="onNodeClick":on-line-click="onLineClick"><divclass="node"style="height: 100%"slot="node"slot-scope="{ node }"@mouseover="showNodeTips(node, $event)"@mouseout="hideNodeTips(node, $event)"><pstyle="position: absolute;top: 8px;left: 38px;min-width: 350px;font-size: 10px;color: #8c9094;text-align: left;">{{ node.text }}</p></div></RelationGraph><!-- 点击提示 --><divv-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>