如何给echarts添加动画

在 ECharts 中添加动画非常简单，ECharts 本身默认就带有动画效果，你也可以通过配置项来控制动画的类型、时长、缓动方式等。

下面从 基础用法 → 常用动画配置 → 进阶示例 给你说明。

一、ECharts 默认动画

只要你正常使用 setOption，图表在 初始化、数据更新 时都会有动画：

const chart = echarts.init(document.getElementById('main'));

chart.setOption({
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  yAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: [10, 20, 30]
  }]
});

✅ 首次渲染有动画
✅ setOption 更新数据也有动画

二、常用动画配置项（重点）

1️⃣ 全局动画控制

option = {
  animation: true,          // 是否开启动画（默认 true）
  animationDuration: 1000,  // 动画时长（ms）
  animationEasing: 'cubicOut', // 缓动效果
  animationDelay: 300,      // 延迟开始
  animationDurationUpdate: 800, // 数据更新动画时长
  animationEasingUpdate: 'cubicInOut'
};

2️⃣ 常用 easing（缓动函数）

• linear
• quadraticIn / Out / InOut
• cubicIn / Out / InOut（最常用）
• elasticOut（弹性）
• bounceOut（弹跳）

三、不同系列的动画配置

柱状图（bar）

series: [{
  type: 'bar',
  data: [10, 20, 30],
  animationDelay: function (idx) {
    return idx * 100; // 逐个出现
  }
}]

折线图（line）

series: [{
  type: 'line',
  data: [10, 20, 30],
  animationDuration: 2000,
  animationEasing: 'linear'
}]

四、数据更新时的动画（重点）

setInterval(() => {
  chart.setOption({
    series: [{
      data: [
        Math.random() * 100,
        Math.random() * 100,
        Math.random() * 100
      ]
    }]
  });
}, 2000);

✅ ECharts 会自动进行 数据过渡动画

五、关闭动画（特殊情况）

option = {
  animation: false
};

或单系列关闭：

series: [{
  type: 'bar',
  animation: false
}]

六、常见动画场景示例

✅ 柱状图依次出现

series: [{
  type: 'bar',
  data: [10, 20, 30],
  animationDelay: idx => idx * 200
}]

✅ 地图 / 散点图飞入

series: [{
  type: 'effectScatter',
  rippleEffect: { scale: 4 },
  animationDuration: 1500
}]

七、总结

如果你有 具体图表类型（如地图 / 饼图 / 3D） 或 想要某种动画效果（如轮播、高亮），可以告诉我，我可以直接给你完整示例。