先看效果图

参考了一下资料，流程图可以实现当前在那个工序流程图，还需求展示当前状态（可以用色来标记），还有返工的流程在里面（默认是弧线）。希望能够帮助大家，直接上代码：

initChart() { 
    this.$nextTick(() => { 
    this.flowItemChart = echarts.init(document.getElementById('ProcessflowItemChart')) this.setChart() }) }, async setChart(){ 
    let apis=[ { 
   targetName:null,id:"1",Uri:"高温静置24H",Status:"0",target:null}, { 
   targetName:null,id:"2",Uri:"高温负压化成(4H)",Status:"0",target:null}, ] let xn = 6; let ynj = [100, 300, 500, 700, 900, 1100] let yno = [1100, 900, 700, 500, 300, 100]; //数据换行处理 apis.forEach( item =>{ 
    if(item.Uri.indexOf('/') != -1){ 
    item.Uri= item.Uri.replace(/\//g,'\n') } }) //去重复ID let obj = { 
   }; apis = apis.reduce(function (item, next) { 
    obj[next.id] ? '' : obj[next.id] = true && item.push(next); return item; }, []); let data = apis.map((el, ei) => { 
    let rn = Math.floor(ei / xn); let statusColors='#1890ff'; //0当前 ：蓝色- 1经过： 绿色-2未经过：灰色 if(el.Status == 1){ 
    statusColors='#00b96b' }else if(el.Status == 2){ 
    statusColors='#C0C4CC' }else{ 
    statusColors='#1890ff' } return { 
    id:el.id, name: el.Uri, draggable: false, //value:[100,100], //symbol: el.bol, // 节点显示形状 value: (rn + 1) % 2 !== 0 ? [ynj[ei % xn], 150 * (rn + 1)] // 奇数行 : [yno[ei % xn], 150 * (rn + 1)], // 偶数行 //symbolSize: el.symbolSize, //symbolOffset:el.symbolOffset, itemStyle: { 
    normal: { 
    borderColor: "#FFFFFF", borderWidth: 1, shadowBlur: 1, shadowColor: statusColors, color: statusColors, }, }, }; }); let links = apis.map((el, ei) => { 
    if (ei + 1 < apis.length) { 
    return { 
    source: el.id, value:"", target: apis[ei + 1].id, }; } else{ 
    return { 
   }; } }); //增加NG复测 apis.map((el, ei) =>{ 
    if (el.targetName){ 
    links.push({ 
    source: el.id, target: el.target, islink: true, name: el.targetName, lineStyle: { 
    normal: { 
    curveness: 0.2, type: "dashed", }, }, label: { 
    normal: { 
    fontSize: 14, formatter: function (params, ticket, callback) { 
    params.name = params.data.name; return params.name; }, show: true, }, }, }) } }) this.chartoptios={ 
    grid: [ { 
    left:10, top:10, width: "auto", height: "auto", tooltip: { 
    trigger: "item", formatter: "{a}", }, }, ], tooltip: { 
    trigger: "axis", }, xAxis: [ { 
    gridIndex: 0, type: "value", show: false }, { 
    gridIndex: 0, type: "value", show: false }, ], yAxis: [ { 
    gridIndex: 0, type: "category", axisTick: { 
    show: false }, axisLine: { 
    show: false }, }, { 
    gridIndex: 0, show: false, type: "value", inverse: true, max: 600 }, ], axisPointer: { 
    label: { 
    backgroundColor: "#777", }, }, //数据更新动画的时长。 animationDurationUpdate: 1500, //数据更新动画的缓动效果。 animationEasingUpdate: "quinticInOut", series: [ { 
    type: "graph", //layout: "none", coordinateSystem: "cartesian2d", // 使用二维的直角坐标系 legendHoverLink: false, hoverAnimation: true, nodeScaleRatio: false, symbol: "rect", // 节点显示形状 symbolOffset: [0, 0], symbolSize: 95, // 节点大小 edgeSymbol: ["none", "arrow"], // 线两边的标记 edgeSymbolSize: [0, 8], // 标记大小 edgeLabel: { 
    show: false, normal: { 
    show: true, position: "middle", textStyle: { 
    fontSize: 12 }, formatter: "{c}", }, }, focusNodeAdjacency: true, // 鼠标移到节点上突出显示节点以及节点的边和邻接节点 roam: false, // 关闭鼠标缩放 itemStyle: { 
    normal: { 
    label: { 
    show: true, textStyle: { 
    color: "#fff", fontSize: 12, }, }, nodeStyle: { 
    brushType: "both", borderColor: "rgba(255,215,0,0.4)", borderWidth: 1, }, }, }, lineStyle: { 
    normal: { 
    width: 1, shadowColor: "none", color: "#000000", }, }, tooltip: { 
    formatter: "{b}", }, xAxisIndex: 1, yAxisIndex: 1, zlevel: 10, data: data, links: links, }, ], } this.flowItemChart.setOption(this.chartoptios,true) }, 

图中返工的连接线的版本需要写一点位计算方法，这部分比较复杂。有4个位置点连接线，可以看一下相关文稿。
如下：

<template> <div v-loading="cLoading" id="ProcessflowItemChart" class="ProcessflowItemChart"></div> </template> <script> import echarts from 'echarts' export default { 
    data() { 
    return { 
    flowItemChart:null, cLoading:false, }; }, mounted() { 
    this.$nextTick(() => { 
    this.initChart() }) }, beforeDestroy() { 
    if (!this.flowItemChart) { 
    return; } this.flowItemChart.dispose(); this.flowItemChart = null; }, methods: { 
    //连接点 getTdata(data,target ){ 
    let obj={ 
   } data.map(item=>{ 
    if(item.uid ==target ){ 
    obj = item } }) return obj }, //查起点 getIdData(sarr,earr){ 
    let s=[] earr.map(item=>{ 
    let obj2={ 
   } sarr.map(jtem=>{ 
    if(item.eid == jtem.uid){ 
    obj2.name=item.name+'2' obj2.startName=jtem.name obj2.targetName=item.targetName obj2.sid=jtem.uid obj2.symbolSize=0 obj2.x=jtem.x obj2.y=jtem.y+60 s.push(obj2) } }) }) return s }, //查终点 getENDlist(arr){ 
    let e=[] arr.map(item=>{ 
    let obj={ 
   } if(item.target && item.target != item.uid){ 
    let rowData=this.getTdata(arr,item.target) //console.log(rowData,'rowData') if(item.y == rowData.y){ 
    obj.name=item.name+'1' obj.x=item.x obj.y=item.y + 60 obj.symbolSize=0 obj.eid=item.target obj.targetName=item.targetName e.push(obj) }else{ 
    obj.name=item.name+'1' obj.x=item.x obj.y=item.y - 60 obj.symbolSize=0 obj.eid=item.target obj.targetName=item.targetName e.push(obj) } } }) return e }, dataFormat(arr){ 
    let datalist=arr //数据换行处理 datalist.forEach( item =>{ 
    if(item.Uri.indexOf('/') != -1){ 
    item.Uri= item.Uri.replace(/\//g,'\n') } }) //去重 // datalist = datalist.reduce(function (item, next) { 
    // let obj = {}; // obj[next.name] ? '' : obj[next.name] = true && item.push(next); // return item; // }, []); return datalist }, //增加坐标 Addw(apis){ 
    let datalist=[] let xn = 6; let ynj = [200, 400, 600, 800, 1000, 1200] let yno = [ 1200, 1000, 800, 600, 400, 200]; datalist=apis.map((el, ei) => { 
    let rn = Math.floor(ei / xn); let statusColors='#1890ff'; //0当前 ：蓝色- 1经过： 绿色-2未经过(默认值)：灰色 if(el.Status == 1){ 
    statusColors='#00b96b' }else if(el.Status == 2){ 
    statusColors='#C0C4CC' }else{ 
    statusColors='#1890ff' } return { 
    uid:el.id, name: el.Uri, //draggable: false, //fixed: true, target:el.target, targetName:el.targetName, //symbol: el.bol, // 节点显示形状 x:(rn + 1) % 2 !== 0 ?ynj[ei % xn]:yno[ei % xn], y:150 * (rn + 1), //symbolSize: el.symbolSize, itemStyle: { 
    //color: statusColors, normal: { 
    borderColor: "#FFFFFF", borderWidth: 1, shadowBlur: 5, shadowColor: statusColors, color: statusColors, }, }, }; }); return datalist }, async setChart(){ 
    let apis=[ { 
   targetName:null,id:"1",Uri:"高温静置24H",Status:"0",target:null}, { 
   targetName:null,id:"2",Uri:"高温负压化成(4H)",Status:"0",target:null}, ] this.cLoading=true let gid='' if(this.$route.query.Id == '' || !this.$route.query.Id){ 
    //console.log(this.listQuery.CraftsRoute_GuID,'id') gid=this.listQuery.CraftsRoute_GuID }else{ 
    gid=this.$route.query.Id } let data = this.Addw(apis) let links = data.map((el, ei) => { 
    if (ei + 1 < data.length) { 
    return { 
    source: el.name, value:"", target: data[ei + 1].name, }; } else{ 
    return { 
   }; } }); //增加NG复测 let endList=[]; let startList=[]; endList=this.getENDlist(data); startList=this.getIdData(data,endList) //console.log(startList,'startList',endList) data=[...data,...endList,...startList] //data增加2个位- symbolSize: 0,  //复测增加2个点位-源：目标 //links增加4个位 - symbol: "none", data.map(item =>{ 
    let linkObj1 ={ 
    source: '', target: '', islink: true, name: '', lineStyle: { 
    normal: { 
    curveness: 0, type: "dotted", }, }, label: { 
    normal: { 
    fontSize: 14, formatter: function (params, ticket, callback) { 
    params.name = params.data.name; return params.name; }, show: true, }, }, } let linkObj2 ={ 
    source: '', target: '', islink: true, name: '', lineStyle: { 
    normal: { 
    curveness: 0, type: "dotted", }, }, label: { 
    normal: { 
    fontSize: 14, formatter: function (params, ticket, callback) { 
    params.name = params.data.name; return params.name; }, show: true, }, }, } let linkObj3 ={ 
    source: '', target: '', islink: true, name: '', lineStyle: { 
    normal: { 
    curveness: 0, type: "dotted", }, }, label: { 
    normal: { 
    fontSize: 14, formatter: function (params, ticket, callback) { 
    params.name = params.data.name; return params.name; }, show: true, }, }, } if (item.targetName && item.target != item.uid){ 
    // console.log(item,'linksitem') //s1-s2-t2-t1 linkObj1.source=item.name linkObj1.target=item.name+'1' linkObj1.symbol="none" links.push(linkObj1) linkObj2.source=item.name+'1' linkObj2.target=item.name+'12' linkObj2.name=item.targetName; linkObj2.symbol="none" links.push(linkObj2) } if(item.startName){ 
    //console.log(item,'linksitem') linkObj3.source=item.name linkObj3.target=item.startName links.push(linkObj3) } }) this.chartoptios={ 
    grid: [ { 
    left:10, top:10, width: "auto", height: "auto", tooltip: { 
    trigger: "item", formatter: "{a}", }, }, ], tooltip: { 
    trigger: "axis", }, xAxis: [ { 
    gridIndex: 0, type: "value", show: false }, { 
    gridIndex: 0, type: "value", show: false }, ], yAxis: [ { 
    gridIndex: 0, type: "category", axisTick: { 
    show: false }, axisLine: { 
    show: false }, }, { 
    gridIndex: 0, show: false, type: "value", inverse: true, max: 600 }, ], axisPointer: { 
    label: { 
    backgroundColor: "#777", }, }, //数据更新动画的时长。 animationDurationUpdate: 1500, //数据更新动画的缓动效果。 animationEasingUpdate: "quinticInOut", series: [ { 
    type: "graph", //layout: "none", // coordinateSystem: "cartesian2d", // 使用二维的直角坐标系 // legendHoverLink: false, // hoverAnimation: true, // nodeScaleRatio: false, symbol: "rect", // 节点显示形状 symbolOffset: [0, 0], symbolSize: 95, // 节点大小 edgeSymbol: ["none", "arrow"], // 线两边的标记 edgeSymbolSize: [0, 8], // 标记大小 edgeLabel: { 
    show: false, normal: { 
    show: true, position: "middle", textStyle: { 
    fontSize: 12 }, formatter: "{c}", }, }, focusNodeAdjacency: true, // 鼠标移到节点上突出显示节点以及节点的边和邻接节点 roam: false, // 关闭鼠标缩放 itemStyle: { 
    normal: { 
    label: { 
    show: true, textStyle: { 
    color: "#fff", fontSize: 12, }, }, nodeStyle: { 
    brushType: "both", borderColor: "rgba(255,215,0,0.4)", borderWidth: 1, }, }, }, lineStyle: { 
    normal: { 
    width: 1, shadowColor: "none", color: "#000000", }, }, tooltip: { 
    formatter: "{b}", }, xAxisIndex: 1, yAxisIndex: 1, zlevel: 10, data: data, links: links, }, ], } this.flowItemChart.setOption(this.chartoptios,true) }, } } </script>