原创

vue项目中使用GraphVis组件库

温馨提示:
本文最后更新于 2021年12月13日,已超过 158 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我

获取组件库文件

开源项目地址:https://gitee.com/baopengdu/GraphVis/tree/master/dist

  • visgraph.min.js (可视化组件库)
  • visgraph-layout.min.js(布局算法组件库)
  • visgraph-community.min.js(聚类算法组件库)

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

import VisGraph from '@/assets/js/GraphVis/visgraph.min.js' // 自己对应的js文件位置
import LayoutFactory from '@/assets/js/GraphVis/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' // 选中是的阴影颜色
            }
          },
          // 线条配置
          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]
}<br/>// 初始化定义可视化组件对象this.visgraph = new VisGraph(document.getElementById(this.canvasId),this.canvasConfig)this.visgraph.clearAll()  //清空画布this.visgraph.drawData(this.graphData) //绘制图数据

完整示例代码

访问地址:https://www.shuzhiduo.com/A/qVdeoqgpJP/

正文到此结束
该篇文章的评论功能已被站长关闭