MCP ECharts MCP — Casos de uso, Instalar & Demo ao vivo

Por que usar

Principais recursos

Mais de 15 ferramentas gráficas que abrangem a família ECharts
Suporte completo à sintaxe de ECharts – os agentes podem usar qualquer opção de série
Exportar PNG, SVG ou opção bruta JSON
Zero dependências de nuvem — renderização local
Armazenamento MinIO opcional para URLs fáceis de compartilhar

Demo ao vivo

Como fica na prática

mcp-echarts.replay ▶ pronto

0/0

Instalar

Escolha seu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

Cursor usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

Clique no ícone MCP Servers na barra lateral do Cline, depois "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "mcp-echarts",
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  ]
}

O Continue usa um array de objetos de servidor em vez de um map.

~/.config/zed/settings.json

{
  "context_servers": {
    "mcp-echarts": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "mcp-echarts"
        ]
      }
    }
  }
}

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

claude mcp add mcp-echarts -- npx -y mcp-echarts

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: MCP ECharts

Transforme uma tabela de números em um gráfico em uma chamada de ferramenta

👤 Analistas, PMs e engenheiros trabalhando no chat ⏱ ~5 min beginner

Quando usar: Você tem um conjunto de dados pequeno e deseja um visual sem abrir uma planilha.

Pré-requisitos

Nó 18+ — instalação nvm 18

Fluxo

Descreva o gráfico

Gráfico de barras de usuários ativos semanais: Seg 820, Ter 905, Quarta 1120, Qui 980, Sex 1340, Sábado 780, Dom 610. Dê o título 'WAU por dia'.✓ Copiado

→ O agente escolhe generate_bar_chart com rótulos e valores corretos do eixo x
Exportar o PNG

Exporte como PNG e salve-o em ~/charts/wau.png.✓ Copiado

→ Arquivo retornado; png_path no resultado da ferramenta

Resultado: Um gráfico que você pode inserir em uma apresentação ou documento sem sair do bate-papo.

Armadilhas

Solicitando um gráfico de pizza em um conjunto de dados com mais de 30 categorias — O agente deve sugerir barra/mapa de calor; force-o com 'usar gráfico de barras, a pizza é ilegível'

Combine com: filesystem

Obtenha a opção de ECharts brutos para colar em um painel React/Vue

👤 Desenvolvedores de front-end criando ferramentas internas ⏱ ~15 min intermediate

Quando usar: Você deseja que Claude esboce a configuração do gráfico para que você possa ajustá-la apenas em seu aplicativo.

Pré-requisitos

Um front-end usando ECharts — npm instalar echarts

Fluxo

Peça a opção JSON

Gere uma opção de ECharts para um gráfico de áreas empilhadas: três séries (direto, orgânico, pago), mensalmente para 2025.✓ Copiado

→ A forma de retorno é um objeto de opção com series[].type:'line', areaStyle e stack:'total'
Entre no seu componente

Agora emita-o como uma const TypeScript chamada exportOption.✓ Copiado

→ TS const pronto para colar

Resultado: Configuração de ECharts prontos para produção sem criar manualmente o padrão.

Armadilhas

Agente retornando PNG quando você queria a opção — Diga 'opção de retorno apenas JSON - sem renderização'

Combine com: antv-chart

Visualize um fluxo (funil, jornada, conversão) como um sankey

👤 Analistas de crescimento/produto ⏱ ~10 min beginner

Quando usar: Você precisa de um diagrama de fluxo para um deck e sankey é a ferramenta certa.

Fluxo

Descrever nós e fluxos

Sankey: Landing (1000) → Inscrição (420) → Ativado (310) → Pago (95). Mostrar porcentagens de desistência.✓ Copiado

→ Estrutura correta de nós/links; rótulos incluem as contagens
Exportar SVG

Exporte SVG para que seja dimensionado no Keynote.✓ Copiado

→ Caminho SVG salvo

Resultado: Um sankey nítido para uma revisão de funil, sem Figma.

Combine com: markmap-mcp-server

Publique gráficos gerados no MinIO para compartilhamento

👤 Equipes executando um armazenamento de objetos auto-hospedado ⏱ ~20 min intermediate

Quando usar: Você deseja URLs reproduzíveis para gráficos aos quais fará referência no Slack/Notion.

Pré-requisitos

Endpoint MinIO + credenciais — Provisione MINIO_* env vars na configuração do cliente MCP

Fluxo

Configurar ambiente

Defina MINIO_ENDPOINT, MINIO_ACCESS_KEY, MINIO_SECRET_KEY, MINIO_BUCKET_NAME na configuração do MCP.✓ Copiado

→ Relatórios do servidor MinIO habilitado na inicialização
Gerar e carregar

Gráfico da receita por região; faça upload para MinIO e me forneça o URL.✓ Copiado

→ URL público (ou pré-assinado) retornado

Resultado: Links estáveis para gráficos que não quebram após o bate-papo.

Armadilhas

Vazamento de credenciais na configuração — Use um usuário IAM dedicado com escopo de bucket, não a chave raiz MinIO

Combine com: s3-like MCPs

Combinações

Combine com outros MCPs para 10× de alavancagem

mcp-echarts + filesystem

Leia um CSV, extraia colunas e faça um gráfico delas

Leia data/sales.csv, faça um gráfico da coluna 'receita' por 'região' como um gráfico de barras.✓ Copiado

mcp-echarts + bigquery-server

Execute o SQL e faça um gráfico do resultado

Consultar os últimos 30 dias de inscrições do BigQuery; plotar diariamente conta como uma linha.✓ Copiado

mcp-echarts + antv-chart

Escolha entre ECharts e AntV por caso de uso

Para um painel para o público chinês, prefira ECharts; para data-ink-minimal escolha AntV.✓ Copiado

Ferramentas

O que este MCP expõe

Ferramenta	Entradas	Quando chamar
generate_line_chart	xAxis: array, series: array<number[]>, title?: str	Tendência sobre um eixo ordenado (tempo, posição)
generate_bar_chart	categories, values, stack?: bool	Compare categorias discretas
generate_pie_chart	items: [{name, value}]	Participação no total com ≤8 fatias
generate_scatter_chart	points: [[x,y]]	Visualizações de correlação ou agrupamento
generate_heatmap	matrix: number[][], rows, cols	Matrizes de densidade ou confusão
generate_sankey	nodes, links	Fluxo/funil entre estados discretos
generate_echarts_option	free-form option object	Quando você deseja a sintaxe completa dos ECharts, não um gráfico modelo

Custo e limites

O que custa rodar

Cota de API: Nenhum – renderização local
Tokens por chamada: Pequeno: objeto de opção de entrada, caminho de saída
Monetário: Livre
Dica: Peça a opção JSON quando for reutilizá-lo muitas vezes; peça PNG para ações únicas.

Segurança

Permissões, segredos, alcance

Armazenamento de credenciais: Credidades MinIO apenas em env vars. Nenhum armazenamento de seus dados no servidor além do gráfico renderizado.

Saída de dados: Nenhuma saída por padrão. A exportação do MinIO é carregada apenas para o endpoint configurado.

As imagens do gráfico podem conter dados confidenciais. Revise antes de publicar em um bucket MinIO compartilhado.

Solução de problemas

Erros comuns e correções

A renderização PNG está em branco

Certifique-se de que os tipos de dados da série correspondam (números, não strings) e que o comprimento do eixo x seja igual ao comprimento da série.

Verificar: Inspect the option JSON; types should be number arrays

Falha no upload do MinIO: incompatibilidade de assinatura

Verifique MINIO_USE_SSL, MINIO_PORT e se as chaves de acesso/secretas pertencem à mesma instância MinIO.

Verificar: mc admin info myminio/

Fontes ausentes/caracteres CJK como caixas

Instale uma fonte compatível com CJK no ambiente que executa o servidor MCP (por exemplo, Noto Sans CJK).

Verificar: fc-list | grep -i cjk

Alternativas

MCP ECharts vs. outros

Alternativa	Quando usar	Troca
antv-chart	Você prefere os padrões opinativos da AntV e os documentos chineses	Vocabulário gráfico menor
markmap-mcp-server	Você precisa de uma hierarquia, não de gráficos estatísticos	Classe de saída diferente
mermaid-skill	Você precisa de fluxogramas/diagramas de sequência, não de gráficos de dados	Diagramas ≠ gráficos

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills