//环形进度图 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}' });
抱歉 难得改代码哈
效果:
应用网站,也可以到网站查看具体应用效果: