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 ...
随机推荐
- 程序员深夜惨遭老婆鄙视,原因竟是CAS原理太简单?| 每一张图都力求精美
悟空 种树比较好的时间是十年前,其次是现在. 自主开发了Java学习平台.PMP刷题小程序.目前主修Java.多线程.SpringBoot.SpringCloud.k8s. 本公众号不限于分享技术,也 ...
- CentOS基础操作
一.修改IP地址 vim ../etc/sysconfig/network-scripts/ifcfg-ens33 在文件中修改或添加以下内容 TYPE=Ethernet PROXY_METHOD= ...
- tensorflow1.x及tensorflow2.x不同版本实现验证码识别
近一个假期,入坑深度学习,先从能看得着的验证码识别入门.从B站看了几天的黑马程序员的“3天带你玩转python深度学习后“,一是将教程中提到的代码一一码出来:二是针对不同的tensorflow版本,结 ...
- 23种设计模式 - 接口隔离(Facade - Proxy - Mediator - Adapter)
其他设计模式 23种设计模式(C++) 每一种都有对应理解的相关代码示例 → Git原码 ⌨ 接口隔离 在组件构建过程中,某些接口之间直接的依赖常常会带来很多问题.甚至根本无法实现.采用添加一层间接( ...
- JVM 第一篇:编译 OpenJdk14 ,我行你也行
本文内容过于硬核,建议有 Java 相关经验人士阅读. 1 引言 从上周开始一直在看周志明的 「深入理解Java虚拟机:JVM高级特性与最佳实践(第3版)」 ,好多年之前看过第二版的,绝对算的上是国内 ...
- URL的字符编码
摘要: 在通过URL访问HTTP SERVER的时候,通常会产生trace callback的异常,返回505的错误," VERSION IS NOT SUPPORTED ?" , ...
- Python画图库Turtle库详解篇
Turtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位置开始,它根据一组函数指令的控制,在这个平面坐标系中移动,从而在它爬行 ...
- new Map()详细介绍与对比
说明: Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现.如果你需要“键值对”的数据结构,Map比Object更合适.它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串, ...
- Intermediate English Book 1
List x1.0 x1.5 Lesson 1 Reading Lesson 1 Details Lesson 2 Dialogue Lesson 2 Details Lesson 3 Reading ...
- 还在写if/else if ... ?
在日常开发中,我们经常会写出很多 if else if ... 很多看起来又长又糟糕的代码, 那么策略模式你该去get 了. 点我查看哦!