用Echart的Graph实现双向流程图

我不是女神ヾ 2023-01-17 06:26 265阅读 0赞

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70][]

Echart代码：

initChart(item) {
          this.chart = echarts.init(document.getElementsByClassName("popupQualified")[0]);
          this.chart.setOption({
            yAxis: [
              {
                type: "category",
                boundaryGap: false,
                show: false,
                //这里按照同一工序有多个子工序的最大值取个数
                data: this.YData,
              },
            ],
            xAxis: {
              type: "category",
              show: false,
              data: [],
            },
            series: [
              {
                type: "graph",
                layout: "none",
                coordinateSystem: "cartesian2d",
                symbolKeepAspect: false,
                symbol: "rect",
    
                symbolSize: [130, 120],
                label: {
                  normal: {
                    show: true,
                  },
                },
                edgeSymbol: ["circle", "arrow"],
                edgeSymbolSize: [2, 5],
                data: this.ValueData,
                links: this.LinksData,
                lineStyle: {
                  normal: {
                    color: "#2f4554",
                  },
                },
              },
            ],
          });
        },

数据：

console.log('YData:', this.YData)
    /**
        [1,2,3]
    **/
    console.log('ValueData:', this.ValueData)
    /**
        [
            {
                name: "工序1_1",
                processName: "测试订单",
                value:[0,0],
                workCellType: 0,
                workCenterName: "激光落料中心",              
            },{
                name: "工序1_2",
                processName: "测试订单",
                value:[0,1],
                workCellType: 0,
                workCenterName: "激光落料中心",              
            },{
                name: "工序2_1",
                processName: "测试订单",
                value:[120,0],
                workCellType: 0,
                workCenterName: "激光落料中心",              
            },{
                name: "工序2_2",
                processName: "测试订单",
                value:[120,1],
                workCellType: 0,
                workCenterName: "激光落料中心",              
            },{
                name: "工序2_3",
                processName: "测试订单",
                value:[120,2],
                workCellType: 0,
                workCenterName: "激光落料中心",              
            },{
                name: "工序3_1",
                processName: "测试订单",
                value:[240,0],
                workCellType: 0,
                workCenterName: "激光落料中心",              
            },
        ]
    **/
    console.log('LinksData:', this.LinksData)
    /**
        [{ source: "工序1_1", target: "工序2_1" },
    	 { source: "工序2_1", target: "工序3_1" },
    	 { source: "工序1_1", target: "工序1_2" },
    	 { source: "工序1_2", target: "工序1_1" },
    	 { source: "工序2_1", target: "工序2_2" },
    	 { source: "工序2_2", target: "工序2_1" },
    	 { source: "工序2_2", target: "工序2_3" },
    	 { source: "工序2_3", target: "工序2_2" }]
    **/

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70]: /images/20221021/e4d4ce103f7041bca957a3b13375e74d.png