vue使用 jsplumb 生成流程图

1、安装jsPlumb：

npm install jsplumb

2、 在使用的 .vue 文件中引入

import { jsPlumb } from "jsplumb";

简单示例：

注意：注意看 id 为"item-3"和"item-9"那条数据的连线配置

其中有几个小图片，可以用自己的本地图片代替（图标大小的）

<template><div id="wrapper"><div class="line-wrap" v-if="flowChartData1.length == 2"><div :id="flowChartData1[1].id" class="state-item">{{ flowChartData1[1].lable }}</div></div><div class="line-wrap"><div v-for="(item, index) in flowChartData" :key="index" :id="item.id" :class="item.nodeName == 'start' || item.nodeName == 'end' || item.nodeName == 'summary' ? 'state-item-img' : 'state-item'"><img v-if="item.nodeName == 'start'" class="imgs" src="../assets/img/start.png" alt="" /><img v-else-if="item.nodeName == 'summary'" class="imgs" src="../assets/img/cent.png" alt="" /><img v-else-if="item.nodeName == 'end'" class="imgs" src="../assets/img/end.png" alt="" /><div v-else>{{ item.lable }}</div></div></div><div class="line-wrap" v-if="flowChartData1.length > 0 && flowChartData1.length < 3"><div :id="flowChartData1[0].id" class="state-item">{{ flowChartData1[0].lable }}</div></div></div>
</template>
<script>
import { jsPlumb } from "jsplumb";
export default {name: "LiuChengTu",data() {return {// 一行数据的// flowChartData: [//   { id: "item-0", lable: "", nodeName: "start", connectId: [{source: "item-0", target: "item-1"}] }, // 开始//   { id: "item-1", lable: "改革处-经办人-发起", nodeName: "", connectId: [{source: "item-1", target: "item-2"}] },//   { id: "item-2", lable: "承办部门-改革联系人填报/分发", nodeName: "", connectId: [{source: "item-2", target: "item-3"}] },//   { id: "item-3", lable: "", nodeName: "summary", connectId: [{source: "item-3", target: "item-4"}] }, // 汇总/分发//   { id: "item-4", lable: "承办部门-部门主任-审批", nodeName: "", connectId: [{source: "item-4", target: "item-5"}] },//   { id: "item-5", lable: "改革处-经办人-合规性审查", nodeName: "", connectId: [{source: "item-5", target: "item-6"}] },//   { id: "item-6", lable: "改革处-处领导-合规性审查", nodeName: "", connectId: [{source: "item-6", target: "item-7"}] },//   { id: "item-7", lable: "", nodeName: "summary", connectId: [{source: "item-7", target: "item-8"}] }, // 汇总/分发//   { id: "item-8", lable: "", nodeName: "end", connectId: [] }, // 结束// ],// 两行数据的// flowChartData: [//   { id: "item-0", lable: "", nodeName: "start", connectId: [{source: "item-0", target: "item-1"}] }, // 开始//   { id: "item-1", lable: "改革处-经办人-发起", nodeName: "", connectId: [{source: "item-1", target: "item-2"}] },//   { id: "item-2", lable: "承办部门-改革联系人填报/分发", nodeName: "", connectId: [{source: "item-2", target: "item-3"}] },//   { id: "item-3", lable: "", nodeName: "summary", connectId: [{source: "item-3", target: "item-4"}, {source: "item-3", target: "item-9"}] }, // 汇总/分发//   { id: "item-4", lable: "承办部门-部门主任-审批", nodeName: "", connectId: [{source: "item-4", target: "item-5"}] },//   { id: "item-5", lable: "改革处-经办人-合规性审查", nodeName: "", connectId: [{source: "item-5", target: "item-6"}] },//   { id: "item-6", lable: "改革处-处领导-合规性审查", nodeName: "", connectId: [{source: "item-6", target: "item-7"}] },//   { id: "item-7", lable: "", nodeName: "summary", connectId: [{source: "item-7", target: "item-8"}] }, // 汇总/分发//   { id: "item-8", lable: "", nodeName: "end", connectId: [] }, // 结束//   { id: "item-9", lable: "改革处-经办人-接收待阅", nodeName: "handleOut", connectId: [{source: "item-9", target: "item-7"}] }, // 第二行数据// ],// 三行数据的flowChartData: [{ id: "item-0", lable: "", nodeName: "start", connectId: [{source: "item-0", target: "item-1"}] }, // 开始{ id: "item-1", lable: "改革处-经办人-发起", nodeName: "", connectId: [{source: "item-1", target: "item-2"}] },{ id: "item-2", lable: "承办部门-改革联系人填报/分发", nodeName: "", connectId: [{source: "item-2", target: "item-3"}] },{ id: "item-3", lable: "", nodeName: "summary", connectId: [{source: "item-3", target: "item-4"}, {source: "item-3", target: "item-9"}, {source: "item-3", target: "item-10"}] }, // 汇总/分发{ id: "item-4", lable: "承办部门-部门主任-审批", nodeName: "", connectId: [{source: "item-4", target: "item-5"}] },{ id: "item-5", lable: "改革处-经办人-合规性审查", nodeName: "", connectId: [{source: "item-5", target: "item-6"}] },{ id: "item-6", lable: "改革处-处领导-合规性审查", nodeName: "", connectId: [{source: "item-6", target: "item-7"}] },{ id: "item-7", lable: "", nodeName: "summary", connectId: [{source: "item-7", target: "item-8"}] }, // 汇总/分发{ id: "item-8", lable: "", nodeName: "end", connectId: [] }, // 结束{ id: "item-9", lable: "改革处-经办人-接收待阅", nodeName: "handleOut", connectId: [{source: "item-9", target: "item-7"}] }, // 第二行数据{ id: "item-10", lable: "改革处-经办人-接收待阅123", nodeName: "handleOut", connectId: [{source: "item-10", target: "item-7"}] }, // 第二行数据],flowChartData1: []};},mounted() {this.initJsPlumb();},methods: {initJsPlumb() {let jsPlumbConnectList = [];let listData = [];let fenfaData = [];// 处理数据this.flowChartData.forEach(ele=>{if(ele.connectId.length == 1) {if(ele.nodeName == "handleOut") {fenfaData.push(ele);}else {listData.push(ele);let plumbInsInfo = {source: ele.connectId[0].source,target: ele.connectId[0].target,anchor: ["Left","Right","Top","Bottom",[0.3, 0, 0, -1],[0.7, 0, 0, -1],[0.3, 1, 0, 1],[0.7, 1, 0, 1],],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector}jsPlumbConnectList.push(plumbInsInfo)}}else if(ele.connectId.length == 1){if(ele.nodeName == "handleOut") {fenfaData.push(ele);}else {listData.push(ele);ele.connectId.forEach((itemInfo,index)=>{if(index == 0) {let plumbInsInfo = {source: itemInfo.source,target: itemInfo.target,anchor: ["Left","Right","Top","Bottom",[0.3, 0, 0, -1],[0.7, 0, 0, -1],[0.3, 1, 0, 1],[0.7, 1, 0, 1],],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector}jsPlumbConnectList.push(plumbInsInfo)}else {let plumbInsInfo = {source: itemInfo.source,target: itemInfo.target,anchor: ["Bottom", "Left"],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector}jsPlumbConnectList.push(plumbInsInfo)}})}}else {if(ele.nodeName == "handleOut") {fenfaData.push(ele);}else {listData.push(ele);ele.connectId.forEach((itemInfo,index)=>{if(index == 0) {let plumbInsInfo = {source: itemInfo.source,target: itemInfo.target,anchor: ["Left","Right","Top","Bottom",[0.3, 0, 0, -1],[0.7, 0, 0, -1],[0.3, 1, 0, 1],[0.7, 1, 0, 1],],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector}jsPlumbConnectList.push(plumbInsInfo)}else if(index == 1) {let plumbInsInfo = {source: itemInfo.source,target: itemInfo.target,anchor: ["Bottom", "Left"],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector}jsPlumbConnectList.push(plumbInsInfo)}else {let plumbInsInfo = {source: itemInfo.source,target: itemInfo.target,anchor: ["Top", "Left"],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector}jsPlumbConnectList.push(plumbInsInfo)}})}}})this.flowChartData = listData;this.flowChartData1 = fenfaData;if(this.flowChartData1.length > 0) {this.flowChartData1.forEach((ele, index)=>{if(index==0) {let plumbInsInfo = {source: ele.connectId[0].source,target: ele.connectId[0].target,anchor: ["Right", "Bottom"],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector}jsPlumbConnectList.push(plumbInsInfo)}else {let plumbInsInfo = {source: ele.connectId[0].source,target: ele.connectId[0].target,anchor: ["Right", "Top"],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector}jsPlumbConnectList.push(plumbInsInfo)}})}setTimeout(() => {let plumbIns = jsPlumb.getInstance();plumbIns.ready(function () {jsPlumbConnectList.forEach(ele=>{plumbIns.connect(ele);})})}, 500);return;// let plumbIns = jsPlumb.getInstance();plumbIns.ready(function () {plumbIns.connect({// 对应上述基本概念source: "item-0",target: "item-1",anchor: ["Left","Right","Top","Bottom",[0.3, 0, 0, -1],[0.7, 0, 0, -1],[0.3, 1, 0, 1],[0.7, 1, 0, 1],],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint});plumbIns.connect({// 对应上述基本概念source: "item-1",target: "item-2",anchor: ["Left","Right","Top","Bottom",[0.3, 0, 0, -1],[0.7, 0, 0, -1],[0.3, 1, 0, 1],[0.7, 1, 0, 1],],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint});plumbIns.connect({// 对应上述基本概念source: "item-2",target: "item-3",anchor: ["Left","Right","Top","Bottom",[0.3, 0, 0, -1],[0.7, 0, 0, -1],[0.3, 1, 0, 1],[0.7, 1, 0, 1],],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint});plumbIns.connect({// 对应上述基本概念source: "item-3",target: "item-4",anchor: ["Left","Right","Top","Bottom",[0.3, 0, 0, -1],[0.7, 0, 0, -1],[0.3, 1, 0, 1],[0.7, 1, 0, 1],],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint});plumbIns.connect({// 对应上述基本概念source: "item-4",target: "item-5",anchor: ["Left","Right","Top","Bottom",[0.3, 0, 0, -1],[0.7, 0, 0, -1],[0.3, 1, 0, 1],[0.7, 1, 0, 1],],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint});plumbIns.connect({// 对应上述基本概念source: "item-5",target: "item-6",anchor: ["Left","Right","Top","Bottom",[0.3, 0, 0, -1],[0.7, 0, 0, -1],[0.3, 1, 0, 1],[0.7, 1, 0, 1],],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint});plumbIns.connect({// 对应上述基本概念source: "item-6",target: "item-7",anchor: ["Left","Right","Top","Bottom",[0.3, 0, 0, -1],[0.7, 0, 0, -1],[0.3, 1, 0, 1],[0.7, 1, 0, 1],],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint});plumbIns.connect({// 对应上述基本概念source: "item-7",target: "item-8",anchor: ["Left","Right","Top","Bottom",[0.3, 0, 0, -1],[0.7, 0, 0, -1],[0.3, 1, 0, 1],[0.7, 1, 0, 1],],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint});plumbIns.connect({// 对应上述基本概念source: "item-3",target: "item-9",anchor: ["Bottom", "Left"],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint});plumbIns.connect({// 对应上述基本概念source: "item-9",target: "item-7",anchor: ["Right", "Bottom"],connector: ["Flowchart",{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },],endpoint: "Blank",overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay// 添加样式paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint});});},},
};
</script>
<style lang="scss" scoped>
#wrapper {background: radial-gradient(ellipse at top left,rgba(255, 255, 255, 1) 40%,rgba(229, 229, 229, 0.9) 100%);padding: 60px 80px;
}
.state-item-img {width: 50px;height: 50px;color: #606266;border: 2px solid rgba(0, 0, 0, 0);text-align: center;line-height: 30px;font-family: sans-serif;border-radius: 4px;margin-right: 56px;font-size: 14px;.imgs {width: 50px;height: 50px;}
}
.state-item {width: 120px;height: 100px;color: #606266;background: #f6f6f6;border: 2px solid rgba(0, 0, 0, 0.05);text-align: center;line-height: 30px;font-family: sans-serif;border-radius: 4px;margin-right: 60px;font-size: 14px;padding: 5px 10px;display: flex;align-items: center;
}
.line-wrap {display: flex;margin-bottom: 100px;justify-content: center;align-items: center;
}
</style>