在页面中引入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%" })