ECharts两种动画效果

加载动画：当数据第一次加载或切换数据集时，可以通过设置 animation 属性来展示加载动画，具体可以设置为 ‘auto’ 或者 true，这将启用默认的加载动画效果，也可以设置为一个对象，自定义加载动画的具体效果。例如：

option ={
    animation:true,...};

更新动画：当数据发生变化时，可以通过设置 animationDurationUpdate 和 animationEasingUpdate 属性来展示更新动画，这将在数据变化后自动执行动画，使得数据变化更加直观和平滑。例如：

option ={
    series:[{
        type:'sankey',
        animationDurationUpdate:1000,// 更新动画时长为 1s
        animationEasingUpdate: 'quinticInOut',// 更新动画缓动效果为 'quinticInOut'...}]...};

在以上代码中，我们将 series 属性的 type 设置为 ‘sankey’，即表示创建一个桑基图，并通过 animationDurationUpdate 和 animationEasingUpdate 属性分别设置了更新动画的时长和缓动效果。这样，在数据发生变化时，桑基图将自动执行更新动画。
需要注意的是，为了使用动画效果，需要将 ECharts 版本升级到 4.0 及以上版本。

完整代码如下：
HTML部分：

<div id="sankeyChart" style="height: 500px;"></div>

js:

// 初始化echarts实例var myChart = echarts.init(document.getElementById('sankeyChart'));// 配置项var option ={
  tooltip:{
    trigger:'item',
    triggerOn: 'mousemove'
  },
  series:{
    type:'sankey',
    emphasis:{
      focus: 'adjacency'
    },
    nodeWidth:20,
    data:[{
      name:'A'},{
      name:'B'},{
      name:'C'},{
      name:'D'},{
      name:'E'}],
    links:[{
      source:'A',
      target:'B',
      value:10},{
      source:'A',
      target:'C',
      value:15},{
      source:'B',
      target:'D',
      value:12},{
      source:'C',
      target:'D',
      value:8},{
      source:'C',
      target:'E',
      value:10}]}};// 显示加载动画
myChart.showLoading();// 异步加载数据setTimeout(function (){
  myChart.hideLoading();
  myChart.setOption(option);},2000);// 更新数据setTimeout(function (){
  option.series.data.push({
    name:'F'});
  option.series.links.push({
    source:'D',
    target:'F',
    value:5});
  myChart.setOption(option);},4000);

上述代码中，通过 showLoading() 方法来展示加载动画，在异步加载数据完成后，使用 hideLoading() 方法来隐藏加载动画并且调用 setOption() 方法来设置图表数据。然后，在延迟 4 秒后，使用 setOption() 方法来更新数据。最终效果是一个带有加载动画和更新动画的桑基图。