ProgressCircle组件

环形进度条

组件:



功能:

百分比:

代码示例:

    // 配置项
    var progcircleOpt = {
        value : 50, // 百分比
        color:'#66CCFF', // 环形填充色
        bgColor: '#EEEEEE', // 环形背景色
        showText: true, // 是否显示中间的文字,默认为true
        showPct: true, // 是否显示百分号‘%’,默认为false
        formatter: function (pct){
            if (pct > 0 && pct < 25) {
                return '#FFFFCC';
            }
            if (pct > 0 && pct < 50) {
                return '#66CCFF';
            }
            if (pct > 0 && pct < 75) {
                return '#FF9999';
            }
            if (pct > 0 && pct < 100) {
                return '#FF6633';
            }
        }, // 格式化颜色,参数固定为为百分比,返回值为颜色代码
    }

    // 初始化ProgressCircle组件
    var random = Math.random()*100;
    $("#progCircle-pct").val(random.toFixed(2));
    progcircleOpt.value = random;
    var progCircle = draw.tools.progcircle($("#progcircle-demo"),progcircleOpt);

    // 更新
    var val = $("#progCircle-pct").val();
    progCircle.progcircle('update',val);

    // 递增
    var opt2 = {
        start:5, // 起始百分比
        end:97,  // 终止百分比
        speed:3  // 速度,每0.05秒递增多少,最小1,最大10
    }
    progCircle.progcircle('progress',opt2);

    // 递减
    var opt3 = {
        start:100, // 起始百分比
        end:0,  // 终止百分比
        speed:4  // 速度,每0.05秒递增多少,最小1,最大10
    }
    progCircle.progcircle('progress',opt3);