搜索框输入 “前端流程图插件”，查了很多资料，总结一下有以下几种
flow-chart
代码写法繁琐，不是json就可以解决，效果也比较丑,PASS
darge-d3
github :https://github.com/dagrejs/dagre-d3
效果图
下载里面的demo,改一下json就可以了
// States var states = [ "NEW", "SUBMITTED","FINISHED" ,"FAILED","DELIVER", "CANCELED", "ABOLISHED" , "DELETED","REFUNDING","REFUNDED"]; var map = ['新创建','已提交','已完成','提交失败',"交付中", '已取消','废除','已删除','退款中',"已退款"] // Automatically label each of the nodes states.forEach(function(state,index) { g.setNode(state, { label: `${map[index]}(${state})`})}); // Set up the edges g.setEdge("NEW", "FAILED", { label: "后台接口自动"}); g.setEdge("NEW", "SUBMITTED", { label: "后台接口自动" }); g.setEdge("NEW", "CANCELED", { label: "用户取消订单" }); g.setEdge("SUBMITTED","CANCELED", { label: "用户取消订单" }); g.setEdge("SUBMITTED", "ABOLISHED", { label: "用户超过48小时未支付，\n系统自动取消"}); g.setEdge("ABOLISHED","DELETED", { label: "已删除" }); g.setEdge("CANCELED", "DELETED", { label: "已删除"}); g.setEdge("FAILED", "SUBMITTED", { label: "后台接口自动" }); g.setEdge("SUBMITTED", "DELIVER", { label: "用户支付" }); g.setEdge("FINISHED", "REFUNDING", { label: "用户退款" }); g.setEdge("DELIVER", "FINISHED", { label: "交付完成" }); g.setEdge("REFUNDING", "REFUNDED", { label: "已退款" }); g.setEdge("REFUNDED", "DELETED", { label: "已删除" }); g.setEdge("DELIVER", "REFUNDING", { label: "用户退款" }); g.setEdge("FAILED", "CANCELED", { label: "用户取消订单" });
不满意的地方：画出来的图是垂直方向的，我要的是水平方向,PASS
gojs
GoJS是一个实现交互类图表（比如流程图，树图，关系图，力导图等等）的JS库。本文将介绍GoJs的精华部分。
因为GoJS依赖于HTML5，所以请保证您的浏览器版本支持HTML5，当然还要加载这个库。
github :https://github.com/NorthwoodsSoftware/GoJS
可以通过npm install gojs -save安装
效果图
看里面的demo我自己包装了一下
<template> <div> <p> 您当前处于 <span>用户提交资料</span> 步骤 下一步等待<span>供应商接单</span> <el-button type="text" v-if="show===false" @click="show=true">展开</el-button> <el-button type="text" v-else @click="show=false">收起</el-button> </p> <div v-show="show" ></div> </div> </template> <style scoped> .tip{ color:red; font-size:0.8em; font-weight:bold; padding:5px; } #myDiagramDiv{ height: 200px; border: solid 1px #d3d3d3; } </style>
<script> window.go =require('./go.js') var $ = go.GraphObject.make; import datam from './data'; export default{ mixins:[datam], data(){ return{ myDiagram:null, show:true } }, mounted(){ this.load(); }, methods:{ load(){ this.init(); this.addNodeTemplate(this.User); this.addNodeTemplate(this.Supplier); this.layout(); }, layout() { this.myDiagram.model = go.Model.fromJson(this.myjson); this.myDiagram.layoutDiagram(true); }, getOption(){ // for conciseness in defining templates let options={ yellowgrad : $(go.Brush, "Linear", { 0: "rgb(254, 201, 0)", 1: "rgb(254, 162, 0)" }), greengrad : $(go.Brush, "Linear", { 0: "#98FB98", 1: "#9ACD32" }), bluegrad : $(go.Brush, "Linear", { 0: "#B0E0E6", 1: "#87CEEB" }), redgrad : $(go.Brush, "Linear", { 0: "#C45245", 1: "#871E1B" }), whitegrad : $(go.Brush, "Linear", { 0: "#F0F8FF", 1: "#E6E6FA" }), bigfont : "bold 8pt Helvetica, Arial, sans-serif", smallfont : "bold 6pt Helvetica, Arial, sans-serif", } return options; }, textStyle(){ return { margin: 6, wrap: go.TextBlock.WrapFit, textAlign: "center", editable: true, font: this.getOption()['bigfont'] } }, init(){ this.myDiagram = $(go.Diagram, "myDiagramDiv", { isReadOnly: true, // have mouse wheel events zoom in and out instead of scroll up and down "toolManager.mouseWheelBehavior": go.ToolManager.WheelNone, initialAutoScale: go.Diagram.Uniform, "linkingTool.direction": go.LinkingTool.ForwardsOnly, initialContentAlignment: go.Spot.Center, layout: $(go.LayeredDigraphLayout, { isInitial: false, isOngoing: false, layerSpacing: 50 }), "undoManager.isEnabled": true }); //默认节点模板 this.myDiagram.nodeTemplate = $(go.Node, "Auto", new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), // define the node's outer shape, which will surround the TextBlock $(go.Shape, "Rectangle", { fill: this.getOption()['yellowgrad'], stroke: "black", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer", toEndSegmentLength: 50, fromEndSegmentLength: 40 }), $(go.TextBlock, "Page", { margin: 6, font: this.getOption()['bigfont'], editable: true }, new go.Binding("text", "text").makeTwoWay())); // replace the default Link template in the linkTemplateMap this.myDiagram.linkTemplate = $(go.Link, // the whole link panel new go.Binding("points").makeTwoWay(), { curve: go.Link.Bezier, toShortLength: 15 }, new go.Binding("curviness", "curviness"), $(go.Shape, // the link shape { stroke: "#2F4F4F", strokeWidth: 2.5 }), $(go.Shape, // the arrowhead { toArrow: "kite", fill: "#2F4F4F", stroke: null, scale: 2 }) ); }, /** * options:{ * category * shape:RoundedRectangle/Rectangle * shapeOptions:{ * fill:bluegrad/greengrad/yellowgrad/null/redgrad/whitegrad 自定义的 * stroke: "black", * portId:"" * fromLinkable:true * toLinkable: * cursor:"pointer" * fromEndSegmentLength:40 * toEndSegmentLength * strokeWidth * * } * textStyle:{ * margin: 9, * maxSize: new go.Size(200, NaN), * wrap: go.TextBlock.WrapFit, * editable: true, * textAlign: "center", * font: smallfont * }, * * } */ addNodeTemplate(options){ let fill = this.getOption()[options.shapeOptions.fill]; options.shapeOptions.fill = fill; this.myDiagram.nodeTemplateMap.add(options.category, $(go.Node, "Auto", new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), $(go.Shape, options.shape,options.shapeOptions), $(go.TextBlock, this.textStyle(), new go.Binding("text", "text").makeTwoWay()) )); }, } } </script>
不满意的地方：
免费版gojs是有水印的，百度搜索“gojs如何去水印”有一堆答案，我就不写了。