vue中使用vis.js制作流程图

效果

安装vis.js

npm i vis.js --save

中文文档：https://ame.cool/pages/a7d858/#network-关系图
示例：https://visjs.github.io/vis-network/examples/

在vue2中使用

import { DataSet, Network } from 'vis';
// import '@/../node_modules/vis/dist/vis-network.min.css'; 引入样式才能正常显示导航按钮

init(){
 const edges = new DataSet(this.edges); // 相当于包裹一下，包裹后原型上添加了方法，也可以不包裹直接用
      const container = document.getElementById('process');
      // 将数据赋值给vis 数据格式化器
      const data = {
        nodes: [],
        edges,
      };
	  const option = {
	  autoResize: true, // 网络将自动检测其容器的大小调整，并相应地重绘自身,也可以使用redraw()和 setSize()手动调整容器大小及重绘。
	  width: '100%',
	  height: '100%',
	  locale: 'cn', // 语言设置：工具栏显示中文
// 边
edges: {
          color: {
            hover: '#61F042',
            highlight: '#61F042',
          },
          arrows: {
            to: {
              enabled: true,
              scaleFactor: 0.5,
            },
            from: {
              enabled: false,
              scaleFactor: 1,
            },
          },
          font: {
            size: 10,
            background: 'transparent',
          },
          // 平滑曲线
          smooth: {
            enabled: true,
            type: 'vertical',
            roundness: 0.7,
          },
        },
// 节点
 nodes: {
          shape: 'box',
          margin: 10,
          widthConstraint: {
            // node最小宽度
            minimum: 100,
          },
          mass: 100, // 节点排斥力
          // 特定形状的配置项。
          shapeProperties: {
            // 此配置项仅适用于image和circularImage 即设置特定形状节点大小！！！！
            useImageSize: false, // 如果为false，则使用size选项；如果为true，则使用图像的大小,且无法通过value缩放节点!!!
          },
          size: 30, // 用于确定标签不在节点内部的节点的大小
        },
// 物理
physics: {
          // 开启物理 nodeSpacing失效
          enabled: false,
          // 避免重叠
          // hierarchicalRepulsion: {
          //   avoidOverlap: '1',
          // },
        },
// 分层布局		
layout: {
          hierarchical: {
            direction: 'LR', // 层次结构的方向
            sortMethod: 'directed', // 节点层级的算法
            // shakeTowards: 'roots', // 根节点排列在顶部
            levelSeparation: 350, // 每层之间最小距离
            nodeSpacing: 200, // 节点距离
          },
        },
}

// 使用svg绘制自定义节点
 this.nodes.forEach((item) => {
        const colorType = item.processStatus;
        const isPush = item.isPushData ? 'inline-block' : 'none';
        const nodeContain = 'overflow:hidden;border-radius:5px;height:100%;box-sizing:border-box;';
        const trangle = 'border-top: 10px solid transparent;border-bottom: 10px solid #fbaf44;';
        const trangle2 = 'border-left: 10px solid transparent;border-right: 10px solid transparent;margin:0 10px 10px 0';
        const divContain = 'height:50%;display:flex;align-items:center;justify-content:center;font-size:12px;';
        const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="350" height="70">
          <foreignObject x="0" y="0" width="100%" height="100%">
            <div xmlns="http://www.w3.org/1999/xhtml" style="border:1px solid ${this.nodeColor[colorType][0]};${nodeContain}">
              <div style="background-color:${this.nodeColor[colorType][1]};${divContain}">
                <div style="${trangle}${trangle2};display:${isPush}">
                  </div>${item.pid} | ${item.belongProj}</div>
              <div style="background-color:${this.nodeColor[colorType][2]};${divContain}">${item.name}</div>
            </div>
          </foreignObject>
        </svg>`;
        const url = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
        data.nodes.push({ id: item.id, image: url, shape: 'image' });
      });

      // 初始化关系图
      const network = new Network(container, data, options);
	  };

其他配置项

const options = {
	// 设置语言格式化对象
        locales: {
          cn: {
            // 工具栏中文翻译
            edit: '编辑',
            del: '删除当前节点或关系',
            back: '返回',
            addNode: '添加节点',
            addEdge: '添加连线',
            editNode: '编辑节点',
            editEdge: '编辑连线',
            addDescription: '点击空白处可添加节点',
            edgeDescription: '点击某个节点拖拽连线可连接另一个节点',
            editEdgeDescription: '可拖拽连线改变关系',
            createEdgeError: '无法将边连接到集群',
            deleteClusterError: '无法删除集群.',
            editClusterError: '无法编辑群集\'',
          },
        },
		 // 导航 用于所有用户与网络的交互。处理鼠标和触摸事件以及导航按钮和弹出窗口
        interaction: {
          // navigationButtons: true,
          keyboard: false,
          hover: true,
          dragNodes: true, // 是否能拖动节点
          dragView: true, // 是否能拖动画布
          multiselect: true, // 按 ctrl 多选
          selectable: true, // 是否可以点击选择
          selectConnectedEdges: true, // 选择节点后是否显示连接线
          hoverConnectedEdges: true, // 鼠标滑动节点后是否显示连接线
          zoomView: true, // 是否能缩放画布

        },
        // 操作模块:包括 添加、删除、获取选中点、设置选中点、拖拽系列、点击等等
        // manipulation: {
        //   enabled: true, // 该属性表示可以编辑，出现编辑操作按钮
        //   addNode: true,
        //   addEdge: true,
        //   // editNode: undefined,
        //   editEdge: true,
        //   deleteNode: true,
        //   deleteEdge: true,

        // },
}