vue使用GraphVis开发无限拓展的关系图谱的实现

 import VisGraph from '@/assets/js/GraphVis/old/visgraph.min.js' // 自己对应的js文件位置 import LayoutFactory from '@/assets/js/GraphVis/old/visgraph-layout.min.js' // 自己对应的js文件位置 export default { components: { VisGraph, LayoutFactory } }

 config: { // 节点配置 node: { label: { // 标签配置 show: true, // 是否显示 color: '250,250,250', // 字体颜色 font: 'normal 14px Microsoft YaHei', // 字体大小及类型 textPosition: 'Middle_Center', // 字体位置 wrapText: true // 节点包裹文字(该属性为true时只对于字体位置为Middle_Center时有效) }, shape: 'circle', // 节点形状 circle,rect,square,ellipse,triangle,star,polygon,text // width: 60, // 节点宽度(只对于shape为rect时有效) // height: 60, // 节点高度(只对于shape为rect时有效) color: '62,160,250', // 节点颜色 borderColor: '62,160,250', // 节点边框颜色 borderWidth: 0, // 节点边框宽度 borderRadius: 0, // 节点圆角 lineDash: [0], // 节点边框线条类型 [0] 表示实线 [5,8] 表示虚线 borderWidth > 0有效 alpha: 1, // 节点透明度 size: 60, // 节点大小 selected: { // 节点选中后样式 borderColor: '136,198,255', // 选中时边框颜色 borderAlpha: 1, // 选中时的边框透明 borderWidth: 3, // 选中是的边框宽度 showShadow: true, // 是否展示阴影 shadowColor: '136,198,255' // 选中是的阴影颜色 } }, // 线条配置 lin<i style="color:transparent">本文来源gaodai$ma#com搞$代*码*网(</i>k: { label: { // 标签配置 show: true, // 是否显示 color: '100,100,200', // 标签颜色 font: 'normal 10px Arial' // 标签文字大小及类型 }, lineType: 'direct', // 线条类型direct,curver,vlink,hlink,bezier,vbezier,hbezier colorType: 'defined', // 连线颜色类型 source:继承source颜色,target:继承target颜色 both:用双边颜色，defined:自定义 color: '200,200,200', // 线条颜色 alpha: 1, // 连线透明度 lineWidth: 1, // 连线宽度 lineDash: [0], // 虚线间隔样式如：[5,8] showArrow: true, // 显示箭头 selected: { // 选中时的样式设置 color: '20,250,50', // 选中时的颜色 alpha: 1, // 选中时的透明度 lineWidth: 4, // 选中线条宽度 showShadow: true, // 显示阴影 shadowColor: '50,250,50' // 阴影颜色 } }, highLightNeiber: true, // 相邻节点高度标志 wheelZoom: 0.8 // 滚轮缩放开关，不使用时不设置[0,1] }

 this.visgraph = new VisGraph( document.getElementById(this.canvasId), this.canvasConfig ) this.visgraph.clearAll() this.visgraph.drawData(this.graphData)

 this.visgraph.restoreHightLight() // 取消高亮 const allNodes = this.visgraph.getVisibleData() this.currentNode.push(node.id) allNodes.nodes.forEach(item => { if (this.currentNode.indexOf(item.id) === (-1)) { this.visgraph.deleteNode(item) } }) const findNodeNum = Math.round(Math.random() * 50) const increamData = this.buildIncreamData(node, findNodeNum) this.visgraph.activeAddNodeLinks(increamData.nodes, increamData.links) this.visgraph.translateToCenter()

 <!-- * @Author: CarlYang * @Date: 2021-07-23 15:31:51 * @LastEditTime: 2021-07-30 09:46:05 * @LastEditors: Please set LastEditors * @Description: 关系图谱 * @FilePath: \vue-g6\src\views\GraphVis\company.vue --> <div id="container"> <!-- ============================================= 画布视图 ============================================= --><div id="graph-panel"></div><!-- ============================================= 左侧工具栏 ============================================= --><div class="left-toolbar"> <ul> <li title="放大"> <i class="iconfont icon-zoomin"></i></li><li title="缩小"> <i class="iconfont icon-zoomout"></i></li><li title="保存图片"> <i class="iconfont icon-baocun-"></i></li><li title="导出JSON"> <i class="iconfont icon-json"></i></li><li title="缩略图"> <i class="iconfont icon-suolvetu" style="font-size: 14px"></i></li><li title="顺时针旋转"> <i class="iconfont icon-shunshizhenfangxiangclockwise4" style="font-size: 14px"></i></li><li title="逆时针旋转"> <i class="iconfont icon-nishizhencounterclockwise3" style="font-size: 14px"></i></li><li title="正常模式"> <i class="iconfont icon-pointer-up"></i></li><li title="拖拽模式"> <i class="iconfont icon-line-dragmovetuozhuai-01"></i></li><li title="框选模式"> <i class="iconfont icon-kuangxuan1"></i></li><li title="全屏显示"> <i class="iconfont icon-quanping" style="font-size: 20px"></i></li></ul></div><!-- ============================================= 右键菜单 ============================================= --><div id="nodeMenuDialog" class="nodeMenuDialog"> <ul> <li>节点信息</li><li>配置节点</li><li>选中关联</li><li>删除节点</li><li>收起节点</li><li>展开节点</li></ul></div><!-- ============================================= 节点信息弹框 ============================================= --> <div class="nodeInfo">      <div class="nodeInfoRelation">    目标节点<table border="0" cellspacing="0" cellpadding="0" class="nodeInfo-table"> 0"> <thead> <tr> <th>实体对象</th><th>关系类型</th></tr></thead><tbody> <tr> <td style="cursor: pointer">{{ item.label }}</td><td>{{ item.relationType }}</td></tr></tbody></table><p>无数据</p>  来源节点<table border="0" cellspacing="0" cellpadding="0" class="nodeInfo-table"> 0"> <thead> <tr> <th>实体对象</th><th>关系类型</th></tr></thead><tbody> <tr> <td style="cursor: pointer">{{ item.label }}</td><td>{{ item.relationType }}</td></tr></tbody></table><p>无数据</p></div> <div class="nodeInfoAttribute">  </div></div><!-- ============================================= 节点配置 ============================================= --> <div class="nodeConfig">      <div class="form-color"> </div>     <div class="form-color"> </div>    <div class="form-color"> </div> <div class="form-color"> </div> <div class="save-setting"> 保存配置</div></div></div> #container { width: 100%; position: relative; #graph-panel { width:100%; height:100%; background:#9dadc1; position: absolute; z-index: 1; } /* 测试菜单栏 */ .left-toolbar { position: absolute; top: 0; left: 0; z-index: 1000; width: 45px; height: 100%; background-color: #fafafa; border-right: 1px solid #e5e2e2; ul { li { text-align: center; height: 35px; color: #066fba; line-height: 35px; cursor: pointer; padding: 0; i { font-size: 18px; } &:hover { background-color: #6ea36d; color: #fff; } } } } /* 右键弹框样式 */ .nodeMenuDialog { display: none; position: absolute; min-width: 100px; padding: 2px 3px; margin: 0; border: 1px solid #e3e6eb; background: #f9f9f9; color: #333; z-index: 100; border-radius: 5px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); transform: translate(0, 15px) scale(0.95); transition: transform 0.1s ease-out, opacity 0.1s ease-out; overflow: hidden; cursor: pointer; li { display: block; position: relative; margin: 0; padding: 0 10px; border-radius: 5px; white-space: nowrap; line-height: 30px; text-align: center; &:hover { background-color: #c3e5fd; } } } /* 节点信息弹框 */ .nodeInfo { .nodeInfoForm { padding: 20px 20px 0 20px; border: solid 1px #dcdfe6; border-left: none; border-right: none; margin: 20px 0; } .nodeInfoRelation { padding: 0 20px; .nodeInfo-table { width: 100%; overflow-y: scroll; th { width: 50%; border: 1px solid #ebeef5; padding: 9px 0 9px 9px; text-align: left; &:first-child { border-right: none; } } td { width: 50%; border: 1px solid #ebeef5; border-top: none; padding: 9px 0 9px 9px; &:first-child { border-right: none; } } } /deep/ .el-badge__content.is-fixed { top: 24px; right: -7px; } p { text-align: center; padding: 20px 0; } } .nodeInfoAttribute { padding: 0 20px; } } /* 节点配置弹框 */ .nodeConfig { padding: 20px 20px 0 20px; border: solid 1px #dcdfe6; border-left: none; border-right: none; margin: 20px 0; .form-color { display: flex; justify-content: space-between; .form-input { width: calc(100% - 50px); } } .save-setting { width: 100%; margin-bottom: 20px; .el-button { width: 100%; } } } }