制作饼图问题

Question

我正在创建一个饼图，但是哪里没有变成我想要的 wanted.So 有人可以帮助我。

我想在下面做图表image.I想做一个饼图作为图像now.so有人可以正确html css和js代码

<!DOCTYPE html>
<html>

<head>
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script src="http://cdn.bootcss.com/easy-pie-chart/2.1.4/jquery.easypiechart.min.js"></script>
</head>
<style>
  .epie-chart {
    width: 150px;
    height: 150px;
    position: re;
  }
  
  .epie-chart p {
    display: inline-block;
    position: absolute;
    line-height: 24px;
    text-align: center;
    width: 114px;
    font-size: 39px;
    color: #ff6500;
  }
</style>

<body>
  <div class="epie-chart" data-percent="75">
    <p>75%</p>
  </div>
  <div class="epie-chart" data-percent="90">
    <p>90%</p>
  </div>
  <div class="epie-chart" data-percent="69">
    <p>69%</p>
  </div>
  <div class="epie-chart" data-percent="79">
    <p>79%</p>
  </div>
</body>
<script type="text/javascript">
  $(function() {
    $('.epie-chart').easyPieChart({
      easing: 'easeInOut',
      barColor: 'white',
      trackColor: 'blue',
      scaleColor: false,
      scaleLength: 5,
      lineCap: 'butt',
      lineWidth: 55,
      size: 110,
      rotate: 360,
      animate: {
        duration: 1000,
        enabled: true
      },
      onStep: function(from, to, percent) {
        $(this.el).find('.percent').text(Math.round(percent) + '%');
      }
    });
  });
</script>

</html>

但我想成为这个形象

Answer 1

你需要改变lineWidth

$(function() {
  $('.epie-chart').easyPieChart({
    easing: 'easeInOut',
    barColor: 'white',
    trackColor: 'blue',
    scaleColor: false,
    scaleLength: 5,
    lineCap: 'butt',
    lineWidth: 20,
    size: 110,
    rotate: 360,
    animate: {
      duration: 1000,
      enabled: true
    },
    onStep: function(from, to, percent) {
      $(this.el).find('.percent').text(Math.round(percent) + '%');
    }
  });
});

.epie-chart {
  width: 110px;
  height: 110px;
  display: block;
  border-radius: 50%;
  border: 2px solid #EC5F51;
  position:relative;
}
.epie-chart:before{
    content: "";
    position: absolute;
    width: 75px;
    height: 70px;
    background: white;
    z-index: 0;
    border-radius: 50%;
    left: 17px;
    top: 20px;
    line-height: 114px;
    text-align: center;
    border: 1px solid;
}
.epie-chart p {
  display: inline-block;
  position: absolute;
  line-height: 24px;
  text-align: center;
  width: 114px;
  font-size: 39px;
  color: #ff6500;
}

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.bootcss.com/easy-pie-chart/2.1.4/jquery.easypiechart.min.js"></script>
<div class="epie-chart" data-percent="75">
  <p>75%</p>
</div>
<div class="epie-chart" data-percent="90">
  <p>90%</p>
</div>
<div class="epie-chart" data-percent="69">
  <p>69%</p>
</div>
<div class="epie-chart" data-percent="79">
  <p>79%</p>
</div>

制作饼图问题

Making Pie Chart Issue

html

css

jquery

pie-chart