<script src="path/to/jquery.min.js"></script>

<script src="path/to/circleChart.min.js"></script>

 <div class="circleChart cirstyle" id="1">

      <div class="pos"><p>有效线索</p><p>邀约到店率</p></div>

</div>

配置参数

 $(".circleChart#1").circleChart({

            size: 100,         // 圆形大小

            value: 80,         // 进度条占比

            color: "#EC808D",  // 进度条颜色

            backgroundColor: "#DDDADA",  // 进度条之外颜色

            startAngle: -25,

            text: true,

            background: true, // 是否显示进度条之外颜色

            speed: 2000, // 出现的时间

            widthRatio: 0.1, // 进度条宽度

            value: 66,

            unit: "percent",

            counterclockwise: false, // 进度条反方向

            startAngle: 0, // 进度条起点

            animate: true, // 进度条动画

            backgroundFix: true,

            lineCap: "round",

            animation: "easeInOutCubic",

            // text: false, // 进度条内容

            redraw: false,

            cAngle: 0,

            textCenter: true,

            // textSize: false,

            textWeight: "normal",

            textFamily: "sans-serif",

            relativeTextSize: 1 / 7, // 进度条中字体占比

            onDraw: function(el, circle) {

                circle.text(Math.round(circle.value) + "%");

            }

        });