echart流程图-工序及状态

先看效果图

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

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>