//环形进度图 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}' });
抱歉 难得改代码哈
效果:
应用网站,也可以到网站查看具体应用效果:
相关推荐
vue3
ECharts 是一个由百度开发的开源JavaScript数据可视化库,它提供了丰富的图表类型,如柱状图、折线图、饼图、散点图等,并且支持在网页上绘制地图和自定义图形。在这个主题中,我们将深入探讨如何使用ECharts实现...
在本案例中,“环形饼状图进度条效果”指的是一个动态的、可以展示进度的环形饼状图。这种图表通常用在监控任务进度、软件加载状态或资源分配等场景,因为它们直观且吸引用户的注意力。 动态进度条是此环形饼状图的...
本篇将详细讲解如何实现一个“圆形(环形)进度条”。 首先,我们要知道在Android中,通常使用ProgressBar控件来创建进度条。然而,标准的ProgressBar是线性的,为了实现圆形或环形的效果,我们需要使用特殊的库...
内容概要: ...资源中包含的 ECharts 饼图易于集成和定制,用户可以根据自己的数据需求调整参数,实现个性化展示。同时,图表的动画效果已经预设,可以轻松地添加到现有的项目中,无需复杂的设置。
在React开发中,创建丰富的可视化元素,如圆形、方形进度条、环形图以及饼状图,对于构建具有吸引力和交互性的用户界面至关重要。本文将深入探讨如何利用React组件实现这些功能,特别是基于名为"react-super-...
"可分割的环形进度条"是这种设计理念的一个创新实现,特别适用于倒计时场景,比如等待加载、倒计时活动或者定时任务提醒等。 环形进度条通常由一个闭合的圆形路径组成,进度通过在路径上填充颜色或者改变形状来展示...
这个效果常见于加载指示器或者进度条,通过平滑的动画展示进度,让用户知道程序正在进行后台处理。 要创建这样一个渐变旋转的圆环,我们需要利用UIKit框架中的动画类库,特别是`UIView`的动画方法和`CAShapeLayer`...
这个组件可以广泛应用于进度指示、数据可视化或者作为吸引用户的交互元素。 首先,我们来看“多彩圆环”的核心概念。在iOS中,通常使用`UIView`或其子类来构建自定义视图。在这个案例中,我们可能会有一个名为`...
这种进度条以虚线(通常是短直线段)组成,随着进度的增加,这些虚线会连续填充,形成一个逐渐完整的环形图案,从而让用户直观地感知到进程的推进。 ### 1. 实现原理 `DashedCircularProgress`通常基于`Canvas`和`...
3. 饼图(pie):支持环形图,配置项包括数据、颜色、标签等。 4. 散点图(scatter):可设置数据、大小、颜色等。 5. K线图(candlestick):用于股票、期货等金融数据的可视化,包含开盘价、收盘价、最高价、最低...
综上所述,Vue动态绘制四分之三圆环图的过程包括理解弧度计算、使用Canvas的`arc`方法绘制圆环、通过`requestAnimationFrame`创建动画效果以及添加文字显示进度。在实际开发中,这些步骤可以封装成一个Vue组件,以便...
6. JavaScript库:实现带动画效果的圆形统计图,通常会利用JavaScript库,如D3.js、Chart.js、ECharts等,它们提供了丰富的图形绘制和动画功能。 7. CSS样式:为了美化动画效果,CSS可以用来定义环形图的颜色、边框...
3D立体环形百分比进度图表代码3D魔方日历行程表HTML5特效代码3个HTML5网页倒计时代码特效 3个不同风格的Calendar日历日期选择js插件I4个CSS3炫酷文字动画特效 4个jQuery手机移动端幻灯片swipeslider插件]4个很漂亮的...
TypeScript开发,应用echarts 5.5.0,vue-echarts 6.7.0,开发echarts官网关于gauge(仪表盘)内容,主要包括以下范例的实现: * Gauge Basic Chart 基础仪表盘 * Simple Gauge 简单仪表盘 * Speed Gauge 速度仪表 *...
对于动态图例,这些库通常提供了丰富的插件和API,如React的recharts和D3.js,Vue的echarts-for-vue等,可以帮助开发者更高效地构建动态图表。 5. **学习资源** 想要进一步提升JavaScript动态效果的开发能力,可以...