echarts

Create powerful interactive charts with Apache ECharts - balanced ease-of-use and customization

5 stars

Best use case

echarts is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Create powerful interactive charts with Apache ECharts - balanced ease-of-use and customization

Teams using echarts should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/echarts/SKILL.md --create-dirs "https://raw.githubusercontent.com/vamseeachanta/workspace-hub/main/.agents/skills/data/visualization/echarts/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/echarts/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How echarts Compares

Feature / AgentechartsStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Create powerful interactive charts with Apache ECharts - balanced ease-of-use and customization

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Echarts

## When to Use This Skill

Use ECharts when you need:
- **Balance of ease and power** - Easy to start, powerful when needed
- **Broad chart variety** - 20+ chart types including geo maps
- **TypeScript support** - Full type definitions
- **Mobile responsiveness** - Built-in responsive design
- **Large datasets** - Efficient rendering of 100k+ points
- **Chinese/International** - Excellent i18n support

**Avoid when:**
- Ultimate customization needed (use D3.js)
- Only need simple charts (use Chart.js)
- 3D scientific visualizations (use Plotly)

## Resources

- **Official Docs**: https://echarts.apache.org/en/index.html
- **Examples**: https://echarts.apache.org/examples/en/index.html
- **GitHub**: https://github.com/apache/echarts
- **Community**: https://github.com/ecomfe/awesome-echarts

## Sub-Skills

- [1. Basic Line Chart (+2)](1-basic-line-chart/SKILL.md)
- [1. Use Responsive Design (+3)](1-use-responsive-design/SKILL.md)
- [With React (+1)](with-react/SKILL.md)

## Sub-Skills

- [Example 1: Loading Data from CSV (+5)](example-1-loading-data-from-csv/SKILL.md)
- [Basic Charts (+4)](basic-charts/SKILL.md)
- [TypeScript Support](typescript-support/SKILL.md)
- [CDN (+1)](cdn/SKILL.md)
- [Animation Configuration (+2)](animation-configuration/SKILL.md)
- [Event Handling](event-handling/SKILL.md)
- [Performance Tips](performance-tips/SKILL.md)

Related Skills

highcharts

5
from vamseeachanta/workspace-hub

Create enterprise-grade interactive charts with Highcharts including stock and map visualizations

echarts-typescript-support

5
from vamseeachanta/workspace-hub

Sub-skill of echarts: TypeScript Support.

echarts-example-1-loading-data-from-csv

5
from vamseeachanta/workspace-hub

Sub-skill of echarts: Example 1: Loading Data from CSV (+5).

echarts-event-handling

5
from vamseeachanta/workspace-hub

Sub-skill of echarts: Event Handling.

echarts-cdn

5
from vamseeachanta/workspace-hub

Sub-skill of echarts: CDN (+1).

echarts-basic-charts

5
from vamseeachanta/workspace-hub

Sub-skill of echarts: Basic Charts (+4).

echarts-animation-configuration

5
from vamseeachanta/workspace-hub

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

echarts-1-use-responsive-design

5
from vamseeachanta/workspace-hub

Sub-skill of echarts: 1. Use Responsive Design (+3).

test-oversized-skill

5
from vamseeachanta/workspace-hub

A test fixture skill that exceeds 200 lines with multiple H2/H3 sections for split testing.

interactive-report-generator

5
from vamseeachanta/workspace-hub

Generate interactive HTML reports with Plotly visualizations from data analysis results. Supports dashboards, charts, and professional styling.

data-validation-reporter

5
from vamseeachanta/workspace-hub

Generate interactive validation reports with quality scoring, missing data analysis, and type checking. Combines Pandas validation, Plotly visualization, and YAML configuration for comprehensive data quality reporting.

claude-reflection

5
from vamseeachanta/workspace-hub

Self-improvement and learning skill that helps Claude learn from user interactions, corrections, and preferences