Animation effect configuration

Animation Effect Configuration

ECharts provides a rich set of animation effect configuration options, allowing charts to appear more dynamic. Animation effects primarily include three types: initial animation, update animation, and interactive animation. Through reasonable configuration, you can control the duration, easing effects, and whether to enable animations.

Initial Animation Configuration

Initial animation refers to the animation effect triggered when the chart is rendered for the first time. In ECharts, you can configure it using the animation-related properties:

option = {
  // Whether to enable animation
  animation: true,
  // Duration of the initial animation in milliseconds
  animationDuration: 1000,
  // Easing effect of the initial animation
  animationEasing: 'cubicOut',
  // Delay time for the initial animation in milliseconds
  animationDelay: 200,
  series: [
    {
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20],
      // Animation can be configured separately for the series
      animationDuration: function(idx) {
        // The later the data, the greater the delay
        return idx * 100;
      }
    }
  ]
};

The easing effect animationEasing supports multiple built-in functions:

• linear: Linear change
• quadraticIn: Quadratic ease-in
• quadraticOut: Quadratic ease-out
• quadraticInOut: Quadratic ease-in and ease-out
• cubicIn: Cubic ease-in
• cubicOut: Cubic ease-out
• cubicInOut: Cubic ease-in and ease-out
• sinusoidalIn: Sinusoidal ease-in
• sinusoidalOut: Sinusoidal ease-out
• sinusoidalInOut: Sinusoidal ease-in and ease-out
• exponentialIn: Exponential ease-in
• exponentialOut: Exponential ease-out
• exponentialInOut: Exponential ease-in and ease-out
• elasticIn: Elastic ease-in
• elasticOut: Elastic ease-out
• elasticInOut: Elastic ease-in and ease-out
• backIn: Back ease-in
• backOut: Back ease-out
• backInOut: Back ease-in and ease-out
• bounceIn: Bounce ease-in
• bounceOut: Bounce ease-out
• bounceInOut: Bounce ease-in and ease-out

Update Animation Configuration

When data changes, the chart triggers an update animation. You can configure it using properties like animationDurationUpdate and animationEasingUpdate:

option = {
  // Duration of the update animation
  animationDurationUpdate: 800,
  // Easing effect of the update animation
  animationEasingUpdate: 'cubicInOut',
  series: [
    {
      type: 'pie',
      data: [
        {value: 235, name: 'Video Ads'},
        {value: 274, name: 'Affiliate Ads'},
        {value: 310, name: 'Email Marketing'}
      ],
      // Update animation can be configured separately for the series
      animationDurationUpdate: function(idx) {
        return idx * 100;
      }
    }
  ]
};

Interactive Animation Configuration

When users interact with the chart (e.g., hovering or clicking), interactive animations are triggered. These animations can be configured using properties like emphasis and itemStyle:

option = {
  series: [
    {
      type: 'scatter',
      data: [[10, 20], [30, 40], [50, 60]],
      // Styles and animations in highlighted state
      emphasis: {
        itemStyle: {
          color: 'red',
          // Duration of the highlight animation
          transitionDuration: 300
        },
        // Scaling effect when highlighted
        scale: 1.2
      }
    }
  ]
};

Special Animation Effects

ECharts also provides special animation effects, such as ripple effects and trajectory animations:

option = {
  series: [
    {
      type: 'effectScatter',
      rippleEffect: {
        // Ripple animation configuration
        period: 4,  // Animation cycle
        scale: 2.5,  // Scaling ratio
        brushType: 'fill'  // Fill type
      },
      data: [[10, 20], [30, 40], [50, 60]]
    },
    {
      type: 'lines',
      effect: {
        show: true,
        // Trajectory animation configuration
        period: 3,  // Animation cycle
        trailLength: 0.7,  // Trajectory length
        symbol: 'arrow',  // Arrow shape
        symbolSize: 10  // Arrow size
      },
      data: [
        {
          coords: [[10, 20], [30, 40]]
        }
      ]
    }
  ]
};

Animation Threshold Control

For charts with large datasets, you can use animationThreshold to control whether animations are enabled. When the data volume exceeds the threshold, animations are automatically disabled to improve performance:

option = {
  // Disable animations when data volume exceeds 1000
  animationThreshold: 1000,
  series: [
    {
      type: 'bar',
      data: new Array(1500).fill(0).map(Math.random)
    }
  ]
};

Custom Animations

ECharts allows custom animations through customSeries. Here is a simple example of a custom animation:

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'),
            // Custom animation properties
            opacity: 0.5,
            shadowBlur: 10,
            shadowColor: api.visual('color')
          },
          // Animation configuration
          transition: ['shape', 'style'],
          enterFrom: {
            style: {
              opacity: 0
            },
            shape: {
              r: 0
            }
          }
        };
      },
      data: [
        [10, 20, 5],
        [30, 40, 8],
        [50, 60, 12]
      ]
    }
  ]
};

Animation Performance Optimization

For charts with large datasets, you can optimize animation performance in the following ways:

1. Disable unnecessary animations:

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

2. Reduce animation duration:

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

3. Use simple easing functions:

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

4. Render data in batches:

option = {
  series: [
    {
      type: 'bar',
      data: largeData,
      progressive: 400,  // Render in batches, 400 data points per batch
      progressiveThreshold: 1000  // Enable batch rendering when data volume exceeds 1000
    }
  ]
};

Animation Event Listening

ECharts provides animation-related events to monitor the start, end, and other states of animations:

myChart.on('animationstart', function(params) {
  console.log('Animation started:', params);
});

myChart.on('animationend', function(params) {
  console.log('Animation ended:', params);
});

myChart.on('animationupdate', function(params) {
  console.log('Animation updated:', params);
});

Multi-Chart Linked Animations

When multiple charts need to be linked, you can synchronize animations using the connect and group properties:

// Chart 1
const chart1 = echarts.init(document.getElementById('chart1'));
chart1.setOption({
  // Specify the group name
  group: 'animationGroup',
  animationDuration: 1000,
  series: [...]
});

// Chart 2
const chart2 = echarts.init(document.getElementById('chart2'));
chart2.setOption({
  // Specify the same group name
  group: 'animationGroup',
  animationDuration: 1000,
  series: [...]
});

// Connect the two charts
echarts.connect('animationGroup');