数据过渡

Apache EChartsTM 将在添加、更新和删除数据时对位置、缩放、形状应用过渡效果。这使得图表更加平滑，并更好地显示数据之间的关系。通常，开发者不需要担心如何使用动画，只需使用 setOption 更新数据，ECharts 将找到上次数据之间的差异并自动应用最合适的过渡动画。

例如，以下示例显示了饼图数据定时更新的过渡效果。

function makeRandomData() {
  return [
    {
      value: Math.random(),
      name: 'A'
    },
    {
      value: Math.random(),
      name: 'B'
    },
    {
      value: Math.random(),
      name: 'C'
    }
  ];
}
option = {
  series: [
    {
      type: 'pie',
      radius: [0, '50%'],
      data: makeRandomData()
    }
  ]
};

setInterval(() => {
  myChart.setOption({
    series: {
      data: makeRandomData()
    }
  });
}, 2000);
在线示例

过渡的配置

由于添加和更新数据通常需要不同的动画，例如我们期望数据更新动画更短，因此 ECharts 区分了两种动画配置。

  • 对于添加数据，我们应用进入动画，使用 animationDuration、animationEasing 和 animationDelay 分别配置动画的持续时间、缓动效果和延迟。
  • 对于更新数据，我们将应用更新动画，使用 animationDurationUpdate、animationEasingUpdate 和 animationDelayUpdate 分别配置动画的持续时间、缓动效果和延迟。

如你所见，更新动画配置是带有 Update 后缀的进入动画配置。

每次在 ECharts 中使用 setOption 时，数据都将与上次更新的数据进行比较，并根据比较结果对数据执行三种状态：添加、更新和删除。此比较基于数据的 name，例如，如果上次更新有三个 names 分别为 'A'、'B'、'C'，而新的更新变为 'B'、'C'、'D'，则数据 'B'、'C' 将被更新，数据 'A' 将被删除，数据 'D' 将被添加。如果是第一次 setOption，由于没有旧数据，所有数据都将被添加。根据这三种状态，ECharts 将分别应用进入动画、更新动画和离开动画。

所有这些配置都可以在 option 的顶层为所有系列和组件设置，也可以为每个系列单独设置。

如果我们想关闭动画，我们可以简单地将 option.animation 设置为 false。

动画持续时间

animationDuration 和 animationDurationUpdate 用于设置动画的持续时间，单位为 ms。设置较长的动画持续时间可以让用户更清楚地看到过渡动画的效果，但我们也需要注意，时间过长可能会让用户在等待动画完成时失去耐心。

设置为 0 将关闭动画，这可以通过在我们只想关闭进入动画或更新动画时将相应的配置单独设置为 0 来实现。

动画缓动

animationEasing 和 animationEasingUpdate 配置项用于设置动画的缓动函数，该函数输入动画时间并输出动画进度。

(t: number) => number;

常见的动画缓动函数，如 'cubicIn' 和 'cubicOut' 已内置于 ECharts 中，可以直接使用

内置缓动函数。

动画延迟

animationDelay 和 animationDelayUpdate 用于设置动画延迟开始的时间，通常我们会使用回调函数为不同的数据设置不同的延迟，以达到交错动画的效果

var xAxisData = [];
var data1 = [];
var data2 = [];
for (var i = 0; i < 100; i++) {
  xAxisData.push('A' + i);
  data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
  data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
}
option = {
  legend: {
    data: ['bar', 'bar2']
  },
  xAxis: {
    data: xAxisData,
    splitLine: {
      show: false
    }
  },
  yAxis: {},
  series: [
    {
      name: 'bar',
      type: 'bar',
      data: data1,
      emphasis: {
        focus: 'series'
      },
      animationDelay: function(idx) {
        return idx * 10;
      }
    },
    {
      name: 'bar2',
      type: 'bar',
      data: data2,
      emphasis: {
        focus: 'series'
      },
      animationDelay: function(idx) {
        return idx * 10 + 100;
      }
    }
  ],
  animationEasing: 'elasticOut',
  animationDelayUpdate: function(idx) {
    return idx * 5;
  }
};
在线示例

动画的性能优化

当数据量特别大时，运行动画可能会出现性能问题，因此我们可以设置 animation: false 来关闭动画。

对于数据量动态变化的图表，我们建议使用 animationThreshold 配置，它允许 ECharts 在画布中的图形数量超过此阈值时自动关闭动画，以提高绘图性能。这通常是一个经验值，ECharts 通常能够实时渲染数千个图形（我们的默认值也设置为 2000），但如果你的图表很复杂，或者你的用户环境恶劣，并且页面上同时运行着许多其他复杂的代码，则可能需要向下调整此值以确保整个应用程序的流畅性。

监听动画结束

有时我们希望获得当前渲染的结果，如果不使用动画，ECharts 将在 setOption 后直接执行渲染，我们可以使用 getDataURL 方法同步获取渲染结果。

const chart = echarts.init(dom);
chart.setOption({
  animation: false
  //...
});
// can be executed directly and synchronously
const dataUrl = chart.getDataURL();

但是如果图表是动画的，立即执行 getDataURL 会给我们动画开始时的图片，而不是最终结果。因此我们需要知道动画何时完成，然后执行 getDataURL 来获取结果。

如果您确定动画的持续时间，一个更简单粗暴的方法是根据动画的持续时间使用 setTimeout 来延迟执行

chart.setOption({
  animationDuration: 1000
  //...
});
setTimeout(() => {
  const dataUrl = chart.getDataURL();
}, 1000);

或者，我们可以使用 ECharts 提供的 rendered 事件来确定 ECharts 何时完成动画并停止渲染

chart.setOption({
  animationDuration: 1000
  //...
});

function onRendered() {
  const dataUrl = chart.getDataURL();
  // ...
  // This event will also be triggered if there is a subsequent interaction and the interaction is redrawn, so it needs to be removed when you're done using it
  chart.off('rendered', onRendered);
}
chart.on('rendered', onRendered);

贡献者 在 GitHub 上编辑此页面

pissang pissang