保定网站优化公司,php初学者网站,做网站公司 陕西渭南,广西建筑工程网vue中图谱关系插件relation-graph 一、效果图二、安装下载#xff08;vue2.0版本的#xff09;三、直接上代码 一、效果图 二、安装下载#xff08;vue2.0版本的#xff09;
npm install --save relation-graph
var foo bar;三、直接上代码
templatediv cla… vue中图谱关系插件relation-graph 一、效果图二、安装下载vue2.0版本的三、直接上代码 一、效果图 二、安装下载vue2.0版本的
npm install --save relation-graph
var foo bar;三、直接上代码
templatediv classgraphClass refmyPageRelationGraphrefseeksRelationGraph:optionsgraphOptions:on-node-clickonNodeClick:on-line-clickonLineClickdivclassnodestyleheight: 100%slotnodeslot-scope{ node }mouseovershowNodeTips(node, $event)mouseouthideNodeTips(node, $event)pstyleposition: absolute;top: 8px;left: 38px;min-width: 350px;font-size: 10px;color: #8c9094;text-align: left;{{ node.text }}/p/div/RelationGraph!-- 点击提示 --divv-showisShowNodeTipsPanel:style{left: nodeMenuPanelPosition.x px,top: nodeMenuPanelPosition.y px,}styleposition: absolute;padding: 5px 10px;width: 250px;background: rgba(230, 217, 202, 0.8);z-index: 999;div styleline-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:样式6defaultJunctionPoint: 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 langscss
.graphClass {height: 700px;position: relative;border: 1px solid #f2f3f3;.rel-map-canvas {margin-left: calc(50% - 10px) !important;}
}
/style
style langscss 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
