使用JSPlumb&ECharts绘制流程图（以参加会议为例）

最新推荐文章于 2024-04-17 03:18:52 发布

qr457535344

最新推荐文章于 2024-04-17 03:18:52 发布

阅读量1.7k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qr457535344/article/details/103975817

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. JSPlumb

1). 效果图

2). 需要引入的JS文件：

① jquery-1.11.3.js，添加到和html文件同级目录下的JSFiles文件中，保证<script src="./JSFiles/jquery-1.11.3.js"></script>能够正常引用；

② jquery-ui.js，添加位置同上；

③ jquery.jsplumb.js，添加位置同上。

3). HTML中的要点

① 在样式#diagramContainer中设置绘图面板长和宽；

② 在样式.rectangle-narrow-size中设置较窄的矩形框的长宽及直角，如“预定住宿”是一个这种类型的矩形框，在样式.rectangle-midwide-size中设置较宽的矩形框的长宽及直角，如“收到会议通知”是一个这种类型的矩形框，在样式.rectangle- start-end -size中设置圆角的开始及结束矩形框；

③ connector: ['Flowchart']中指定了图形的格式为流程图格式；

④ 在矩形框的上右下左四条边可以添加用于连接的端点，端点的颜色、半径在connectorStyle中设置；

⑤ 通过jsPlumb.addEndpoint在已有矩形框的边上添加端点；

⑥ 通过jsPlumb.connect在两个端点之间添加连线（带箭头）

4). HTML的主要内容

<!DOCTYPE html>
<!-- saved from url=(0057)https://wdd.js.org/jsplumb-chinese-tutorial/demos/17.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #diagramContainer {
      padding: 20px;
      width: 100%;
      height: 1100px;
      border-bottom: 1px solid gray;
      border-top: 1px solid gray;
    }

    .item {
      height: 80px;
      width: 80px;
      border: 1px solid blue;
      float: left;
    }
    .rectangle-narrow-size {
      position: absolute;
      text-align: center;
      line-height: 45px;
      height: 45px;
      width: 100px;
      border: 2px solid #000;
    }
    .rectangle-midwide-size {
      position: absolute;
      text-align: center;
      line-height: 45px;
      height: 45px;
      width: 150px;
      border: 2px solid #000;
    }
    .rectangle-start-end-size {
      position: absolute;
      text-align: center;
      line-height: 45px;
      height: 45px;
      width: 100px;
      border: 2px solid #000;
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <div id="diagramContainer">
    <div id="Start" class="rectangle-start-end-size" style="left: 500px; top: 100px;">开始</div>

    <div id="MeetingInvitation" class="rectangle-midwide-size" style="left: 475px; top: 200px;">收到会议通知</div>

    <div id="MeetingInvitationFile" class="rectangle-midwide-size" style="left: 800px; top: 200px;">会议邀请函</div>

    <div id="MeetingApply" class="rectangle-midwide-size" style="left: 475px; top: 300px;">申请参加会议</div>

    <div id="MeetingApplyFile" class="rectangle-narrow-size" style="left: 750px; top: 300px;">审批单</div>

    <div id="MeetingRegister" class="rectangle-midwide-size" style="left: 475px; top: 400px;">报名参加会议</div>

    <div id="MeetingRegisterBill" class="rectangle-narrow-size" style="left: 680px; top: 400px;">报名费发票</div>

    <div id="HotelReservation" class="rectangle-narrow-size" style="left: 500px; top: 500px;">预定住宿</div>

    <div id="BuyTickets" class="rectangle-midwide-size" style="left: 475px; top: 600px;">购买车票/机票</div>

    <div id="Tickets" class="rectangle-narrow-size" style="left: 200px; top: 600px;">车票/机票</div>

    <div id="MeetingAttendation" class="rectangle-narrow-size" style="left: 500px; top: 700px;">参加会议</div>

    <div id="CheckOutHotel" class="rectangle-narrow-size" style="left: 500px; top: 800px;">办理退房手续</div>

    <div id="HotelBill" class="rectangle-midwide-size" style="left: 300px; top: 800px;">住宿发票及流水单</div>

    <div id="Reimbursement" class="rectangle-narrow-size" style="left: 500px; top: 900px;">报销</div>

    <div id="End" class="rectangle-start-end-size" style="left: 500px; top: 1000px;">结束</div>
 
  <script src="./JSFiles/jquery-1.11.3.js"></script>
  <script src="./JSFiles/jquery-ui.js"></script>
  <script src="./JSFiles/jquery.jsplumb.js"></script>

  <script>
    /* global jsPlumb */
    var config = {}
    config.connectorPaintStyle = {
      lineWidth: 1,
      strokeStyle: 'black',
      joinstyle: 'round',
      fill: 'pink',
      outlineColor: '',
      outlineWidth: ''
    }

    // 鼠标悬浮在连接线上的样式
    config.connectorHoverStyle = {
      lineWidth: 2,
      strokeStyle: 'red',
      outlineWidth: 10,
      outlineColor: ''
    }

    config.baseStyle = {
      endpoint: ['Dot', {
        radius: 8,
        fill: '#ff5722'
      }], // 端点的形状
      connectorStyle: config.connectorPaintStyle, // 连接线的颜色，大小样式
      connectorHoverStyle: config.connectorHoverStyle,
      paintStyle: {
        fillStyle: 'black',
        radius: 3
        // lineWidth: 0
      }, // 端点的颜色样式
      hoverPaintStyle: {
        fillStyle: 'red',
        strokeStyle: 'red'
      },
      isSource: true, // 是否可以拖动（作为连线起点）
      connector: ['Flowchart', {
        gap: 0,
        cornerRadius: 5,
        alwaysRespectStubs: true
      }], // 连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ]
      isTarget: true, // 是否可以放置（连线终点）
      maxConnections: -1, // 设置连接点最多可以连接几条线
      connectorOverlays: [
        ['Arrow', {
          width: 10,
          length: 10,
          location: 1
        }],
        ['Label', {
          label: '',
          cssClass: '',
          labelStyle: {
            color: 'red'
          },
          events: {
            click: function (labelOverlay, originalEvent) {
              console.log('click on label overlay for :' + labelOverlay.component)
              console.log(labelOverlay)
              console.log(originalEvent)
            }
          }
        }]
      ]
    }

    jsPlumb.ready(function () {
      jsPlumb.setContainer('diagramContainer')

      //Start——> MeetingInvitation
      jsPlumb.addEndpoint('Start', {uuid: 'Start_Bottom', anchor: 'Bottom'}, config.baseStyle)
     jsPlumb.addEndpoint('MeetingInvitation', {uuid: 'MeetingInvitation_Top', anchor: 'Top'}, config.baseStyle)
     jsPlumb.connect({uuids: ['Start_Bottom', 'MeetingInvitation_Top']});


      //MeetingInvitation——> MeetingInvitationFile
      jsPlumb.addEndpoint('MeetingInvitation', {uuid: 'MeetingInvitation_right', anchor: 'Right'}, config.baseStyle)
     jsPlumb.addEndpoint('MeetingInvitationFile', {uuid: 'MeetingInvitationFile_Left', anchor: 'Left'}, config.baseStyle)
     jsPlumb.connect({uuids: ['MeetingInvitation_right', 'MeetingInvitationFile_Left']});

      //MeetingInvitation——> MeetingApply
      jsPlumb.addEndpoint('MeetingInvitation', {uuid: 'MeetingInvitation_bottom', anchor: 'Bottom'}, config.baseStyle)
     jsPlumb.addEndpoint('MeetingApply', {uuid: 'MeetingApply_top', anchor: 'Top'}, config.baseStyle)
     jsPlumb.connect({uuids: ['MeetingInvitation_bottom', 'MeetingApply_top']});

      //MeetingApply> MeetingApplyFile
     jsPlumb.addEndpoint('MeetingApply', {uuid: 'MeetingApply_right', anchor: 'Right'}, config.baseStyle)
      jsPlumb.addEndpoint('MeetingApplyFile', {uuid: 'MeetingApplyFile_left', anchor: 'Left'}, config.baseStyle)
     jsPlumb.connect({uuids: ['MeetingApply_right', 'MeetingApplyFile_left']});


    //MeetingApply> MeetingRegister
     jsPlumb.addEndpoint('MeetingApply', {uuid: 'MeetingApply_bottom', anchor: 'Bottom'}, config.baseStyle)
     jsPlumb.addEndpoint('MeetingRegister', {uuid: 'MeetingRegister_top', anchor: 'Top'}, config.baseStyle)
     jsPlumb.connect({uuids: ['MeetingApply_bottom', 'MeetingRegister_top']});

     //MeetingRegister> HotelReservation
     jsPlumb.addEndpoint('MeetingRegister', {uuid: 'MeetingRegister_bottom', anchor: 'Bottom'}, config.baseStyle)
     jsPlumb.addEndpoint('HotelReservation', {uuid: 'HotelReservation_top', anchor: 'Top'}, config.baseStyle)
     jsPlumb.connect({uuids: ['MeetingRegister_bottom', 'HotelReservation_top']});

     //HotelReservation> BuyTickets
     jsPlumb.addEndpoint('HotelReservation', {uuid: 'HotelReservation_bottom', anchor: 'Bottom'}, config.baseStyle)
     jsPlumb.addEndpoint('BuyTickets', {uuid: 'BuyTickets_top', anchor: 'Top'}, config.baseStyle)
     jsPlumb.connect({uuids: ['HotelReservation_bottom', 'BuyTickets_top']});

     //BuyTickets> MeetingAttendation
     jsPlumb.addEndpoint('BuyTickets', {uuid: 'BuyTickets_bottom', anchor: 'Bottom'}, config.baseStyle)
     jsPlumb.addEndpoint('MeetingAttendation', {uuid: 'MeetingAttendation_top', anchor: 'Top'}, config.baseStyle)
     jsPlumb.connect({uuids: ['BuyTickets_bottom', 'MeetingAttendation_top']});

     //MeetingAttendation> CheckOutHotel
     jsPlumb.addEndpoint('MeetingAttendation', {uuid: 'MeetingAttendation_bottom', anchor: 'Bottom'}, config.baseStyle)
     jsPlumb.addEndpoint('CheckOutHotel', {uuid: 'CheckOutHotel_top', anchor: 'Top'}, config.baseStyle)
     jsPlumb.connect({uuids: ['MeetingAttendation_bottom', 'CheckOutHotel_top']});

     //CheckOutHotel> Reimbursement
     jsPlumb.addEndpoint('CheckOutHotel', {uuid: 'CheckOutHotel_bottom', anchor: 'Bottom'}, config.baseStyle)
     jsPlumb.addEndpoint('Reimbursement', {uuid: 'Reimbursement_top', anchor: 'Top'}, config.baseStyle)
     jsPlumb.connect({uuids: ['CheckOutHotel_bottom', 'Reimbursement_top']});

     //Reimbursement> End
     jsPlumb.addEndpoint('Reimbursement', {uuid: 'Reimbursement_bottom', anchor: 'Bottom'}, config.baseStyle)
     jsPlumb.addEndpoint('End', {uuid: 'End_top', anchor: 'Top'}, config.baseStyle)
     jsPlumb.connect({uuids: ['Reimbursement_bottom', 'End_top']});

      //MeetingRegister> MeetingRegisterBill
     jsPlumb.addEndpoint('MeetingRegister', {uuid: 'MeetingRegister_right', anchor: 'Right'}, config.baseStyle)
      jsPlumb.addEndpoint('MeetingRegisterBill', {uuid: 'MeetingRegisterBill_left', anchor: 'Left'}, config.baseStyle)
     jsPlumb.connect({uuids: ['MeetingRegister_right', 'MeetingRegisterBill_left']});

     //BuyTickets> Tickets
      jsPlumb.addEndpoint('BuyTickets', {uuid: 'BuyTickets_left', anchor: 'Left'}, config.baseStyle)
     jsPlumb.addEndpoint('Tickets', {uuid: 'Tickets_right', anchor: 'Right'}, config.baseStyle)
     jsPlumb.connect({uuids: ['BuyTickets_left', 'Tickets_right']});

      //CheckOutHotel> HotelBill
      jsPlumb.addEndpoint('CheckOutHotel', {uuid: 'CheckOutHotel_left', anchor: 'Left'}, config.baseStyle)
     jsPlumb.addEndpoint('HotelBill', {uuid: 'HotelBill_right', anchor: 'Right'}, config.baseStyle)
     jsPlumb.connect({uuids: ['CheckOutHotel_left', 'HotelBill_right']});

     //MeetingInvitationFile> Reimbursement
     jsPlumb.addEndpoint('MeetingInvitationFile', {uuid: 'MeetingInvitationFile_bottom', anchor: 'Bottom'}, config.baseStyle)
     jsPlumb.addEndpoint('Reimbursement', {uuid: 'Reimbursement_right', anchor: 'Right'}, config.baseStyle)
     jsPlumb.connect({uuids: ['MeetingInvitationFile_bottom', 'Reimbursement_right']});

     //MeetingApplyFile> Reimbursement
     jsPlumb.addEndpoint('MeetingApplyFile', {uuid: 'MeetingApplyFile_bottom', anchor: 'Bottom'}, config.baseStyle)
     jsPlumb.addEndpoint('Reimbursement', {uuid: 'Reimbursement_right', anchor: 'Right'}, config.baseStyle)
     jsPlumb.connect({uuids: ['MeetingApplyFile_bottom', 'Reimbursement_right']});

     //MeetingRegisterBill> Reimbursement
     jsPlumb.addEndpoint('MeetingRegisterBill', {uuid: 'MeetingRegisterBill_bottom', anchor: 'Bottom'}, config.baseStyle)
     jsPlumb.addEndpoint('Reimbursement', {uuid: 'Reimbursement_right', anchor: 'Right'}, config.baseStyle)
     jsPlumb.connect({uuids: ['MeetingRegisterBill_bottom', 'Reimbursement_right']});

     //Tickets> Reimbursement
     jsPlumb.addEndpoint('Tickets', {uuid: 'Tickets_bottom', anchor: 'Bottom'}, config.baseStyle)
     jsPlumb.addEndpoint('Reimbursement', {uuid: 'Reimbursement_left', anchor: 'Left'}, config.baseStyle)
     jsPlumb.connect({uuids: ['Tickets_bottom', 'Reimbursement_left']});

     //HotelBill> Reimbursement
     jsPlumb.addEndpoint('HotelBill', {uuid: 'HotelBill_bottom', anchor: 'Bottom'}, config.baseStyle)
     jsPlumb.addEndpoint('Reimbursement', {uuid: 'Reimbursement_left', anchor: 'Left'}, config.baseStyle)
     jsPlumb.connect({uuids: ['HotelBill_bottom', 'Reimbursement_left']});

     // jsPlumb.addEndpoint('MeetingInvitation', {
     //    anchors: ['Top']
     //  }, config.baseStyle)
    })
  </script>


</body></html>

2. ECharts

1). 效果图

2). 需要引入的JS文件：echarts.min.js，添加到html文件同级目录下，保证<script src="echarts.min.js"></script>能够正常引用即可。

3). HTML中的要点

① 在<div id="main" style="width:100%;height:1000px;"></div>中设置绘图面板长和宽

② 在series的data中添加节点，在links中添加节点之间的连接（箭头）

③ 连接的曲直由lineStyle中的curveness属性来控制，粗细由width来控制

④ 节点（圆）的半径由series中的symbolSize属性来控制

4). HTML的主要内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width:100%;height:1000px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        // 模拟数据
        function getVirtulData(year) {
            year = year || '2017';
            var date = +echarts.number.parseDate(year + '-01-01');
            var end = +echarts.number.parseDate(year + '-12-31');
            var dayTime = 3600 * 24 * 1000;
            var data = [];
            for (var time = date; time <= end; time += dayTime) {
                data.push([
                    echarts.format.formatTime('yyyy-MM-dd', time),
                    Math.floor(Math.random() * 10000)
                ]);
            }
            return data;
        }
        option = {
			title: {
				text: '参加会议'
			},
			tooltip: {},
			animationDurationUpdate: 1500,
			animationEasingUpdate: 'quinticInOut',
			series: [
				{
					type: 'graph',
					layout: 'none',
					symbolSize: 90,
					roam: true,
					label: {
						show: true
					},
					edgeSymbol: ['circle', 'arrow'],
					edgeSymbolSize: [4, 10],
					edgeLabel: {
						fontSize: 0
					},
					data: [{
						name: '开始',
						x: 200,
						y: 10
					}, {
						name: '收到会议通知',
						x: 500,
						y: 10
					}, {
						name: '会议邀请函',
						x: 900,
						y: 10
					}, {
						name: '申请参加会议',
						x: 500,
						y: 130
					}, {
						name: '审批单',
						x: 780,
						y: 130
					}, {
						name: '报名参加会议',
						x: 500,
						y: 250
					}, {
						name: '报名费发票',
						x: 650,
						y: 250
					}, {
						name: '预定住宿',
						x: 500,
						y: 370
					}, {
						name: '购买车票/机票',
						x: 500,
						y: 490
					}, {
						name: '车票/机票',
						x: 100,
						y: 490
					}, {
						name: '参加会议',
						x: 500,
						y: 610
					}, {
						name: '办理退房手续',
						x: 500,
						y: 730
					}, {
						name: '住宿发票及流水',
						x: 380,
						y: 730
					}, {
						name: '报销',
						x: 500,
						y: 850
					}, {
						name: '结束',
						x: 800,
						y: 850
					}],
					// links: [],
					links: [{
						source: 100,
						target: 101,
						symbolSize: [5, 20],
						label: {
							show: true
						},
						lineStyle: {
							width: 5,
							curveness: 0.2
						}
					}, {
						source: '节点2',
						target: '节点1',
						label: {
							show: true
						},
						lineStyle: {
							curveness: 0.2
						}
					}, {
						source: '开始',
						target: '收到会议通知'
					}, {
						source: '收到会议通知',
						target: '会议邀请函'
					}, {
						source: '收到会议通知',
						target: '申请参加会议'
					}, {
						source: '申请参加会议',
						target: '审批单'
					}, {
						source: '审批单',
						target: '报销',
						lineStyle: {
							curveness: 0.2
						}
					}, {
						source: '申请参加会议',
						target: '报名参加会议'
					}, {
						source: '会议邀请函',
						target: '报销',
						lineStyle: {
							curveness: 0.17
						}
					}, {
						source: '报名参加会议',
						target: '预定住宿'
					}, {
						source: '报名参加会议',
						target: '报名费发票'
					}, {
						source: '报名费发票',
						target: '报销',
						lineStyle: {
							curveness: 0.2
						}
					}, {
						source: '预定住宿',
						target: '购买车票/机票'
					}, {
						source: '购买车票/机票',
						target: '车票/机票'
					}, {
						source: '购买车票/机票',
						target: '参加会议'
					}, {
						source: '车票/机票',
						target: '报销',
						lineStyle: {
							curveness: -0.3
						}
					}, {
						source: '参加会议',
						target: '办理退房手续'
					}, {
						source: '办理退房手续',
						target: '住宿发票及流水'
					}, {
						source: '办理退房手续',
						target: '报销'
					}, {
						source: '住宿发票及流水',
						target: '报销'
					}, {
						source: '报销',
						target: '结束'
					}],
					lineStyle: {
						opacity: 0.9,
						width: 2,
						curveness: 0
					}
				}
			]
		};
        myChart.setOption(option);
    </script>
</body>
</html>

qr457535344

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用JSPlumb&ECharts绘制流程图（以参加会议为例）

1. JSPlumb1). 效果图2). 需要引入的JS文件：① jquery-1.11.3.js，添加到和html文件同级目录下的JSFiles文件中，保证<script src="./JSFiles/jquery-1.11.3.js"></script>能够正常引用；② jquery-ui.js，添加位置同上；③ jquery.jsplumb.j...
复制链接

扫一扫