ToB企服应用市场:ToB评测及商务社交产业平台

标题: html简易流程图 [打印本页]
作者: 花瓣小跑    时间: 2024-10-29 09:30
标题: html简易流程图
效果图

使用html+css+js，无图片，没用Canvas
demo:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <link href="draw.css" rel="stylesheet" />
  5.     <script src="draw.js" type="text/javascript"></script>
  6. </head>
  7. <body>
  8.     <div class="diamond" style="top:100px;left: 100px;">
  9.         <span class="diamond-text">开始</span>
  10.     </div>
  12.     <!-- 下箭头 -->
  13.     <div class="arrow-down" style="top:195px;left:140px;">
  14.         <span></span>
  15.     </div>
  17.     <div class="rectangle" style="top:275px;left: 100px;">
  18.         <span class="rectangle-text">步骤一</span>
  19.     </div>
  21.     <div class="arrow-down" style="top:325px;left:140px;">
  22.         <span></span>
  23.     </div>
  25.     <div class="rectangle" style="top:405px;left: 100px;">
  26.         <span class="rectangle-text">步骤二</span>
  27.     </div>
  29.     <div class="arrow-down" style="top:455px;left:140px;">
  30.         <span></span>
  31.     </div>
  33.     <div class="diamond" style="top:550px;left: 100px;">
  34.         <span class="diamond-text">分叉节点</span>
  35.     </div>
  37.     <div>
  38.         <div class="arrow-down" style="top:645px;left:140px;">
  39.             <span></span>
  40.         </div>
  42.         <div class="rectangle" style="top:725px;left: 100px;">
  43.             <span class="rectangle-text">步骤三</span>
  44.         </div>
  46.     </div>
  48.     <div>
  49.         <div class="arrow-horizontal-down" style="top:590px;left:195px;">
  50.             <div></div>
  51.             <span></span>
  52.         </div>
  54.         <div class="rectangle" style="top:725px;left: 230px;">
  55.             <span class="rectangle-text">步骤四</span>
  56.         </div>
  57.     </div>
  60. </body>
  61. </html>
复制代码
css:
  1. /* 椭圆，未用到，使用时需修改 */
  2. .ellipse {
  3.   width: 200px;
  4.   height: 100px;
  5.   background-color: #6495ED;
  6.   border-radius: 100px;
  7. }
  9. .ellipse-text {
  10.   width: 150px;
  11.   height: 150px;
  12.   margin-top: 20px;
  13.   margin-left: 20px;
  14. }
  16. /* 菱形，长宽91.28 */
  17. .diamond {
  18.   width: 80px;
  19.   height: 80px;
  20.   transform: rotate(45deg);
  21.   background-color: #bfa;
  22.   position: absolute;
  23. }
  25. .diamond-text{
  26.   width: 60px;
  27.   margin-top: 10px;
  28.   display: inline-block;
  29.   transform: rotate(-45deg);
  30.   text-align: center;
  31. }
  33. /* 长方形 */
  34. .rectangle{
  35.   width: 92px;
  36.   height: 50px;
  37.   border: 1px;
  38.   border-color: black;
  39.   background-color: aquamarine;
  40.   text-align: center;
  41.   position: absolute;
  42. }
  44. /* 向下箭头 */
  45. .arrow-down {
  46.   width: 2px;
  47.   height: 80px;
  48.   background-color: black;
  49.   position: absolute;
  50. }
  52. .arrow-down span {
  53.   width: 0;
  54.   height: 0;
  55.   border-left: 5px solid transparent;
  56.   border-right: 5px solid transparent;
  57.   border-top: 10px solid black;
  58.   position: relative;
  59.   top:81px;left:-4px;
  60. }
  62. /* 折线箭头 */
  63. .arrow-horizontal-down {
  64.   width: 80px;
  65.   height: 2px;
  66.   background-color: black;
  67.   position: absolute;
  68. }
  70. .arrow-horizontal-down div{
  71.   width: 2px;
  72.   height: 125px;
  73.   left:80px;
  74.   background-color: black;
  75.   position: relative;
  76. }
  78. .arrow-horizontal-down span {
  79.   width: 0;
  80.   height: 0;
  81.   border-left: 5px solid transparent;
  82.   border-right: 5px solid transparent;
  83.   border-top: 10px solid black;
  84.   position: relative;
  85.   top:10px;left:76px;
  86. }
复制代码
js 代码 可以动态天生流程图
  1. // json 节点数据
  2. let data = [
  3.     {
  4.         "id": 0,
  5.         "name": "开始",
  6.         "type": "diamond",
  7.         "click": "alert('开始')",
  8.         "children": [
  9.             1
  10.         ]
  11.     },
  12.     {
  13.         "id": 1,
  14.         "name": "审批一",
  15.         "type": "rectangle",
  16.         "click": "alert('审批一')",
  17.         "children": [
  18.             2
  19.         ]
  20.     },
  21.     {
  22.         "id": 2,
  23.         "name": "审批二",
  24.         "type": "diamond",
  25.         "click": "alert('审批二')",
  26.         "children": [
  27.             3,
  28.             4
  29.         ]
  30.     },
  31.     {
  32.         "id": 3,
  33.         "name": "审批三",
  34.         "type": "rectangle",
  35.         "click": "alert('审批三')",
  36.         "children": []
  37.     },
  38.     {
  39.         "id": 4,
  40.         "name": "审批四",
  41.         "type": "rectangle",
  42.         "click": "alert('审批四')",
  43.         "children": []
  44.     }
  45. ]
  47. // 偏移数值
  48. let offsetNum = {
  49.     diamondTop :95,
  50.     diamondLeft :40,
  51.     rectangleTop :50,
  52.     rectangleLeft :40,
  53.     arrowTop :80,
  54.     arrowLeft :0,
  55.     brokenLineTop:135,
  56.     brokenLineLeft:80
  57. }
  59. // 开始创建
  60. function BeginDraw(){
  61.     CreateNode(data[0],100,100);
  62. }
  64. // 循环创建子节点
  65. function CreateChildNode(lastNode,lastTop,lastLeft){
  66.     // 一个子节点
  67.     if(lastNode.children.length > 0){
  68.         CreateVerticalArrow(lastNode,lastTop,lastLeft);
  69.     }
  70.     // 多个子节点
  71.     if(lastNode.children.length > 1){
  72.         let beginTop = GetOffsetTop(lastNode) / 2 + lastTop - 10;
  73.         let beginLeft = GetOffsetLeft(lastNode) * 2 + lastLeft + 15;
  74.         for (let c = 1;c < lastNode.children.length;c++) {
  75.             CreateBrokenArrow(beginTop,beginLeft,lastNode.children[c])
  76.         }
  77.     }
  78. }
  80. // 创建节点
  81. function CreateNode(node,top,left){
  82.     let div = document.createElement("div");
  83.     div.className = node.type;
  84.     div.style.top = top + "px";
  85.     div.style.left = left + "px";
  86.     let span = document.createElement("span");
  87.     span.innerText = node.name;
  88.     span.className = node.type + "-text";
  89.     div.appendChild(span);
  90.     div.onclick = function() {
  91.         // 使用eval执行方法
  92.         eval(node.click);
  93.     };
  94.     document.body.append(div);
  95.     CreateChildNode(node,top,left);
  96. }
  98. // 创建竖线箭头+节点
  99. function CreateVerticalArrow(lastNode,nodeTop,nodeLeft){
  100.     // 竖线箭头top
  101.     let arrowtop = GetOffsetTop(lastNode) + nodeTop;
  102.     // 竖线箭头left
  103.     let arrowleft = GetOffsetLeft(lastNode) + nodeLeft;
  104.     let div = document.createElement("div");
  105.     div.className = "arrow-down";
  106.     div.style.top = arrowtop + "px";
  107.     div.style.left = arrowleft + "px";
  108.     let span = document.createElement("span");
  109.     div.appendChild(span);
  110.     document.body.append(div);
  111.     for (let key in data) {
  112.         if(lastNode.children[0] == data[key].id){
  113.             // 新节点top
  114.             let newNodeTop = arrowtop + offsetNum.arrowTop;
  115.             if(data[key].type == "diamond"){
  116.                 newNodeTop = newNodeTop + 15;
  117.             }
  118.             CreateNode(data[key],newNodeTop,nodeLeft);
  119.         }
  120.     }
  121. }
  123. // 创建折线箭头+节点
  124. function CreateBrokenArrow(arrowTop,arrowLeft,childnum){
  125.     let div = document.createElement("div");
  126.     div.className = "arrow-horizontal-down";
  127.     div.style.top = arrowTop + "px";
  128.     div.style.left = arrowLeft + "px";
  129.     let ndiv = document.createElement("div");
  130.     let span = document.createElement("span");
  131.     div.appendChild(ndiv);
  132.     div.appendChild(span);
  133.     document.body.append(div);
  134.     for (let key in data) {
  135.         if(childnum == data[key].id){
  136.             // 新节点top
  137.             let newNodeTop = arrowTop + offsetNum.brokenLineTop;
  138.             // 新节点Left
  139.             let newNodeLeft = arrowLeft + offsetNum.brokenLineLeft - GetOffsetLeft(data[key]);
  140.             if(data[key].type == "diamond"){
  141.                 newNodeTop = newNodeTop + 15;
  142.             }
  143.             CreateNode(data[key],newNodeTop,newNodeLeft);
  144.         }
  145.     }
  146. }
  148. // 获取Top偏移量
  149. function GetOffsetTop(lastNode){
  150.     if(lastNode.type == "arrow"){
  151.         return offsetNum.arrowTop;
  152.     }
  153.     else if(lastNode.type == "diamond"){
  154.         return offsetNum.diamondTop;
  155.     }
  156.     else if(lastNode.type == "rectangle"){
  157.         return offsetNum.rectangleTop;
  158.     }
  159.     return 100;
  160. }
  162. // 获取Left偏移量
  163. function GetOffsetLeft(lastNode){
  164.     if(lastNode.type == "arrow"){
  165.         return offsetNum.arrowLeft;
  166.     }
  167.     else if(lastNode.type == "diamond"){
  168.         return offsetNum.diamondLeft;
  169.     }
  170.     else if(lastNode.type == "rectangle"){
  171.         return offsetNum.rectangleLeft;
  172.     }
  173.     return 0;
  174. }
复制代码
动态天生效果


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4