Echarts 加载动画

1: 加载动画

   Echarts 已经内置好了加载数据的动画,  我们只需要在合适的时机显示或者隐藏即可。

2: 显示加载动画
   mCharts.showLoading();   // 显示加载动画

3: 隐藏加载动画
   mCharts.hideLoading();   // 隐藏加载动画

   var mCharts = echarts.init(document.querySelect("div"));
      mCharts.showLoading();   // 在获取数据之前, 显示加载动画
   $.get('data/test_data.json', function(ret) {
      mCharts.hideLoading();   // 在服务器获取数据成功之后, 隐藏加载动画
   })

4: 显示动画的实现方法:
   改变数据,  使用setOption()  方式改变数据:

5: 增量动画的实现:
   增量动画的实现方式:
   mCharts.setOption
   所有的数据的更新 都是通过setOption 实现;
   不用考虑数据到底产生那些变化
   Echarts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

6: setOption:  可以设置多次
   新的option 和 旧的 option 
   新旧的option 的关系不是相互覆盖的关系,  是相互整合的关系。
   我们在设置option 的时候,  只需要考虑到变化的部分就可以了。
    
动画的配置
1: 开启动画项
  animation: true;   // 是否控制动画开启

2: 动画时长: animationDuration: 5000
   动画的时长,  它是以毫秒为单位

3: 缓动动画
   animationEasing: 'liner'  // 匀速的    'boundceOut':  带有反弹效果

4: 动画阈值:

  animationThreshold: 8;   // 没有动画效果

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值