//环形进度图
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

echarts实现环形进度图相关推荐

  1. echarts 实现环形进度图

    效果如图: typescript部分: import {Component, OnInit} from "@angular/core"; import {EchartsDirect ...

  2. echarts 环形进度图

    #echarts 环形进度图 #效果图 #上代码 data = [{name: '发票管理',value: 360,},{name: '纳税申报',value: 252,},{name: '综合服务' ...

  3. echarts 三环圆环_echarts实现环形进度图

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

  4. 举个栗子!Tableau 技巧(193):创建箭头环形进度图

    日常分析工作中,经常需要做进度分析.我们曾分享过不少进度分析场景的图表:标靶图(靶心图).条形图或环形图.拱形图 ARC chart 等等. 不久前,有数据粉看到一个更心仪的进度分析呈现图表(下图), ...

  5. echarts实现环形进度条

    效果图 实现代码 可直接复制运行: <!DOCTYPE html> <html><head><meta charset="UTF-8"&g ...

  6. echarts柱状图改进度图常用配置

    这是改造后的效果: 具体代码: init3() {var chartDom = document.getElementById("mountNode3");var myChart ...

  7. echarts中半圆的环形进度图形

    echarts中半圆的环形进度图形 效果如图: 一.html代码如下: <div id="pieDiagram1" style="width:330px;heigh ...

  8. 【ECharts】环形图、饼状图

    目录 color设置的颜色 环形渐变色 圆环中间显示文字 悬浮显示中间文字 悬浮显示中间文字,默认显示第一个 循环高亮饼图块 label文字过长重叠 label和饼图一致 label展示位置 内容为0 ...

  9. echarts之环形图

    echarts中环形图就是饼图,区别在于是否定义了图形内部镂空的半径而已,就像下图: 那么现在有了一个圆环,中间如果空着的话就太难看了,所以给了如下的样式: 就是要给圆环中心添加内容.如果是单纯的添加 ...

最新文章

  1. Linux下升级安装Python-2.7.8版本
  2. sklearn计算两个向量之间的距离
  3. 自制CSDN博客评论邮件提醒
  4. mysql查询语句习题._MySql数据库基本select查询语句练习题,初学者易懂。
  5. 《Java 核心技术卷1 第10版》学习笔记------ 参数数量可变的方法
  6. 利用JNative实现Java调用动态库
  7. php 接收文件 错误代码3,php上传文件错误代码3
  8. python 消息队列 get是从队首还是队尾取东西_python分布式爬虫中消息队列知识点详解...
  9. NYOJ-57 6174问题
  10. 【转载】StreamInsight系列-QueryTemplate\QueryBinder\Query
  11. DSP28335的RS232串口通讯试验
  12. 园区网解决方案有哪些 园区网解决方案案例
  13. android虚拟pdf打印机,虚拟打印机PDF
  14. 昂达 android 刷机包,系统 基于安卓4.3全新ROM_昂达平板电脑_平板电脑评测-中关村在线...
  15. linux无线usb网卡,linux usb 无线网卡
  16. Please change your current directory to a writable directory outside of the MATLAB installation area
  17. 【SIFT算法】极值检测关键点精确定位
  18. 嵌入式使用Zbar解析二维码
  19. python运行环境搭建以及常见问题解决
  20. 【Android应用开发之前端——简易App登录页面】

热门文章

  1. python语言特点强制可读-Python中文件的读写、写读和追加写读三种模式的特点
  2. 免费的乐谱MIDI编辑打印软件
  3. macOS系统中将多个png文件合成到一个icns文件
  4. 数据库卸载五部曲(适合MysqlMongoDB/Oracle)
  5. 《跟东东枪老师学文案》读后笔记
  6. Loader_装载机
  7. 东京海上北美服务有限公司(TMNAS)宣布同Akur8达成新合作以改进定价流程
  8. 微信小程序云函数服务器,微信小程序云开发(云函数) 使用got发出http、https 请求服务器数据(示例代码)...
  9. 【180623】VC++台球游戏
  10. (六)速度梯度与加速度梯度