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

1、去GraphVis官网下载对应的js，新版和旧版的js有所不同，看自己需求引入旧版还是新版（GraphVis官方网址：http://www.graphvis.cn/）

• visgraph.min.js （基本配置js）
• visgraph-layout.min.js（配置布局js）

2、在需要的vue文件引入js文件

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 } }

3、加载画布和配置

配置(自己根据需求修改配置)：

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' // 选中是的阴影颜色
            }
          },
          // 线条配置
          link: {
            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)

4、拓展功能：

　　无限拓展子节点，双击节点触发（ondblClick）：　

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()

完整代码（relation.vue）：

注：引入两个js的文件eslint会报错，可以把这个文件忽略，不使用eslint的可以忽略。同时该项目还基于element-ui开发，引入screenfull全屏插件，还有阿里图标库图标，自己按需引入。

Demo演示：

到此这篇关于vue使用GraphVis开发无限拓展的关系图谱的实现的文章就介绍到这了,更多相关vue GraphVis关系图谱内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！