echarts配置进度池
近日,使用dataV中的配置,完成了进度池图表,但是有有一个缺点,就是官方没有动画方面的配置。如下图:

为了给这个进度池添加动画效果,我反向的在进度池上面铺一层由一格一格与进度池中相同的块状组成的与背景相同的格子,然后每一秒影藏一格格子,以达到进度格子一格一格显示出来的效果,同时用定时器设置每6秒重复一次。
由于当时没有做太多关于分辨率的兼容,以致于切换都某些分辨率较低的电脑屏幕上时,露馅了。
所以,就开始我后面的探索。。。。。
无意间发现一个echarts的附带网站,叫做Echarts Gallery,里面有比官方实例更加多样化的实例,而且免费!
浏览了很久,终于找了两个与需求相似的进度池!
copy下来之后,一番修改,发现其实官方是有专门的属性可以直接配置,达到将条形统计图变成这样一格一格的进度池模样的,如下图圈红的部分,实质就是将条形图中的柱子设置成一小格(这里可以是rect方形,也可以是圆的的,设置symbol即可),然后copy这个symbol即可,超级简单实用!

效果如下:

再加上官方的动画配置,就完美解决了之前的问题了!
echarts配置进度池的更多相关文章
- 在Tomcat里使用配置连接池连接数据库
一:首先在Tomcat下的conf/context.xml文件里的contenx标签里配置数据源: <Resource name="jdbc/zzz" auth=" ...
- 转!数据库连接池概念、种类、配置(DBCP\C3P0\JndI与Tomact配置连接池)
数据库连接池概念.种类.配置(DBCP\C3P0\JndI与Tomact配置连接池) 一.DBCP 连接:DBCP 连接池是 Apache 软件基金组织下的一个开源连接池实现. 需要的 java 包c ...
- java配置数据库连接池的方法步骤
java配置数据库连接池的方法步骤 java配置数据库连接池的方法步骤,需要的朋友可以参考一下 先来了解下什么是数据库连接池数据库连接池技术的思想非常简单,将数据库连接作为对象存储在一个Vecto ...
- Tomcat上配置连接池{ connect error=Name [jdbc/OracleDB] is not bound in this Context. Unable to find [jdbc]}
. 在学习期间,从未实践过在tomcat上配置连接池,今天终于实现一次,在tomcat玩了一把,不知道你是否现在有和我一样的困境.废话少说直接上代码 java public static Con ...
- WebSphere配置数据库连接池
通过WebSphere配置数据库连接池一共需要三项: 1.配置连接驱动,在这里叫:JDBC提供程序; 2.配置数据库连接池,在这里叫:配置数据源; 3.配置数据库登录帐号,密码,在这里 ...
- 配置数据库连接池,Tomcat6.0 连接池的配置
Tomcat6.0 连接池的配置1.本人当前使用的Tomcat版本为:6.0.20,oracle为稳定的9i版本 2.下文为方便起见,依习惯以%Tomcat_Home%表示Tomcat安装的目录,本人 ...
- springboot2.0配置连接池(hikari、druid)
springboot2.0配置连接池(hikari.druid) 原文链接:https://www.cnblogs.com/blog5277/p/10660689.html 原文作者:博客园--曲高终 ...
- 项目重构之数据源配置与优化:log4j 配置数据库连接池Druid,并实现日志存储到数据库
作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节. 交流QQ群:[编程之美 365234583] ...
- SpringBoot学习(三)-->Spring的Java配置方式之读取外部的资源配置文件并配置数据库连接池
三.读取外部的资源配置文件并配置数据库连接池 1.读取外部的资源配置文件 通过@PropertySource可以指定读取的配置文件,通过@Value注解获取值,具体用法: @Configuration ...
随机推荐
- 个人项目wc(C语言)
github地址:https://github.com/nilonger/mycangku 一.项目要求 1.wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要求写一个 ...
- Vue的Options
el:挂载点 与$mount有替换关系 new Vue({ el: "#app" }); new Vue({}).$mount('#app') 注:被你选为挂载点的那个元素,如果在 ...
- ASP.NET Core3.1使用IdentityServer4中间件系列随笔(三):创建使用[ClientCredentials客户端凭证]授权模式的客户端
配套源码:https://gitee.com/jardeng/IdentitySolution 上一篇<ASP.NET Core3.1使用IdentityServer4中间件系列随笔(二):创建 ...
- 树链剖分详解&题解 P6098 【[USACO19FEB]Cow Land G】
看到各位大佬们已经把其他的东西讲的很明白了,我这个 juruo 就讲一讲最基本的树链剖分吧. 0.树剖是什么?能吃吗? 不能吃 树剖是树链剖分的简称,我们一般说的树剖其实指重链剖分.当然,还有一种长链 ...
- openCV - 5~7 图像混合、调整图像亮度与对比度、绘制形状与文字
5. 图像混合 理论-线性混合操作.相关API(addWeighted) 理论-线性混合操作 用到的公式 (其中 α 的取值范围为0~1之间) 相关API(addWeighted) 参数1:输入图像M ...
- 力扣Leetcode 55. 跳跃游戏
跳跃游戏 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 判断你是否能够到达最后一个位置. 示例 1: 输入: [2,3,1,1,4] 输出: ...
- 【亲测】手把手教你如何破解pycharm(附安装包和破解文件)
此教程支持最新的2019.3版本的Pycharm,并兼容之前的版本. 一.准备工作: 1.下载Pycharm 有条件的可以自行去官网下载,这里我提供了我下载的版本,已上传到百度网盘,链接在下方. 2. ...
- 软件架构与设计 百度网盘的pdf电子书籍
如有版权问题请及时联系小编 软件架构与设计 百度网盘的pdf电子书籍 1:<软件体系结构(PDF)>https://pan.baidu.com/s/1lChfIJt5lc63KO09n5L ...
- Activiti7 任务人员动态分配(理论)
之前一直用的流程模型都是,固态的,写死的 由于固定分配方式,任务只能一步一步执行,执行到每一个任务将按照bpmn的配置去分配任务负责人.这显然在实际开发中是不可能的 所以我们需要动态分配人员 表达式分 ...
- 给EmpMapper开放Restful接口
本文例程下载:https://files.cnblogs.com/files/xiandedanteng/gatling20200428-3.zip 接口控制器代码如下: 请求url和响应都写在了每个 ...