# Echarts Animation Configuration

> Sub-skill of echarts: Animation Configuration (+2).

- Skill: `vamseeachanta/echarts-animation-configuration` (Agent Skill)
- Install (CLI): `npx skillmds@latest add vamseeachanta/echarts-animation-configuration`
- Raw SKILL.md: https://api.skillmd.com/api/skills/vamseeachanta/echarts-animation-configuration/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: vamseeachanta (https://skillmd.com/u/vamseeachanta)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/vamseeachanta/echarts-animation-configuration

---


# Animation Configuration (+2)

## Animation Configuration


```javascript
option = {
  animation: true,
  animationDuration: 1000,
  animationEasing: 'cubicOut',
  animationDelay: function (idx) {
    return idx * 50;
  }
};
```

## DataZoom (Zoom/Pan)


```javascript
option = {
  dataZoom: [
    {
      type: 'inside', // Mouse wheel zoom
      start: 0,
      end: 100
    },
    {
      type: 'slider', // Slider zoom

*See sub-skills for full details.*

## Brush Selection


```javascript
option = {
  brush: {
    toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
    xAxisIndex: 0
  },
  // ... rest of option
};

myChart.on('brushSelected', function (params) {
  var brushComponent = params.batch[0];
  var selected = brushComponent.selected[0].dataIndex;
  console.log('Selected data indices:', selected);
});
```