Echarts skill

Os gráficos do seu painel aparecem, acompanham o tamanho da tela e aguentam muitos dados, sem o Claude chutar opção da biblioteca.

por sentimony

instalações: 2.700
estrelas no GitHub: 6
No skills.sh desde: julho de 2026
Licença: MIT

Atualizada no GitHub em 25 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

sentimony
echarts
Os gráficos do seu painel aparecem, acompanham o tamanho da tela e aguentam muitos dados, sem o Claude chutar opção da biblioteca.Auditada2.700 instalações, grátis

O que ela faz

A skill guia o Claude no Apache ECharts, biblioteca de gráficos usada em painéis e relatórios na web. Antes de escrever, ele procura os gráficos que o projeto já tem e copia o jeito de criar, aplicar o tema e redimensionar. Num projeto ainda sem gráfico, usa o echarts-for-react no React e o vue-echarts no Vue.

Ela traz os defeitos mais comuns com a causa de cada um: gráfico em branco porque a caixa tinha tamanho zero, gráfico que não atualiza, tooltip cortado, tela lenta com milhares de pontos e memória crescendo ao trocar de página. Com dado grande, liga amostragem e desliga animação antes de partir pra WebGL.

Cobre tema e modo escuro registrados uma vez pra todos os gráficos, exportação do gráfico como imagem, gráfico em SVG gerado no servidor pra relatório e e-mail, e a migração pro ECharts 6. Também tem um roteiro pra auditar os gráficos de um painel que já existe.

Nas palavras de quem fez

You MUST use this when building, styling, debugging, or optimizing Apache ECharts charts in JavaScript, React, or Vue - setup, lifecycle, responsive resizing,…

sentimony, no SKILL.md

Quando usar

Montar o painel de vendas de um app ou SaaS com gráficos de linha e barra
Descobrir por que um gráfico aparece em branco ou não muda de tamanho
Deixar rápido um gráfico com milhares de pontos ou dados em tempo real
Aplicar modo escuro e a paleta da marca em todos os gráficos
Gerar o gráfico como imagem pra um relatório ou e-mail

Depois de instalar, é só pedir assim

Cria um gráfico de linha com o faturamento por dia usando ECharts no meu dashboard em React
O gráfico da aba de relatórios fica em branco quando abro a aba, descobre o porquê e corrige
Audita os gráficos ECharts desse painel e me diz o que está pesando a página

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketPassou
SnykPassou

Perguntas

Como instalar a Echarts no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Echarts, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O que a echarts skill precisa pra funcionar?

De um projeto em JavaScript, React ou Vue e de um gerenciador de pacotes (npm, pnpm, yarn ou bun). O ECharts é grátis e o Claude instala quando você pede. Não precisa de chave de API nem de conta paga.

Ela escolhe o tipo de gráfico certo pros meus dados?

Não. A própria skill avisa que não serve pra escolher entre pizza, barra ou linha, nem pra outras bibliotecas de gráfico. O papel dela é fazer o gráfico do ECharts funcionar bem.

Roda no Codex e no Antigravity?

Roda: é um SKILL.md com instruções e exemplos, sem depender de ferramenta exclusiva do Claude. Qualquer agente que lê o projeto e roda comandos consegue usar.

Levar essa skill

1x echartsR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/sentimony/skills

Aprenda a usar

Como aprender IA do zero sozinho: roteiro 7 dias
Por onde começar a estudar IA sozinho em 2026: a diferença entre usar IA pra entregar e construir modelos, e o roteiro prático de 7 dias.