进度条circleChart插件使用

1,需要引入文件

2,html需要写以下内容

3,js文件需要写以下内容

$(".circleChart").circleChart({
    color: "#E48516",
    startAngle: 40,
    text: true,
    animation: "easeInOutCubic",
    backgroundColor: "#384E78", // 进度条之外颜色
    background: true, // 是否显示进度条之外颜色
    speed: 1000, // 出现的时间
    widthRatio: 0.4, // 进度条宽度
    value: 56,  // 进度条占比
    unit: "percent",
    counterclockwise: false, // 进度条反方向
    size: 135, // 圆形大小
    animate: true, // 进度条动画
    backgroundFix: true,
    lineCap: "round",
    redraw: false,
    cAngle: 0,
    textCenter: true,
    textSize: false,
    textWeight: "normal",
    textFamily: "sans-serif",
    relativeTextSize: 1 / 7, // 进度条中字体占比
    autoCss: true,
    onDraw: function(el, circle) {
        circle.text(Math.round(circle.value) + "%"); // 根据value修改text
    }
});

4,结果如图

进度条circleChart插件使用_第1张图片

你可能感兴趣的:(css,js)