动画效果配置

动画效果配置

ECharts 提供了丰富的动画效果配置选项，可以通过这些配置让图表更加生动。动画效果主要包括初始动画、更新动画和交互动画三种类型。通过合理的配置，可以控制动画的持续时间、缓动效果以及是否启用动画等。

初始动画配置

初始动画是指图表第一次渲染时触发的动画效果。在 ECharts 中，可以通过 animation 相关属性进行配置：

option = {
  // 是否开启动画
  animation: true,
  // 初始动画的持续时间，单位为毫秒
  animationDuration: 1000,
  // 初始动画的缓动效果
  animationEasing: 'cubicOut',
  // 初始动画的延迟时间，单位为毫秒
  animationDelay: 200,
  series: [
    {
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20],
      // 可以单独为系列配置动画
      animationDuration: function(idx) {
        // 越往后的数据延迟越大
        return idx * 100;
      }
    }
  ]
};

缓动效果 animationEasing 支持多种内置函数：

• linear：线性变化
• quadraticIn：二次方缓入
• quadraticOut：二次方缓出
• quadraticInOut：二次方缓入缓出
• cubicIn：三次方缓入
• cubicOut：三次方缓出
• cubicInOut：三次方缓入缓出
• sinusoidalIn：正弦缓入
• sinusoidalOut：正弦缓出
• sinusoidalInOut：正弦缓入缓出
• exponentialIn：指数缓入
• exponentialOut：指数缓出
• exponentialInOut：指数缓入缓出
• elasticIn：弹性缓入
• elasticOut：弹性缓出
• elasticInOut：弹性缓入缓出
• backIn：回退缓入
• backOut：回退缓出
• backInOut：回退缓入缓出
• bounceIn：弹跳缓入
• bounceOut：弹跳缓出
• bounceInOut：弹跳缓入缓出

更新动画配置

当数据发生变化时，图表会触发更新动画。可以通过 animationDurationUpdate 和 animationEasingUpdate 等属性进行配置：

option = {
  // 更新动画的持续时间
  animationDurationUpdate: 800,
  // 更新动画的缓动效果
  animationEasingUpdate: 'cubicInOut',
  series: [
    {
      type: 'pie',
      data: [
        {value: 235, name: '视频广告'},
        {value: 274, name: '联盟广告'},
        {value: 310, name: '邮件营销'}
      ],
      // 可以单独为系列配置更新动画
      animationDurationUpdate: function(idx) {
        return idx * 100;
      }
    }
  ]
};

交互动画配置

当用户与图表交互时（如鼠标悬停、点击等），会触发交互动画。这些动画可以通过 emphasis 和 itemStyle 等属性进行配置：

option = {
  series: [
    {
      type: 'scatter',
      data: [[10, 20], [30, 40], [50, 60]],
      // 高亮状态下的样式和动画
      emphasis: {
        itemStyle: {
          color: 'red',
          // 高亮动画持续时间
          transitionDuration: 300
        },
        // 高亮时的缩放效果
        scale: 1.2
      }
    }
  ]
};

特殊动画效果

ECharts 还提供了一些特殊的动画效果，如涟漪动画、轨迹动画等：

option = {
  series: [
    {
      type: 'effectScatter',
      rippleEffect: {
        // 涟漪动画配置
        period: 4,  // 动画周期
        scale: 2.5,  // 缩放比例
        brushType: 'fill'  // 填充类型
      },
      data: [[10, 20], [30, 40], [50, 60]]
    },
    {
      type: 'lines',
      effect: {
        show: true,
        // 轨迹动画配置
        period: 3,  // 动画周期
        trailLength: 0.7,  // 轨迹长度
        symbol: 'arrow',  // 箭头形状
        symbolSize: 10  // 箭头大小
      },
      data: [
        {
          coords: [[10, 20], [30, 40]]
        }
      ]
    }
  ]
};

动画阈值控制

对于大数据量的图表，可以通过 animationThreshold 控制是否启用动画。当数据量超过阈值时，会自动关闭动画以提高性能：

option = {
  // 当数据量超过1000时关闭动画
  animationThreshold: 1000,
  series: [
    {
      type: 'bar',
      data: new Array(1500).fill(0).map(Math.random)
    }
  ]
};

自定义动画

ECharts 允许通过 customSeries 实现自定义动画效果。以下是一个简单的自定义动画示例：

option = {
  series: [
    {
      type: 'custom',
      renderItem: function(params, api) {
        const point = api.coord([api.value(0), api.value(1)]);
        return {
          type: 'circle',
          shape: {
            cx: point[0],
            cy: point[1],
            r: api.value(2) * 2
          },
          style: {
            fill: api.visual('color'),
            // 自定义动画属性
            opacity: 0.5,
            shadowBlur: 10,
            shadowColor: api.visual('color')
          },
          // 动画配置
          transition: ['shape', 'style'],
          enterFrom: {
            style: {
              opacity: 0
            },
            shape: {
              r: 0
            }
          }
        };
      },
      data: [
        [10, 20, 5],
        [30, 40, 8],
        [50, 60, 12]
      ]
    }
  ]
};

动画性能优化

当图表数据量较大时，可以通过以下方式优化动画性能：

1. 关闭不必要的动画：

option = {
  animation: false,
  series: [...]
};

2. 减少动画持续时间：

option = {
  animationDuration: 300,
  series: [...]
};

3. 使用简单的缓动函数：

option = {
  animationEasing: 'linear',
  series: [...]
};

4. 分批渲染数据：

option = {
  series: [
    {
      type: 'bar',
      data: largeData,
      progressive: 400,  // 分批渲染，每批400个数据
      progressiveThreshold: 1000  // 当数据量超过1000时启用分批渲染
    }
  ]
};

动画事件监听

ECharts 提供了动画相关的事件，可以监听动画的开始、结束等状态：

myChart.on('animationstart', function(params) {
  console.log('动画开始:', params);
});

myChart.on('animationend', function(params) {
  console.log('动画结束:', params);
});

myChart.on('animationupdate', function(params) {
  console.log('动画更新:', params);
});

多图表联动动画

当多个图表需要联动时，可以通过 connect 和 group 属性实现动画同步：

// 图表1
const chart1 = echarts.init(document.getElementById('chart1'));
chart1.setOption({
  // 指定分组名称
  group: 'animationGroup',
  animationDuration: 1000,
  series: [...]
});

// 图表2
const chart2 = echarts.init(document.getElementById('chart2'));
chart2.setOption({
  // 指定相同的分组名称
  group: 'animationGroup',
  animationDuration: 1000,
  series: [...]
});

// 连接两个图表
echarts.connect('animationGroup');