HTML5圆形百分比进度条插件circleChart

在页面中引入jquery和circleChart.min.js文件。

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

HTML结构

使用一个<div>元素作为该圆形百分比进度条的HTML结构：

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

初始化插件

在页面DOM元素加载完毕，可以通过circleChart()方法来初始化该圆形百分比进度条插件。

$(".circleChart#1").circleChart（{}）

配置参数

circleChart.js圆形百分比进度条插件的默认配置参数如下：

 $(".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) + "%");
            }
        });

改变 文本 百分比的位置：

 $('.circleChart#1 .circleChart_text').css({ "top": "20%" })