在最近的一个项目中用到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. PyQt(Python+Qt)学习随笔:部件拉伸策略sizePolicy优先级

    部件的尺寸调整策略或拉伸策略sizePolicy有7个值,如果同一个布局中的不同部件设置了不同的拉伸策略策略,在整个布局空间拉伸时,它们会怎么进行拉伸处理呢? 在未设置拉伸因子的情况下,Qt中这些拉伸 ...

  2. 如何使用 K8s 两大利器"审计"和"事件"帮你摆脱运维困境?

    概述 下面几个问题,相信广大 K8s 用户在日常集群运维中都曾经遇到过: 集群中的某个应用被删除了,谁干的? Apiserver 的负载突然变高,大量访问失败,集群中到底发生了什么? 集群节点 Not ...

  3. 嘶吼CTF easy calc

    进入之后可以看到我们需要输入一个计算式来得到答案,burpsuite进行抓包之后发现页面来自于calc.php 我们直接访问calc.php页面 发现源代码泄露 可以看到当我们没有输入num值的时候就 ...

  4. python socket 聊天室

    socket 发送的时候,使用的是全双工的形式,不是半双工的形式.全双工就是类似于电话,可以一直通信.并且,在发送后,如果又接受数据,那么在这个接受到数据之前,整个过程是不会停止的.会进行堵塞,堵塞就 ...

  5. 个人项目作业——wc.exe

    一.Github项目地址 https://github.com/PIPIYing/wc 二.项目概况 项目描述 Word Count 1. 实现一个简单而完整的软件工具(源程序特征统计程序). 2. ...

  6. 网络层-network layer(下):网络互连、子网掩码计算方法、Ipv4报头解析

    第五章 网络层-Network Layer(下) 上一章讲了网络层的任务.提供的两种服务.五个重要的路由算法.以及网络层的拥塞控制和服务质量问题.这一部分主要讲一讲网络互连问题和Internet的网络 ...

  7. 题解-CF1282E The Cake Is a Lie

    题面 CF1282E The Cake Is a Lie \(T\) 组测试数据.每次给一个 \(n\) 边形的三角剖分,求节点顺序和剖分顺序. 数据范围:\(3\le n\le 10^5\),\(\ ...

  8. 模块urllib requests json xml configparser 学习笔记

    发起http请求 获取返回值 返回值是字符串 第三方模块安装 pip install requests 返回值格式 xml  html  jaon json 功能  loads   字符串>&g ...

  9. 第二篇:docker 简单入门(二)

    本篇目录 写在最前面的话 最常用的docker命令 获取远程仓库镜像 写在最前面的话 如上图大家看到的这样,以后此类文章请到其他平台查阅,由于博客园提示说,内容太多简单,所以以后简单的内容我会放在cs ...

  10. Mybatis(二)--SqlMapConfig.xml配置文件

    一.简介 SqlMapConfig.xml是Mybatis的全局配置文件,我们在写mybatis项目时,在SqlMapConfig.xml文件中主要配置了数据库数据源.事务.映射文件等,其实还有很多配 ...