关于echarts中的noDataLoadingOption——loading动画的问题


在最近的一个项目中用到echarts这个插件,其中关于noDataLoadingOption配置项的问题让我困惑了好长时间。经过蛋疼的查找下,终于搞明白是版本的原因。

且看官网的介绍:ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。详情请查看官网:http://echarts.baidu.com/

像大多数插件一样,echarts有详细的官方文档,大家如有用到的,可以看文档,一般没有啥子问题。

我所做的项目中一共用到七种图表类型,期间也有各种小困惑,但是,还好,经过各方努力,最终解决。最后,领导说要在图表加载出现之前,用冒泡来代替空白区域,那样会显得舒服好看些。领导发话,所以我立即查看文档加百度,然后试了下,果真可以在图标加载出现前可以用echarts自带冒泡来代替空白区域,如下图所示:

echarts1

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

echarts2

 

需要注意的是,在初始化的时候,noDataLoadingOption配置需要series中data需为空。代码中可以看到,在option中我只保留了series,其他配置选项我没有写,这个大家可以根据自己的需要来写。

然后,在点击事件中,去掉noDataLoadingOption配置项,把series中data数据填上,当然其他配置项也要写上,在结果中,冒泡就会消失,图表就会出现。

echarts3

让我郁闷的是这个noDataLoadingOption只在echarts的2.0版本中才有,在3.0版本中的配置项手册里没有看到。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM