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

1. JSPlumb

1). 效果图

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

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

② 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的主要内容

  
  
  
  
  


  

    
开始

    
收到会议通知

    
会议邀请函

    
申请参加会议

    
审批单

    
报名参加会议

    
报名费发票

    
预定住宿

    
购买车票/机票

    
车票/机票

    
参加会议

    
办理退房手续

    
住宿发票及流水单

    
报销

    
结束
 
  
  
  

  

 

2. ECharts

1). 效果图

 

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

3). HTML中的要点

① 在

中设置绘图面板长和宽

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

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

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

4). HTML的主要内容