[JavaScript知识库]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;   // 没有动画效果