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

Por qué usarlo

Características clave

Más de 15 herramientas de gráficos que cubren la familia ECharts
Soporte completo de sintaxis de ECharts: los agentes pueden usar cualquier opción de serie
Exportar PNG, SVG o JSON sin formato
Cero dependencias de la nube: renderizado local
Almacenamiento MinIO opcional para URL fáciles de compartir

Demo en vivo

Cómo se ve en la práctica

mcp-echarts.replay ▶ listo

0/0

Instalar

Elige tu 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"
      ]
    }
  }
}

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

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

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

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

VS Code → Cline → MCP Servers → Edit

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

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

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

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json

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

Añádelo a context_servers. Zed recarga en caliente al guardar.

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

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: MCP ECharts

Convierta una tabla de números en un gráfico con una sola llamada de herramienta

👤 Analistas, PM e ingenieros trabajando en el chat ⏱ ~5 min beginner

Cuándo usarlo: Tiene un conjunto de datos pequeño y desea un objeto visual sin abrir una hoja de cálculo.

Requisitos previos

Nodo 18+ — instalación nvm 18

Flujo

Describe el gráfico

Gráfico de barras de usuarios activos semanales: lunes 820, martes 905, miércoles 1120, jueves 980, viernes 1340, sábado 780, domingo 610. Títelo "WAU por día".✓ Copiado

→ El agente selecciona generate_bar_chart con etiquetas y valores correctos del eje x
Exportar el PNG

Exporte como PNG y guárdelo en ~/charts/wau.png.✓ Copiado

→ Archivo devuelto; png_path en el resultado de la herramienta

Resultado: Un gráfico que puedes colocar en una plataforma o documento sin salir del chat.

Errores comunes

Solicitar un gráfico circular en un conjunto de datos con más de 30 categorías — El agente debería sugerir una barra/mapa de calor en su lugar; forzarlo con 'usar gráfico de barras, el pastel es ilegible'

Combinar con: filesystem

Obtenga la opción ECharts sin formato para pegar en un panel de React/Vue

👤 Desarrolladores frontend que crean herramientas internas ⏱ ~15 min intermediate

Cuándo usarlo: Quieres que Claude redacte la configuración del gráfico para que solo la modifiques en tu aplicación.

Requisitos previos

Una interfaz que utiliza ECharts — npm instala echarts

Flujo

Pregunta por la opción JSON

Genere una opción ECharts para un gráfico de áreas apiladas: tres series (directa, orgánica, paga), mensual para 2025.✓ Copiado

→ La forma de retorno es un objeto de opción con serie[].tipo:'línea', estiloárea y pila:'total'
Sumérgete en tu componente

Ahora emítelo como una constante de TypeScript llamada exportOption.✓ Copiado

→ TS constante listo para pegar

Resultado: Configuración de ECharts lista para producción sin necesidad de crear manualmente el modelo estándar.

Errores comunes

El agente devolvió PNG cuando quería la opción — Diga "opción de devolución solo JSON, sin renderizado"

Combinar con: antv-chart

Visualice un flujo (embudo, viaje, conversión) como un sankey

👤 Analistas de crecimiento/producto ⏱ ~10 min beginner

Cuándo usarlo: Necesita un diagrama de flujo para una plataforma y sankey es la herramienta adecuada.

Flujo

Describir nodos y flujos.

Sankey: Aterrizaje (1000) → Registro (420) → Activado (310) → Pagado (95). Mostrar porcentajes de abandono.✓ Copiado

→ Estructura correcta de nodo/enlace; Las etiquetas incluyen los recuentos.
Exportar SVG

Exporta SVG para que se escale en Keynote.✓ Copiado

→ Ruta SVG guardada

Resultado: Un sankey nítido para una revisión de embudo, sin Figma.

Combinar con: markmap-mcp-server

Publicar gráficos generados en MinIO para compartirlos

👤 Equipos que ejecutan un almacén de objetos autohospedado ⏱ ~20 min intermediate

Cuándo usarlo: Quiere URL reproducibles para los gráficos a los que hará referencia desde Slack/Notion.

Requisitos previos

Punto final MinIO + credenciales — Aprovisione MINIO_* env vars en la configuración de su cliente MCP

Flujo

Configurar el entorno

Configure MINIO_ENDPOINT, MINIO_ACCESS_KEY, MINIO_SECRET_KEY, MINIO_BUCKET_NAME en la configuración de MCP.✓ Copiado

→ El servidor informa que MinIO está habilitado al inicio
Generar y cargar

Graficar los ingresos por región; Súbelo a MinIO y dame la URL.✓ Copiado

→ URL pública (o prefirmada) devuelta

Resultado: Enlaces estables para gráficos que no se romperán después del chat.

Errores comunes

Credenciales filtradas en la configuración — Utilice un usuario de IAM dedicado al ámbito del depósito, no la clave raíz de MinIO

Combinar con: s3-like MCPs

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

mcp-echarts + filesystem

Leer un CSV, extraer columnas, graficarlas

Lea data/sales.csv y represente la columna "ingresos" por "región" como un gráfico de barras.✓ Copiado

mcp-echarts + bigquery-server

Ejecute SQL y luego registre el resultado

Consulta los últimos 30 días de registros de BigQuery; trazar diariamente cuenta como una línea.✓ Copiado

mcp-echarts + antv-chart

Elija entre ECharts y AntV según el caso de uso

Para un panel de audiencia china, prefiera ECharts; para datos con tinta mínima, elija AntV.✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar
generate_line_chart	xAxis: array, series: array<number[]>, title?: str	Tendencia sobre un eje ordenado (tiempo, posición)
generate_bar_chart	categories, values, stack?: bool	Comparar categorías discretas
generate_pie_chart	items: [{name, value}]	Participación del total con ≤8 porciones
generate_scatter_chart	points: [[x,y]]	Visualizaciones de correlación o agrupación
generate_heatmap	matrix: number[][], rows, cols	Matrices de densidad o confusión
generate_sankey	nodes, links	Flujo/embudo entre estados discretos
generate_echarts_option	free-form option object	Cuando desee la sintaxis completa de ECharts, no un gráfico con plantilla

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: Ninguna - render local
Tokens por llamada: Pequeño: objeto de opción dentro, ruta de salida
Monetario: Gratis
Consejo: Pregunta por la opción JSON cuando la vayas a reutilizar muchas veces; Pregunte por PNG para acciones únicas.

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: Créditos MinIO solo en variables env. No hay almacenamiento del lado del servidor de sus datos más allá del gráfico representado.

Salida de datos: No hay salida por defecto. MinIO exporta cargas solo a su punto final configurado.

Las imágenes de gráficos pueden contener datos confidenciales. Revise antes de publicar en un depósito MinIO compartido.

Resolución de problemas

Errores comunes y soluciones

El renderizado PNG está en blanco

Asegúrese de que los tipos de datos de la serie coincidan (números, no cadenas) y que la longitud del eje x sea igual a la longitud de la serie.

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

Error en la carga de MinIO: la firma no coincide

Verifique MINIO_USE_SSL, MINIO_PORT y que las claves de acceso/secretas pertenezcan a la misma instancia de MinIO.

Verificar: mc admin info myminio/

Faltan fuentes/caracteres CJK como cuadros

Instale una fuente compatible con CJK en el entorno que ejecuta el servidor MCP (por ejemplo, Noto Sans CJK).

Verificar: fc-list | grep -i cjk

Alternativas

MCP ECharts vs otros

Alternativa	Cuándo usarla	Contrapartida
antv-chart	Prefieres los valores predeterminados obstinados de AntV y los documentos chinos	Vocabulario de gráficos más pequeño
markmap-mcp-server	Necesitas una jerarquía, no gráficos estadísticos	Clase de salida diferente
mermaid-skill	Necesita diagramas de flujo/diagramas de secuencia, no diagramas de datos	Diagramas ≠ gráficos

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills