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

为了给这个进度池添加动画效果,我反向的在进度池上面铺一层由一格一格与进度池中相同的块状组成的与背景相同的格子,然后每一秒影藏一格格子,以达到进度格子一格一格显示出来的效果,同时用定时器设置每6秒重复一次。

由于当时没有做太多关于分辨率的兼容,以致于切换都某些分辨率较低的电脑屏幕上时,露馅了。

所以,就开始我后面的探索。。。。。

无意间发现一个echarts的附带网站,叫做Echarts Gallery,里面有比官方实例更加多样化的实例,而且免费!

浏览了很久,终于找了两个与需求相似的进度池!

copy下来之后,一番修改,发现其实官方是有专门的属性可以直接配置,达到将条形统计图变成这样一格一格的进度池模样的,如下图圈红的部分,实质就是将条形图中的柱子设置成一小格(这里可以是rect方形,也可以是圆的的,设置symbol即可),然后copy这个symbol即可,超级简单实用!

效果如下:

再加上官方的动画配置,就完美解决了之前的问题了!

echarts配置进度池的更多相关文章

  1. 在Tomcat里使用配置连接池连接数据库

    一:首先在Tomcat下的conf/context.xml文件里的contenx标签里配置数据源: <Resource name="jdbc/zzz" auth=" ...

  2. 转!数据库连接池概念、种类、配置(DBCP\C3P0\JndI与Tomact配置连接池)

    数据库连接池概念.种类.配置(DBCP\C3P0\JndI与Tomact配置连接池) 一.DBCP 连接:DBCP 连接池是 Apache 软件基金组织下的一个开源连接池实现. 需要的 java 包c ...

  3. java配置数据库连接池的方法步骤

    java配置数据库连接池的方法步骤 java配置数据库连接池的方法步骤,需要的朋友可以参考一下   先来了解下什么是数据库连接池数据库连接池技术的思想非常简单,将数据库连接作为对象存储在一个Vecto ...

  4. Tomcat上配置连接池{ connect error=Name [jdbc/OracleDB] is not bound in this Context. Unable to find [jdbc]}

    . 在学习期间,从未实践过在tomcat上配置连接池,今天终于实现一次,在tomcat玩了一把,不知道你是否现在有和我一样的困境.废话少说直接上代码   java  public static Con ...

  5. WebSphere配置数据库连接池

    通过WebSphere配置数据库连接池一共需要三项:     1.配置连接驱动,在这里叫:JDBC提供程序;    2.配置数据库连接池,在这里叫:配置数据源;  3.配置数据库登录帐号,密码,在这里 ...

  6. 配置数据库连接池,Tomcat6.0 连接池的配置

    Tomcat6.0 连接池的配置1.本人当前使用的Tomcat版本为:6.0.20,oracle为稳定的9i版本 2.下文为方便起见,依习惯以%Tomcat_Home%表示Tomcat安装的目录,本人 ...

  7. springboot2.0配置连接池(hikari、druid)

    springboot2.0配置连接池(hikari.druid) 原文链接:https://www.cnblogs.com/blog5277/p/10660689.html 原文作者:博客园--曲高终 ...

  8. 项目重构之数据源配置与优化:log4j 配置数据库连接池Druid,并实现日志存储到数据库

    作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节. 交流QQ群:[编程之美 365234583] ...

  9. SpringBoot学习(三)-->Spring的Java配置方式之读取外部的资源配置文件并配置数据库连接池

    三.读取外部的资源配置文件并配置数据库连接池 1.读取外部的资源配置文件 通过@PropertySource可以指定读取的配置文件,通过@Value注解获取值,具体用法: @Configuration ...

随机推荐

  1. 设计模式 | Spring中用到的设计模式,你知道几个?

    设计模式无处不在,因为它就来自于我们的日常生活,提炼于生活经验. 正握在你手中的手机,不能用220V的电压直接充电,需要一个专门的电源适配器(充电器)才行.摆在你桌上的电脑也是一样的,都需要" ...

  2. 查看/设置 mysql时区

    # 查看时区 show variables like '%time_zone%'; # 设置全局 set global time_zone='+8:00';  # 设置当前会话 set time_zo ...

  3. 快速幂 (C++)

    typedef long long LL; using namespace std; //求a^b%m,递归写法 LL binaryPow(LL a,LL b,LL m){ if(b==){ //如果 ...

  4. Java开发环境搭建的准备工作

    Java开发环境搭建的准备工作 网络配置(修改hosts) 什么时候需要 比如我们在安装homeBrew的时候会遇到 curl: (7) Failed to connect to raw.github ...

  5. Java/后端学习路线

    点赞再看,养成习惯,微信搜一搜[三太子敖丙]关注这个喜欢写情怀的程序员. 本文 GitHub https://github.com/JavaFamily 已收录,有一线大厂面试完整考点.资料以及我的系 ...

  6. LinuxIP配置方法

    一.双网卡双IP. eth0为电信,eth1为联通. # cd /etc/sysconfig/network-scripts/ # vi ifcfg-eth0 DEVICE=eth0 HWADDR=0 ...

  7. laya资源版本管理

    layaair-cmd https://ldc.layabox.com/doc/?nav=zh-as-3-4-2 Laya的版本管理 https://blog.csdn.net/qq_43287088 ...

  8. Animator.SetFloat(string name,float value,float dampTime,float deltaTime)详解

    一般来说,我们用到的是这个API: animator.SetFloat("Speed",2.0f); 但是这个还有一个重载的方法,叫做: Animator.SetFloat(str ...

  9. Codeforces Round #560 (Div. 3)A-E

    A. Remainder output standard output You are given a huge decimal number consisting of nn digits. It ...

  10. FZU - 2037 -Maximum Value Problem(规律题)

    Let’s start with a very classical problem. Given an array a[1…n] of positive numbers, if the value o ...