Echarts环形进度使用 【1 简单的使用示例】
使用中说明几点属性:
hoverAnimation:false,//此处查了好久属性//控制鼠标放置在环上时候的交互
//
这里一个简单的示例使用Echarts 环形图使用方式//常用于统计完成进度等等 function RenderNut(res, UserType) { //数据处理
var donum = parseFloat(res.TaskProgress); //已完成百分比
var data = donum + '%';
var rest = 100 - donum;
// 基于准备好的dom,初始化echarts图表
//此处因为任务有多条-需要对应渲染不同任务的数据统计/所以一次绑定
var myChart = echarts.init(document.getElementById('rate' + res.TaskBatchID)); var option = {
series: [{
name: '访问来源',
type: 'pie',
radius: ['60%', '75%'],//这里是控制环形内半径和外半径
avoidLabelOverlap: false,
hoverAnimation:false,//此处查了好久属性//控制鼠标放置在环上时候的交互
label: {
normal: {
show: true,
position: 'center',
textStyle: {
fontSize: '16',
fontWeight: 'bold'
}
}
},
data: [{
value: data,
name: data
}, {
value: rest,
name: ''
}
]
}],
color: ['#339900', '#C9C9C9']
};
// 为echarts对象加载数据
myChart.setOption(option);
}
后面文章中会在总结一篇,采用实际开发中的一个示例(稍微复杂点)
根据不同任务状态渲染加载不同环颜色及圈内显示不同文字的实现方式//
Echarts环形进度使用 【1 简单的使用示例】的更多相关文章
- 图解CSS3制作圆环形进度条的实例教程
圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...
- iOS 开发技巧-制作环形进度条
有几篇博客写到了怎么实现环形进度条,大多是使用Core Graph来实现,实现比较麻烦且效率略低,只是一个小小的进度条而已,我们当然是用最简单而且效率高的方式来实现. 先看一下这篇博客,博客地址:ht ...
- iOS一分钟学会环形进度条
有几篇博客写到了怎么实现环形进度条,大多是使用Core Graph来实现,实现比较麻烦且效率略低,只是一个小小的进度条而已,我们当然是用最简单而且效率高的方式来实现.先看一下这篇博客,博客地址:htt ...
- 环形进度条的实现方法总结和动态时钟绘制(CSS3、SVG、Canvas)
缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...
- ECharts 环形饼图 动态获取json数据
ECharts 环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100 ...
- Android简易实战教程--第十七话《自定义彩色环形进度条》
转载请注明出处:http://blog.csdn.net/qq_32059827/article/details/52203533 点击打开链接 在Android初级教程里面,介绍了shape用法 ...
- 【CSS】环形进度条
效果图 原理剖析 1.先完成这样一个半圆(这个很简单吧) 2.overflow: hidden; 3.在中间定位一个白色的圆形做遮挡 4.完成另一半 5.使用animate配合时间完成衔接 源码 &l ...
- 仿MIUI音量变化环形进度条实现
Android中使用环形进度条的业务场景事实上蛮多的,比方下载文件的时候使用环形进度条.会给用户眼前一亮的感觉:再比方我大爱的MIUI系统,它的音量进度条就是使用环形进度条,尽显小米"为发烧 ...
- 【css】如何实现环形进度条
最近团队的童鞋接到了一个有关环形进度条的需求,想要还原一个native的沿环轨迹渐变进度条的效果,看到这个效果的时候,笔者陷入了沉思.. 环形进度条的效果,最先想到的就是使用CSS利用两个半圆的hac ...
随机推荐
- CSS与HTML5响应式图片
随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变 ...
- linux—粘滞位的设置
粘滞位(Stickybit),或粘着位,是Unix文件系统权限的一个旗标.最常见的用法在目录上设置粘滞位,如此以来,只有目录内文件的所有者或者root才可以删除或移动该文件.如果不为目录设置粘滞位,任 ...
- response.setHeader("Content-disposition","attachment;filename="+fileName) 下载时文件名中存在空格错误
最近在进行文件下载时发现一个问题,就是下面语句运行时,下载某些文件正常,下载某些文件异常,后来发现文件名中有空格的文件火狐浏览器是默认将文件名截断了的 response.setHeader(" ...
- Java中一个方法只被一个线程调用一次
1.想在运行时抛出异常,终止方法的运行 private final Set<Long> THREADS = new HashSet<>(); public void someM ...
- Android通过AOP实现防止按钮连续点击
防止连续点击的实现方式有很多种,比如,在所有的onclick里面加上防多次点击的代码,或者定义一个新的OnClickListener,在里面加上防多次点击的代码,然后项目中的所有OnClickList ...
- GPU加速有坑?
大多数人都知道有动画的地方可以使用GPU来加速页面渲染. 例如,做优化的时候,将使用left和top属性的动画修改成使用transform属性的CSS动画.或者听到别人教你使用transform:tr ...
- .NET遇上Docker - Harbor的安装与基本使用
Harbor是一个开源企业级Docker注册中心,可以用于搭建私有的Docker Image仓库.可以实现权限控制等. 安装Harbor 首先,需要安装Docker和Docker Compose,参考 ...
- jquery如何设置html众标签中的值
$("img").attr("src",some_url);//jquery设置img标签中的src值 $("#user").val(&qu ...
- Jquery对select下拉框的操作
一.jQuery获取Select选择的Text和Value:语法解释: $("#select_id").change(function(){//code...}); //为Se ...
- KEIL中逻辑分析仪的使用
本学期开了门嵌入式的课程,在实验课上用到了一款基于ARM Cortex-M3处理器的LPC1768的实验板.本来这种课程我觉得应该可以学到很多东西,可是我发现实验课上老师基本只是讲了xx实验课的要求, ...