在最近的一个项目中用到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动画的问题的更多相关文章

  1. 【动画消消乐 】仿ios、android中常见的一个loading动画 074

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出-   自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...

  2. 用Canvas制作loading动画

    上一篇讲到用SVG制作loading动画,其中提到了线性渐变在扇形区域中的问题,并且用SVG SIML语法制作的loading动画并不是所有浏览器都兼容,所以现在用Canvas重新实现了一遍. 这里与 ...

  3. 用svg制作loading动画

    首先说明:由于各浏览器对svg动画事件支持不统一,此loading动画在Firefox,Opera,Chrome中均没有问题,IE和Safari中有问题,可能是不支持SIML写动画的语法, 但是用Ca ...

  4. loading动画效果记录

    看到好多网页都有一个炫酷的loading动画,以前不知道怎么实现的.今天学习了一下,发现其实也很简单. 首先在学习的时候偶然遇到一个pace.js的库,非常好用.优点是,不需要挂接到任何代码,自动检测 ...

  5. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  6. 分享web前端七款HTML5 Loading动画特效集锦

    以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...

  7. 7 款华丽的 HTML5 Loading 动画特效

    我们在进行大数据的传输或者复杂操作的等待时,最好能有一个Loading等待的小动画提示用户.本文将为大家分享一些超华丽的基于HTML5的Loading加载动画特效,希望你会喜欢. 1.HTML5 Ca ...

  8. 纯css去实现loading动画效果图

    当项目中加载内容慢的的时候,需要显示一个loading动画效果图 之前我们使用的是一圈点点旋转的效果,现在设计修改为,如下gif图片效果-------------------------------- ...

  9. iOS动画进阶 - 教你写 Slack 的 Loading 动画

    (转载自:http://blog.csdn.net/wang631106979/article/details/52473985) 如果移动端访问不佳,可以访问我的个人博客 前几天看了一篇关于动画的博 ...

随机推荐

  1. Shiro remeberMe反序列化漏洞复现(Shiro-550)

    Apache Shiro是一个强大易用的Java安全框架,提供了认证.授权.加密和会话管理等功能.Shiro框架直观.易用,同时也能提供健壮的安全性.在Apache Shiro编号为550的 issu ...

  2. 从.NET转GO了

    前言 近几个月刚从.NET转到GO,入职了一个使用GO微服务的互联网公司.因为需要熟悉公司的微服务架构和适应新公司的节奏,所以最近没时间写博客,现在简单做个总结. 转GO的经历 自学GO 上一年的八月 ...

  3. 如何实现OSM地图本地发布并自定义配图

    目录 1.缘起 2.准备环境 2.1.安装linux系统 2.2.安装docker 2.3.安装Docker Compose 2.4.安装git 3.发布地图 3.1.拉取代码 3.2.测试网络 3. ...

  4. 【题解】「CF1182B」Plus from Picture

    这是一道超级水的模拟 + 简单搜索. 说说思路: 先找到中心点,就是自己和上下左右都为 * 的. 上下左右上的所有 * 都删掉,然后再看看有没有多余的 * 如果有输出 NO 否则输出 YES. 比如说 ...

  5. Acwing 403. 平面

    以一个这个环为基准,剩下的边可以放在圈外,也可以放在圈内,两种状态. 如果两条线段出现了环上意义的交叉即冲突,即不能同时放在圈外/内. 这是典型的 2-SAT 问题,因为关系传递是无向的,即逆命题与原 ...

  6. day013|python之模块02&目录01

    1 from...import 1.1 概念 1.1.1 首次导入模块会发生的事 会触发模块的运行,产生一个模块的名称空间 将运行模块文件过程中产生的名字丢到模块额名称空间 在当前名称空间产生一个名字 ...

  7. C++ 虚函数表与多态 —— 关键字 final 的用法

    final 字面上最终.最后.不可改变的意思,final 这个关键字在 Jave PHP C++中都有用到,其作用也基本一致. C++中的 final 是C++11新增,他可以用来修饰类,让类无法被继 ...

  8. apache重写URL时,排除静态资源

    THINKPHP项目部署的apache 上面时,如果为了隐藏入口文件配置了重写URL,会导致将静态资源的URL也解析成Controller/Method,导致触发模块不存在 所以在URL重写配置中,需 ...

  9. Nacos源码深度解析1-服务注册初始化(客户端)

    一.初始化 NamingService naming = NamingFactory.createNamingService(properties); 二.通过反射传入properties生成Naco ...

  10. 解决IDEA Maven下载依赖包速度慢问题

    右键项目,maven选项,"Open setting.xml"或"Create setting.xml",在 mirrors 节点添加下面代码. <mir ...