echarts实现环形进度图

//环形进度图
TgsChartsUtil.drawCircleLoadingChart = function(cfg){
    var myChart = TgsChartsUtil.getChart(cfg);

    if(!TgsChartsUtil.isPageLoad()){
        cfg.chartType = "circleLoading";
        TgsChartsUtil.configs.push(cfg);
        TgsChartsUtil.showLoading(myChart, null, 12, TgsChartsUtil.loaddingEffects[3],8);
        return;
    }

    var colorStyleProps = TgsChartsUtil.props['circleLoading']['colorStyle'];
    var colorStyle = null;
    if(cfg.colorStyleByTradeStatus != undefined){
        colorStyle = colorStyleProps[(cfg.colorStyleByTradeStatus=='invest'?'orange':((cfg.colorStyleByTradeStatus=='oping') ? 'blue' : 'gray'))];
    }else if(cfg.colorStyle){
        colorStyle = colorStyleProps[cfg.colorStyle];
    }
    if(!colorStyle){
        colorStyle = colorStyleProps['blue'];
    }

    if(!cfg.width){
        cfg.width = 160;
    }

    var otherStyle = {
        normal : {
            color : colorStyle['otherColor'],
            label : {
                show : false
                //,
                //position : 'center',
                //formatter : '{b}',
                //textStyle: {
                //    baseline : 'bottom'
                //}
            },
            labelLine : {
                show : false
            }
        }
    };

    var valueStyle = {
        normal : {
            color: colorStyle['valueColor'],
            label : {
                show : true,
                position : 'center',
                textStyle: {
                    color : colorStyle['valueColor'],
                    fontSize : cfg.fontSize || 10
                }
            },
            labelLine : {
                show : false
            }
        },
        emphasis: {
            color: colorStyle['valueColor']
        }
    };

    var divisor = cfg.divisor; //除数
    var dividend = cfg.dividend;//被除数
    if(divisor != undefined && dividend != undefined && divisor != 0){
        cfg.data = parseFloat(dividend || 0) / parseFloat(divisor) * 100;
    } else if(cfg.data == undefined || cfg.data == null){
        cfg.data = 0;
    }
    var dv = cfg.data > 100 ? 100 : cfg.data;
    var option = {

        //title : {
        //    text: 'The App World',
        //    subtext: 'from global web index',
        //    x: 'center'
        //},
        toolbox: {
            show : false
        },
        series : [
            {
                type : 'pie',
                center : ['50%', '50%'],
                radius : [cfg.width/2.7, cfg.width/2.16],
                itemGap: 10,
                x: 'center',
                y: 'center',
                data : [
                    {name:Math.floor(cfg.data)+'%', value : dv, itemStyle : valueStyle},
                    {name:'', value : (100 - dv),itemStyle : otherStyle}
                ]
            }
        ]
    };
    myChart.hideLoading();
    myChart.setOption(option);
};

简单调用：

 

TgsChartsUtil.drawCircleLoadingChart({
domId : "loadChart_$!prj.projectId", 
width:54, 
colorStyleByTradeStatus : '$!{prj.prjectStatus}',
dividend : '$!{prj.amount}', 
divisor:'$!{prj.minAmount}'
});

 

抱歉 难得改代码哈

效果：

 

 

 

应用网站,也可以到网站查看具体应用效果：

淘股神 http://www.taogushen.com

评论

1 楼 zhouxi 2015-03-25  

有没有完整的代码做参考啊 那个网站必须注册，而且注册还需要邀请码  看不到效果 谢谢