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
echarts实现环形进度图相关推荐
- echarts 实现环形进度图
效果如图: typescript部分: import {Component, OnInit} from "@angular/core"; import {EchartsDirect ...
- echarts 环形进度图
#echarts 环形进度图 #效果图 #上代码 data = [{name: '发票管理',value: 360,},{name: '纳税申报',value: 252,},{name: '综合服务' ...
- echarts 三环圆环_echarts实现环形进度图
//环形进度图 TgsChartsUtil.drawCircleLoadingChart = function(cfg){ var myChart = TgsChartsUtil.getChart(c ...
- 举个栗子!Tableau 技巧(193):创建箭头环形进度图
日常分析工作中,经常需要做进度分析.我们曾分享过不少进度分析场景的图表:标靶图(靶心图).条形图或环形图.拱形图 ARC chart 等等. 不久前,有数据粉看到一个更心仪的进度分析呈现图表(下图), ...
- echarts实现环形进度条
效果图 实现代码 可直接复制运行: <!DOCTYPE html> <html><head><meta charset="UTF-8"&g ...
- echarts柱状图改进度图常用配置
这是改造后的效果: 具体代码: init3() {var chartDom = document.getElementById("mountNode3");var myChart ...
- echarts中半圆的环形进度图形
echarts中半圆的环形进度图形 效果如图: 一.html代码如下: <div id="pieDiagram1" style="width:330px;heigh ...
- 【ECharts】环形图、饼状图
目录 color设置的颜色 环形渐变色 圆环中间显示文字 悬浮显示中间文字 悬浮显示中间文字,默认显示第一个 循环高亮饼图块 label文字过长重叠 label和饼图一致 label展示位置 内容为0 ...
- echarts之环形图
echarts中环形图就是饼图,区别在于是否定义了图形内部镂空的半径而已,就像下图: 那么现在有了一个圆环,中间如果空着的话就太难看了,所以给了如下的样式: 就是要给圆环中心添加内容.如果是单纯的添加 ...
最新文章
- Linux下升级安装Python-2.7.8版本
- sklearn计算两个向量之间的距离
- 自制CSDN博客评论邮件提醒
- mysql查询语句习题._MySql数据库基本select查询语句练习题,初学者易懂。
- 《Java 核心技术卷1 第10版》学习笔记------ 参数数量可变的方法
- 利用JNative实现Java调用动态库
- php 接收文件 错误代码3,php上传文件错误代码3
- python 消息队列 get是从队首还是队尾取东西_python分布式爬虫中消息队列知识点详解...
- NYOJ-57 6174问题
- 【转载】StreamInsight系列-QueryTemplate\QueryBinder\Query
- DSP28335的RS232串口通讯试验
- 园区网解决方案有哪些 园区网解决方案案例
- android虚拟pdf打印机,虚拟打印机PDF
- 昂达 android 刷机包,系统 基于安卓4.3全新ROM_昂达平板电脑_平板电脑评测-中关村在线...
- linux无线usb网卡,linux usb 无线网卡
- Please change your current directory to a writable directory outside of the MATLAB installation area
- 【SIFT算法】极值检测关键点精确定位
- 嵌入式使用Zbar解析二维码
- python运行环境搭建以及常见问题解决
- 【Android应用开发之前端——简易App登录页面】
热门文章
- python语言特点强制可读-Python中文件的读写、写读和追加写读三种模式的特点
- 免费的乐谱MIDI编辑打印软件
- macOS系统中将多个png文件合成到一个icns文件
- 数据库卸载五部曲(适合MysqlMongoDB/Oracle)
- 《跟东东枪老师学文案》读后笔记
- Loader_装载机
- 东京海上北美服务有限公司(TMNAS)宣布同Akur8达成新合作以改进定价流程
- 微信小程序云函数服务器,微信小程序云开发(云函数) 使用got发出http、https 请求服务器数据(示例代码)...
- 【180623】VC++台球游戏
- (六)速度梯度与加速度梯度