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 ...
随机推荐
- IDEA的主题配置
搞了半天的主题配色,从一些现有的主题网站上想找按照sublime中monokai进行复刻的主题,都没有找到一样的,部分的颜色还会让人看不清楚,这里分享一下自定义主题的方法,和自己配置好的一个主题吧. ...
- 长沙做假证u
长沙做假证[电/薇:187ヘ1184ヘ0909同号]办各类证件-办毕业证-办离婚证,办学位证书,办硕士毕业证,办理文凭学历,办资格证,办房产证不. 这是一个简单的取最大值程序,可以用于处理 i32 数 ...
- python3学习笔记回忆录01
1.print(),print在python3中是一个函数,默认输出内容会自动换行,如果不换行需要加参数end=‘’ print ('hello,',end=' ’) print ('world!') ...
- P1073 最优贸易 分层图+最长路
洛谷p1073 最优贸易 链接 首先易得暴n2的暴力,暴力枚举就行 显然1e5的数据是会炸的 我们再分析题意,发现一共分为两个个步骤,也可以说是状态,即在一个点买入,在另一个点卖出,我们可以构建一个三 ...
- Python程序结构
Python程序结构 分支结构 条件语句: if 判断: .....满足判断条件执行的代码块 else: .....不满足判断条件执行的代码块 if 判断1: .....满足判断条件1执行的代码块 e ...
- tcpdump 命令格式
tcpdump 命令格式 tcpdump [选项] [表达式 1. 选项 常用选项: -i : 网卡名: 指定网卡,默认抓取系统第一个网卡 -n : 对地址以数字方式显示 -nn :对地址端口以数字方 ...
- deepin20 安装英伟达闭源驱动
第一步.安装深度的"显卡驱动器" 在deepin v20 中默认没有显卡驱动管理器,需要命令行安装,命令如下(刚开始一直出错,当我第一次打开应用商店,就可以安装了,好神奇): su ...
- 经典SQL问题:Top 10%
学生表: create table hy_student( id number(4,0) primary key, name nvarchar2(20) not null, score number( ...
- 20190923-05Linux用户组管理命令 000 013
每个用户都有一个用户组,系统可以对一个用户组中的所有用户进行集中管理.不同Linux 系统对用户组的规定有所不同, 如Linux下的用户属于与它同名的用户组,这个用户组在创建用户时同时创建. 用户组的 ...
- 在Oracle中快速创建一张百万级别的表,一张十万级别的表 并修改两表中1%的数据 全部运行时间66秒
万以下小表做性能优化没有多大意义,因此我需要创建大表: 创建大表有三种方法,一种是insert into table selec..connect by.的方式,它最快但是数据要么是连续值,要么是随机 ...