`

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

  • 大小: 232.8 KB
  • 大小: 59.8 KB
2
0
分享到:
评论
1 楼 zhouxi 2015-03-25  
有没有完整的代码做参考啊 那个网站必须注册,而且注册还需要邀请码  看不到效果 谢谢

相关推荐

    vue3半圆进度条,基于echarts仪表盘改造半环形进度图,扇形饼状图实现

    vue3

    echarts实现地图以及半圆图表

    ECharts 是一个由百度开发的开源JavaScript数据可视化库,它提供了丰富的图表类型,如柱状图、折线图、饼图、散点图等,并且支持在网页上绘制地图和自定义图形。在这个主题中,我们将深入探讨如何使用ECharts实现...

    环形饼状图进度条效果

    在本案例中,“环形饼状图进度条效果”指的是一个动态的、可以展示进度的环形饼状图。这种图表通常用在监控任务进度、软件加载状态或资源分配等场景,因为它们直观且吸引用户的注意力。 动态进度条是此环形饼状图的...

    圆形(环形)进度条

    本篇将详细讲解如何实现一个“圆形(环形)进度条”。 首先,我们要知道在Android中,通常使用ProgressBar控件来创建进度条。然而,标准的ProgressBar是线性的,为了实现圆形或环形的效果,我们需要使用特殊的库...

    Echarts饼图-今日进度-动态图.rar

    内容概要: ...资源中包含的 ECharts 饼图易于集成和定制,用户可以根据自己的数据需求调整参数,实现个性化展示。同时,图表的动画效果已经预设,可以轻松地添加到现有的项目中,无需复杂的设置。

    react-react组件用于各种圆形方形进度条环形图饼状图等

    在React开发中,创建丰富的可视化元素,如圆形、方形进度条、环形图以及饼状图,对于构建具有吸引力和交互性的用户界面至关重要。本文将深入探讨如何利用React组件实现这些功能,特别是基于名为"react-super-...

    可分割的环形进度条

    "可分割的环形进度条"是这种设计理念的一个创新实现,特别适用于倒计时场景,比如等待加载、倒计时活动或者定时任务提醒等。 环形进度条通常由一个闭合的圆形路径组成,进度通过在路径上填充颜色或者改变形状来展示...

    一个渐变旋转的圆环

    这个效果常见于加载指示器或者进度条,通过平滑的动画展示进度,让用户知道程序正在进行后台处理。 要创建这样一个渐变旋转的圆环,我们需要利用UIKit框架中的动画类库,特别是`UIView`的动画方法和`CAShapeLayer`...

    关于一个多彩圆环,内外双环。

    这个组件可以广泛应用于进度指示、数据可视化或者作为吸引用户的交互元素。 首先,我们来看“多彩圆环”的核心概念。在iOS中,通常使用`UIView`或其子类来构建自定义视图。在这个案例中,我们可能会有一个名为`...

    DashedCircularProgress环形虚线进度条

    这种进度条以虚线(通常是短直线段)组成,随着进度的增加,这些虚线会连续填充,形成一个逐渐完整的环形图案,从而让用户直观地感知到进程的推进。 ### 1. 实现原理 `DashedCircularProgress`通常基于`Canvas`和`...

    报表技术-图形报表-Echarts(含代码、文档).zip

    3. 饼图(pie):支持环形图,配置项包括数据、颜色、标签等。 4. 散点图(scatter):可设置数据、大小、颜色等。 5. K线图(candlestick):用于股票、期货等金融数据的可视化,包含开盘价、收盘价、最高价、最低...

    vue动态绘制四分之三圆环图效果

    综上所述,Vue动态绘制四分之三圆环图的过程包括理解弧度计算、使用Canvas的`arc`方法绘制圆环、通过`requestAnimationFrame`创建动画效果以及添加文字显示进度。在实际开发中,这些步骤可以封装成一个Vue组件,以便...

    带动画效果的圆形统计图

    6. JavaScript库:实现带动画效果的圆形统计图,通常会利用JavaScript库,如D3.js、Chart.js、ECharts等,它们提供了丰富的图形绘制和动画功能。 7. CSS样式:为了美化动画效果,CSS可以用来定义环形图的颜色、边框...

    08-最新HTML5+CSS3+JavaScript实用案例大全(2181例).rar

    3D立体环形百分比进度图表代码3D魔方日历行程表HTML5特效代码3个HTML5网页倒计时代码特效 3个不同风格的Calendar日历日期选择js插件I4个CSS3炫酷文字动画特效 4个jQuery手机移动端幻灯片swipeslider插件]4个很漂亮的...

    vue3 typescript gauge仪表盘效果示例

    TypeScript开发,应用echarts 5.5.0,vue-echarts 6.7.0,开发echarts官网关于gauge(仪表盘)内容,主要包括以下范例的实现: * Gauge Basic Chart 基础仪表盘 * Simple Gauge 简单仪表盘 * Speed Gauge 速度仪表 *...

    JS动态图例代码

    对于动态图例,这些库通常提供了丰富的插件和API,如React的recharts和D3.js,Vue的echarts-for-vue等,可以帮助开发者更高效地构建动态图表。 5. **学习资源** 想要进一步提升JavaScript动态效果的开发能力,可以...

Global site tag (gtag.js) - Google Analytics