接上一篇中记录Echarts进度环使用【不同状态不同进度环颜色及圈内文字】--采用单实例业务进行说明
接上一篇中记录Echarts进度环使用
此处处理不同状态下不同进度环颜色及圈内文字等的相关处理,采用实际案例源码说明
-----------------偶是华丽丽分割线---------------------------------------------------
形如实现这样-等等的效果 示例如图:
业务上此处拿一个有期限任务实例举例说明
业务简要说明:
【任务按时间 可分为 未开始--进行中--已结束 3大状态//其中已开始任务中任务状态又需要根据完成情况(提交与否)显示对应圈内文字】
核心地方如图已标出
接下来我们可以自定义这两处加入业务判断处理,从而实现不同状态下 展示不同 环形颜色文字等颜色等
//
///接下来贴出 简单实例的相关demo
说明:代码中部分业务数据未给出;
主要说明下实现方式
//渲染环形进度条
function RenderNut(startnum, listlength) {
// 路径配置
require.config({
paths: {
echarts: '../../Common/echarts/build/dist'
}
}); // 使用
require(
[
'echarts',
'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载
],
function (ec) { //
var labelTop0 = {//作答中,颜色为green
normal: {
color: 'green',
label: {
show: true,//标签是否显示
position: 'center',//饼图可选为:'outer'(外部) | 'inner'(内部)/饼图可选为:'outer'(外部) | 'inner'(内部)
formatter: '{b}',//饼图、雷达图、仪表盘、漏斗图: a(系列名称),b(数据项名称),c(数值), d(饼图:百分比 | 雷达图:指标名称)
textStyle: {
baseline: 'bottom',
color: 'green'
}
},
labelLine: {
show: false
}
}
};
var labelTop1 = {//已提交,颜色为#fb8800
normal: {
color: '#fb8800',
label: {
show: true,
position: 'center',
formatter: '{b}',
textStyle: {
baseline: 'bottom',
color: '#fb8800'
}
},
labelLine: {
show: false
}
}
};
var labelTop2 = {//未开始/已结束状态下,颜色为gray
normal: {
color: 'gray',
label: {
show: true,//标签是否显示
position: 'center',
formatter: '{b}',
textStyle: {
baseline: 'bottom',
color: 'Gray'
}
},
labelLine: {
show: false
}
}
};
//---------------------------------------------------
var labelFromatter0 = { //XXX状态下,颜色为绿色
normal: {
label: {
//函数中会读取 option中 data中数据进行计算
formatter: function (params) {
return (params.series.data[0].value * 100 / (params.series.data[0].value + params.series.data[1].value)).toFixed(0) + '%'
},
textStyle: {
baseline: 'top',
color: 'green'
}
}
}
};
var labelFromatter1 = {//XX状态下,颜色为#fb8800
normal: {
label: {
formatter: function (params) {
return (params.series.data[0].value * 100 / (params.series.data[0].value + params.series.data[1].value)).toFixed(0) + '%'
},
textStyle: {
baseline: 'top',
color: '#FB8800'
}
}
}
};
var labelFromatter2 = {//XX状态下,颜色为gray
normal: {
label: {
formatter: function (params) {
return (params.series.data[0].value * 100 / (params.series.data[0].value + params.series.data[1].value)).toFixed(0) + '%'
},
textStyle: {
baseline: 'top',
color: 'Gray'
}
}
}
};
var labelBottom = {
normal: {
color: '#ccc',
label: {
show: true,
position: 'center'
},
labelLine: {
show: false
}
},
emphasis: {
color: 'rgba(0,0,0,0)'
}
};
// 基于准备好的dom,初始化echarts图表
// for (var i = startnum; i < listlength; i++) {
// 可以是一个或者多个--根据实际应用动态绑定ID
var myChart = ec.init(document.getElementById("Html中给定的Dom节点ID"); // 从接口读出的 任务属性数据
// 任务期限【开始时间 startTime //结束时间 endTime // 服务器当前时间: TimeNow】
// 任务完成状态【提交标志 submitFlag】此处submitFlag 1为已提交(具体业务按实际处理)
// 此处测试需要 可给的假数据 var numarr = new Array();//用于存放 进度环展示数据【numarr[0]分子代表已完成XX//numarr[1]分母 代表总数】 //根据按作业期限分类处理
if (Math.round((new Date(startTime || '').getTime()) / 1000) - Math.round((new Date(TimeNow).getTime()) / 1000) > 0) {
//未开始作业,颜色变为灰色
numarr[0] = 0;
numarr[1] = totalnum;
showname = "未开始";
labelTop = labelTop2;
labelFromatter = labelFromatter2;
}
else if (Math.round((new Date(endTime || '').getTime()) / 1000) - Math.round((new Date(TimeNow).getTime()) / 1000) <= 0) {
//已结束作业显示进度环/灰色
if (submitFlag == 1) {//已提交
numarr[0] = donum;
numarr[1] = totalnum;
showname = "已提交";
}
else {
numarr[0] = donum;
numarr[1] = totalnum;
showname = "已作答";
}
}
labelTop = labelTop2;
labelFromatter = labelFromatter2;
}
else {
//期限内根据提交状态
if (submitFlag == 1) {//已提交
numarr[0] = donum;
numarr[1] = totalnum;
showname = "已提交";
labelTop = labelTop1;
labelFromatter = labelFromatter1;
}
else {
numarr[0] = donum;
numarr[1] = totalnum;
showname = "已作答";
labelFromatter = labelFromatter0;
labelTop = labelTop0;
} }
var option = {
tooltip: {
show: false
},
series: [
{
"center": ['50%', '50%'],
"type": "pie",
"radius": [40, 45],
"itemStyle": labelFromatter,
"clockWise": true,//是否顺时针
"selectedMode": null,//选中模式,默认关闭,可选single,multiple
"data": [
{
name: showname, value: parseInt(numarr[0]), itemStyle: labelTop
},
{ name: '未作答', value: parseInt(numarr[1]) - parseInt(numarr[0]), itemStyle: labelBottom }
]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
// }
}
);
}
接上一篇中记录Echarts进度环使用【不同状态不同进度环颜色及圈内文字】--采用单实例业务进行说明的更多相关文章
- 完善ext.grid.panel中的查询功能(紧接上一篇)
今天的代码主要是实现,Ext.grid.panel中的查询,其实我也是一名extjs新手,开始想的实现方式是另外再创建一个新的grid类来存放查询出的数据(就是有几个分类查询就创建几个grid类),这 ...
- Java进阶篇设计模式之十二 ---- 备忘录模式和状态模式
前言 在上一篇中我们学习了行为型模式的策略模式(Strategy Pattern)和模板模式(Template Pattern).本篇则来学习下行为型模式的两个模式,备忘录模式(Memento Pat ...
- 【接上一篇】winform中dataGridView高度和宽度自适应填充完数据的高度和宽度,即dataGridView根据数据自适应大小
上一篇:winform中dataGridView高度自适应填充完数据的高度 winform中dataGridView高度自适应填充完数据的高度,就是dataGridView自身不产生滚动条,自己的高度 ...
- FORM实现中打开图片,链接,文档(参考自itpub上一篇帖子,整理而来)
FORM实现中打开图片,链接,文档 参考自itpub上一篇帖子,整理而来 1.添加PL程序库D2kwutil.pll 2.主要实现程序 /*过程参数说明: v_application --打开文件的应 ...
- Spring整合Struts2框架的第一种方式(Action由Struts2框架来创建)。在我的上一篇博文中介绍的通过web工厂的方式获取servcie的方法因为太麻烦,所以开发的时候不会使用。
1. spring整合struts的基本操作见我的上一篇博文:https://www.cnblogs.com/wyhluckdog/p/10140588.html,这里面将spring与struts2 ...
- thinkPHP中的文章详情页实现“上一篇下一篇”功能经验分享
前段时间在公司中接触到了用thinkPHP搭建的项目,其中涉及到了文章详情页上一篇下一篇翻页的功能实现效果. 因为刚接触这套框架和PHP,所以整理一下实现该功能的经验方法. 如果有不到位的地方,欢迎指 ...
- 接上一篇:vue零基础入门记录
上一篇的vue项目已经搭建运行了起来,我用惯了idea这里也用的idea打开的项目.貌似其他软件写前端更好. 打开项目的项目路径是这样的 写惯了后台,第一眼看的时候感觉这个项目路径很乱,后面才知道我们 ...
- Thinkphp 3.2中文章详情页的上一篇 下一篇文章功能
额 简单2句话解释下 获取上一篇文章的原理,其实就是以当前文章的id为起点进行进行查询,例如id=5的文章 select * from article where (article_id<5 ...
- 记录下vue 中引用echarts 出现 "TypeError: Cannot read property 'getAttribute' of undefined"问题
今天做项目,用echarts展示数据 ,自己测试 先测试 了下.写的代码html: <div ref="myChart" style="height:300px;w ...
随机推荐
- MCMC(一)蒙特卡罗方法
MCMC(一)蒙特卡罗方法 MCMC(二)马尔科夫链(待填坑) MCMC(三)M-H采样和Gibbs采样(待填坑) 作为一种随机采样方法,马尔科夫链蒙特卡罗(Markov Chain Monte Ca ...
- python 、mmap 实现内存数据共享
import mmap mmap_file = None ##从内存中读取信息, def read_mmap_info(): global mmap_file mmap_file.seek(0) ## ...
- linux最常用命令
1,cd命令 作用:切换当前目录,它的参数切换的路劲,可以是相对路劲,也可以是绝对路劲. 用法: cd /root/Docements #切换当/root/Docements,绝对路劲 cd ./ ...
- xml转义符
今天在看项目的UrlRewriteFilter(动态url静态化,有利于搜索引擎搜索)的配置文件urlrewrite.xml时,看到了“&”字符,查询之后才知道xml文件中的转义比html中的 ...
- 反射实现 Data To Model
调用 : public ActionResult Index() { DataTable dt = new DataTable(); dt.Columns.Add("Name"); ...
- C语言常见错误笔记
1. 职业化的程序员起码要具备两点: 1)基本的软件技能 2)不犯低级的错误 2. 修改函数的形参是没用的,函数本身占用的存储单元在堆栈中分配,入口参数的值会在函数入口处拷贝到堆栈中,一旦函数返回,其 ...
- Ubuntu离线安装Sogou拼音(附老版本安装&输入法自启动)
跨平台系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#linux 离线安装的基础可以看看这篇文章的 前期准备工作 http://www.cnbl ...
- C++中的类继承(1) 三种继承方式
继承是使代码可以复用的重要手段,也是面向对象程序设计的核心思想之一.简单的说,继承是指一个对象直接使用另一对象的属性和方法.继承呈现了 面向对象程序设 计的层次结构, 体现了 由简单到复杂的认知过程. ...
- 原生态JS实现banner图的常用所有功能
虽然,用jQuery实现banner图的各种效果十分简单快捷,但是我今天用css+js代码实现了几个banner图的常用功能,效果还不错. 此次,主要想实现以下功能: 1. banner图循环不间断切 ...
- 利用 Forcing InnoDB Recovery 特性解决 MySQL 重启失败的问题
小明同学在本机上安装了 MySQL 5.7.17 配合项目进行开发,并且已经有了一部分重要数据.某天小明在开发的时候,需要出去一趟就直接把电脑关掉了,没有让 MySQL 正常关闭,重启 MySQL 的 ...