关于echarts中的noDataLoadingOption——loading动画的问题
在最近的一个项目中用到echarts这个插件,其中关于noDataLoadingOption配置项的问题让我困惑了好长时间。经过蛋疼的查找下,终于搞明白是版本的原因。
且看官网的介绍:ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。详情请查看官网:http://echarts.baidu.com/
像大多数插件一样,echarts有详细的官方文档,大家如有用到的,可以看文档,一般没有啥子问题。
我所做的项目中一共用到七种图表类型,期间也有各种小困惑,但是,还好,经过各方努力,最终解决。最后,领导说要在图表加载出现之前,用冒泡来代替空白区域,那样会显得舒服好看些。领导发话,所以我立即查看文档加百度,然后试了下,果真可以在图标加载出现前可以用echarts自带冒泡来代替空白区域,如下图所示:

上图是再页面初始化的时候,即显示此loding动画效果。代码如下:

需要注意的是,在初始化的时候,noDataLoadingOption配置需要series中data需为空。代码中可以看到,在option中我只保留了series,其他配置选项我没有写,这个大家可以根据自己的需要来写。
然后,在点击事件中,去掉noDataLoadingOption配置项,把series中data数据填上,当然其他配置项也要写上,在结果中,冒泡就会消失,图表就会出现。

让我郁闷的是这个noDataLoadingOption只在echarts的2.0版本中才有,在3.0版本中的配置项手册里没有看到。
关于echarts中的noDataLoadingOption——loading动画的问题的更多相关文章
- 【动画消消乐 】仿ios、android中常见的一个loading动画 074
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...
- 用Canvas制作loading动画
上一篇讲到用SVG制作loading动画,其中提到了线性渐变在扇形区域中的问题,并且用SVG SIML语法制作的loading动画并不是所有浏览器都兼容,所以现在用Canvas重新实现了一遍. 这里与 ...
- 用svg制作loading动画
首先说明:由于各浏览器对svg动画事件支持不统一,此loading动画在Firefox,Opera,Chrome中均没有问题,IE和Safari中有问题,可能是不支持SIML写动画的语法, 但是用Ca ...
- loading动画效果记录
看到好多网页都有一个炫酷的loading动画,以前不知道怎么实现的.今天学习了一下,发现其实也很简单. 首先在学习的时候偶然遇到一个pace.js的库,非常好用.优点是,不需要挂接到任何代码,自动检测 ...
- 纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
- 分享web前端七款HTML5 Loading动画特效集锦
以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...
- 7 款华丽的 HTML5 Loading 动画特效
我们在进行大数据的传输或者复杂操作的等待时,最好能有一个Loading等待的小动画提示用户.本文将为大家分享一些超华丽的基于HTML5的Loading加载动画特效,希望你会喜欢. 1.HTML5 Ca ...
- 纯css去实现loading动画效果图
当项目中加载内容慢的的时候,需要显示一个loading动画效果图 之前我们使用的是一圈点点旋转的效果,现在设计修改为,如下gif图片效果-------------------------------- ...
- iOS动画进阶 - 教你写 Slack 的 Loading 动画
(转载自:http://blog.csdn.net/wang631106979/article/details/52473985) 如果移动端访问不佳,可以访问我的个人博客 前几天看了一篇关于动画的博 ...
随机推荐
- js原生方法filter实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS绘制正五角星原理(数学模型)
尽管网上有很多CSS绘制五角星的代码案例,但是对于初学者来说可以拿来移植使用,但是在不明白其原理的情况下,进行修改移植就比较困难了.譬如想要将五角星尺寸进行缩小或者放大等设计,就需要对原代码相关数据进 ...
- UOJ80 二分图最大权匹配
草,学了一下午假板子,sb博客害人 题目大意: 一个教室有\(n\)个男生和\(m\)个女生,某些男女之间愿意早恋(雾),其早恋好感度为\(w_i\),问怎样让男女配对使得班里好感度之和最大 \(n\ ...
- 第三方模块Gulp
1.第三方模块Gulp 基于node平台开发的前端构建工具. 将机械化操作编写成任务,想要执行机械化操作时执行一个命令,命令任务就能自动执行了.提高开发效率. 1)Gulp使用 ① 使用npm ins ...
- 前端进阶之认识与手写compose方法
目录 前言:为什么要学习这个方法 compose简介 compose的实现 最容易理解的实现方式 手写javascript中reduce方法 redux中compose的实现 参考文章 最后 前言:为 ...
- 使用git客户端免密码进行拉取等相关操作
前言 如果使用git客户端进行pull或push操作时,遇到有权限的项目总要输入用户名密码,真的是太麻烦了,因此需要稍作修改,然后就可以免密码操作啦! 方法: 进入C盘->用户->你的主机 ...
- sql注入之双查询注入
双查询注入前需要了解什么是子查询 子查询可以理解在一个select语句中再插入一个select 里面的select语句就是子查询 例子:select concat((select database() ...
- Linux Vi进入编辑模式后使用方向键的时候,并不会使光标移动,而是在命令行中出现A、B、C、D四个字母
在linux下,初始使用Vi的时候有两个典型的问题: 1.在编辑模式下使用方向键的时候,并不会使光标移动,而是在命令行中出现A.B.C.D四个字母: 2.当编辑出现错误,想要删除时,发现Backspa ...
- 【Pyhton 】 装饰器
# -*- coding:utf8 -*-# Author : Mr·Yang''' 装饰器,带参数装饰器,装饰器中带参数''' import time# 普通装饰器'''def time_decor ...
- DG修改SYS用户密码(ORA-16810,ORA-01017)
修改主库PROD1密码后,查看configuration状态看到以下报错: [oracle@edgzrip1-PROD1 ~]$ dgmgrl sys/oracleDGMGRL for Linux: ...