<div class="content">
   <div class="chart"></div>
 </div>

html,body{
  position:relative;
  width:100%;
  height:100%;
  background:#efefef;
}
.content{
  position:absolute;
  left:50%;
  top:50%;
  width:50%;
  height:50%;
  transform: translate(-50%, -50%);
  margin:auto;
  background: #fff;
}
.chart{
  position: relative;
  border:1px solid #000;
  width: 100%;
  height: 100%;
}
.dot{
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333;
  i{
    position: relative;
    top: -8px;
    left: 7px;
    display: inline-block;
    background: #000;
    height: 1px;
    transform-origin: 0% 0%;
  }
}

const json = [30,65,80,50];
let $chart = $('.chart'),
    $dot,
    // 算斜線角度
    gatTanDeg = function(y,x) {
      let result = Math.atan2(y,x) / (Math.PI / 180);
      result = parseFloat(result);
      return result;
    },
    init = function(){
      let len = json.length;
      json.map(function( e,i ){
        let nowX = (100 / len) * i,
            nextX = (100 / len) * (i+1),
            currectX = (nowX + nextX) / 2;

        $chart.append(`<div class="dot" style="left:${ currectX }%;bottom:${ e }%;"></div>`);
      });

      $dot = $chart.find('.dot');

      $dot.each(function( i,e ){
        let $nextDot = $dot[i+1];
        if( !$nextDot ){ return }

        let x1 = parseFloat($(e).css('left')),
            y1 = parseFloat($(e).css('bottom')),
            x2 = parseFloat($($nextDot).css('left')),
            y2 = parseFloat($($nextDot).css('bottom')),
            distance = Math.hypot( (x1 - x2),(y1 - y2) ),
            radius = gatTanDeg( (y1 - y2),(x1 - x2) );
        $(e).append(`<i style="width:${ distance }px;transform: rotate( ${-radius - 180}deg )" ></i>`); 
      })
    };

init()