自写流程图 支持批量展示

  (function($) {
      $.fn.extend({
          loadStep: function(params,id) {
              var stepArr = params.steps;
              var $this = $(this);
              var createStep = function(len,even) {
                  var step = '<ul class="eStep" id="sStep'+even+'"></ul>';
                  var $step = $(step);

                  for (var i = 0; i < len; i++) {
                      var stepItem = '<li class="eStep-item" id="eStep-item'+even+'"></li>';
                      $step.append(stepItem);
                  }
                  $this.append($step);
              }
              var createPoint = function(stepArr,event) {
                  var pointWarp = '<div class="eStep--point-warp" id="eStep--point-warp'+event+'"></div>';
                  $this.append(pointWarp);
                  var length = stepArr.length;
                  var everyStepLength = $this.width() / (length - 1);
                  var everyWidth = $this.width() / length;
                  $(stepArr).each(function(index, item) {
                      var itemHtml = ' <span class="eStep--point-item eStep--point-item'+event+'" id="eStep--point-item'+event+'">' +
                          '<i class="eStep--point">' + (index + 1) + '</i>' +
                          '<i class="eStep--text">' + item.text + '</i>' +
                          '</span>';
                      var $itemHtml = $(itemHtml);
                      $itemHtml.css({
                          'left': index * everyStepLength + 'px',
                          width: everyWidth + 'px'
                      });
                      $('#eStep--point-warp'+event).append($itemHtml);
                  })
              }
              var createProgress = function(ida) {
                  var sProgress = '<div class="eStep-progress" id="eStep-progress'+ida+'"></div>';
                  $this.append(sProgress);
              }
              createStep(stepArr.length - 1,id);
              createProgress(id);
              createPoint(stepArr,id);
          },
          setStep: function(step,id) {
              var setPoint = function() {
                  var $stepPointItem = $('.eStep--point-item'+id);
                  for (var j = 0; j < $stepPointItem.length; j++) {
                      var $point = $stepPointItem.eq(j).find('.eStep--point');
                      if (j <= step) {
                          $point.addClass('done');
                      }
                  }
              }
              setPoint();
              var $this = $(this);
              var setProgress = function(idb) {
                  var $progress = $this.find('#eStep-progress'+idb);
                  var totalWidth = $this.width();
                  var allLength = $this.find('.eStep-item').length;
                  var everyProgressLength = totalWidth / allLength;
                  if (step > allLength) {
                      step = allLength;
                  }
                  $progress.animate({
                      width: everyProgressLength * step
                  });
                  $progress.width(everyProgressLength*step);
              }
              setProgress(id);

          }
      })
  })(jQuery)

* {
    margin:0;
    padding:0;
    list-style:none;
}
.eStep-warp {
    width:600px;
    position:relative;
    margin:0 auto;
    margin-top:100px;
}
.eStep {
    display:flex;
    width:100%;
}
.eStep-item {
    flex:1;
    height:10px;
    background:#e4e4e4;
    position:relative;
}
i {
    text-decoration:none;
    font-style:normal;
    font-size:13px;
}
.eStep-progress {
    width:0;
    height:8px;
    position:absolute;
    left:0;
    top:0;
    background:#BD1D18;
}
/*进度条结束*/
        .eStep--point-warp {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:50px;
}
.eStep--point-item {
    position:absolute;
    top:-10px;
    display:block;
    height:50px;
}
.eStep--point {
    display:block;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:26px;
    height:26px;
    line-height:26px;
    color:#fff;
    text-align:center;
    position:absolute;
    top:0px;
    left:-2px;
    background:#e4e4e4;
    border:3px solid #e4e4e4;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
}
.eStep--point.done {
    width:30px;
    height:30px;
    background:#BD1D18;
    -webkit-transition:0.3s all ease;
    -moz-transition:0.3s all ease;
    -ms-transition:0.3s all ease;
    -o-transition:0.3s all ease;
    transition:0.3s all ease;
}
.eStep--point.done:hover {
    -webkit-transform:scale(1.2);
    -moz-transform:scale(1.2);
    -ms-transform:scale(1.2);
    -o-transform:scale(1.2);
    transform:scale(1.2);
}
.eStep--text {
    display:inline-block;
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
    text-align:left;
}

<div class="eStep-warp " id="step1">
        </div>
        <div class="eStep-warp " id="step2">
        </div>

<link href="${ctxStatic}/flowchart/flowchart.css?v=${fns:getDate('yyyyMMddHHmmssSSS')}" type="text/css" rel="stylesheet" />
    <script src="${ctxStatic}/flowchart/flowchart.js?v=${fns:getDate('yyyyMMddHHmmssSSS')}" type="text/javascript"></script>
    <script type="text/javascript">
      $(function() {
          $('#step1').loadStep({
              steps: [{
                  text: '申请'
              }, {
                  text: '审计'
              }, {
                  text: '线下审批'
              }, {
                  text: '授权'
              }, {
                  text: '完成'
              }]
          },'step1');
         
          
          $('#step2').loadStep({
              steps: [{
                  text: '申请1'
              }, {
                  text: '审计1'
              }, {
                  text: '线下审批1'
              }, {
                  text: '授权1'
              }, {
                  text: '完成1'
              }]
          },'step2');
          $('#step1').setStep(5,'step1');
             
          $('#step2').setStep(2,'step2');
          
      })
    </script>