近日,使用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. Hive SQL 优化面试题整理

    Hive优化目标 在有限的资源下,执行效率更高 常见问题: 数据倾斜 map数设置 reduce数设置 其他 Hive执行 HQL --> Job --> Map/Reduce 执行计划 ...

  2. Cassandra社区是怎么测试4.0的

    点击查看活动录像,获取更多技术细节. Cassandra社区是怎么测试4.0的 Cassandra 4.0的目标就是成为史上最稳定的版本.为了达到这个目的,我们需要用很多方法和工具进行测试.我今天主要 ...

  3. Qt启动子进程,子进程关闭时通知主进程,实现主进程对子进程的管理

    自己开发了一个股票智能分析软件,功能很强大,需要的点击下面的链接获取: https://www.cnblogs.com/bclshuai/p/11380657.html 1.需求描述  Qt主进程启动 ...

  4. SpringCloud Alibaba Nacos 服务治理中心

    目录 一.什么是Nacos? 二.Nacos能干吗? 三.Nacos关键特性 四.Nacos中的基本概念 五.如何安装部署Nacos? 六.Nacos数据持久化 一.什么是Nacos? 英文全称Dyn ...

  5. 【免费】windows下如何生成tar.gz,一键生成tar.gz

    废话 一.实验背景 tar.gz 是Linux和Unix下面比较常用的格式,一条命令就可以把文件压缩打包成tar.gz格式,然而这种格式在windows并不多见. Linxu服务器上,tar.gz 包 ...

  6. Python | 详解Python中的协程,为什么说它的底层是生成器?

    今天是Python专题的第26篇文章,我们来聊聊Python当中的协程. 我们曾经在golang关于goroutine的文章当中简单介绍过协程的概念,我们再来简单review一下.协程又称为是微线程, ...

  7. Queries for Number of Palindromes(区间dp)

    You've got a string s = s1s2... s|s| of length |s|, consisting of lowercase English letters. There a ...

  8. 学会BeanShell,才敢说自己懂Jmeter

    jmeter的BeanShell Sampler,可以直接引用java代码,有下面3种方式: 1.直接输入java代码 2.导入java文件 3.导入class文件 BeanShell脚本访问变量主要 ...

  9. Mybatis联合查询(一)

    Mybatis的简单联合查询操作: 实体类: Employee: package com.test.mybatis; public class Employee { private Integer i ...

  10. 01vue.config.js

      const path = require('path'); module.exports = { // 基本路径 publicPath: process.env.NODE_ENV === 'pro ...