echarts动画的使用

1.加载动画

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

显示加载动画

mCharts.showLoading()

隐藏加载动画

mCharts.hideLoading()

image.png

在ajax请求前显示加载动画，请求完成后隐藏加载动画

2.增量动画

增量动画的实现方式

• mCharts.setOption()
  所有数据的更新都通过setOption实现
  不用考虑数据到底产生了哪些变化
  ECharts会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

  
  
  image.png

代码如下：

    
    
    
    
    
    



修改数据
增加数据

3.动画配置

动画配置项

• 开启动画
  animation:true
• 动画时长
  animationDuration:5000
• 缓动动画
  animationEasing: 'bounceOut'
• 动画阈值
  animationThreshold: 8
  单种形式的元素数量大于这个阈值时会关闭动画

image.png

示例代码如下：

    
    
    
    
    
    



修改数据
增加数据