MCP ECharts MCP — Cas d'usage, Installer & Démo en direct

Pourquoi l'utiliser

Fonctionnalités clés

Plus de 15 outils graphiques couvrant la famille ECharts
Prise en charge complète de la syntaxe ECharts : les agents peuvent utiliser n'importe quelle option de série
Exporter PNG, SVG ou option brute JSON
Aucune dépendance au cloud : rendu local
Stockage MinIO en option pour les URL conviviales

Démo en direct

Aperçu en pratique

mcp-echarts.replay ▶ prêt

0/0

Installer

Choisissez votre client

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

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

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

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

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

Cursor utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

VS Code → Cline → MCP Servers → Edit

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

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.continue/config.json

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

Continue utilise un tableau d'objets serveur plutôt qu'une map.

~/.config/zed/settings.json

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

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

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

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : MCP ECharts

Transformez un tableau de nombres en graphique en un seul appel d'outil

👤 Analystes, PM et ingénieurs travaillant dans le chat ⏱ ~5 min beginner

Quand l'utiliser : Vous disposez d’un petit ensemble de données et souhaitez un visuel sans ouvrir de feuille de calcul.

Prérequis

Nœud 18+ — nvm installer 18

Déroulement

Décrire le graphique

Graphique à barres des utilisateurs actifs hebdomadaires : lundi 820, mardi 905, mercredi 11h20, jeudi 980, vendredi 13h40, samedi 780, dimanche 610. Intitulez-le « WAU par jour ».✓ Copié

→ L'agent choisit generate_bar_chart avec les étiquettes et valeurs correctes de l'axe X
Exporter le PNG

Exportez au format PNG et enregistrez-le dans ~/charts/wau.png.✓ Copié

→ Fichier renvoyé ; png_path dans le résultat de l'outil

Résultat : Un graphique que vous pouvez déposer dans un deck ou un document sans quitter le chat.

Pièges

Demander un diagramme circulaire sur un ensemble de données comportant plus de 30 catégories — L'agent devrait plutôt suggérer une barre/une carte thermique ; forcez-le avec "utiliser un graphique à barres, le diagramme est illisible"

Combiner avec : filesystem

Obtenez l'option ECharts brutes à coller dans un tableau de bord React/Vue

👤 Les développeurs frontend créent des outils internes ⏱ ~15 min intermediate

Quand l'utiliser : Vous souhaitez que Claude rédige la configuration du graphique afin de la modifier uniquement dans votre application.

Prérequis

Une interface utilisant ECharts — npm installer des graphiques

Déroulement

Demandez l'option JSON

Générez une option ECharts pour un graphique en aires empilées : trois séries (directes, organiques, payantes), mensuellement pour 2025.✓ Copié

→ La forme de retour est un objet d'option avec series[].type:'line', areaStyle et stack:'total'
Accédez à votre composant

Émettez-le maintenant sous forme de const TypeScript nommé exportOption.✓ Copié

→ TS const prêt à coller

Résultat : Configuration ECharts prête pour la production sans fabriquer manuellement le passe-partout.

Pièges

Agent renvoyant PNG lorsque vous vouliez l'option — Dites « option de retour JSON uniquement – pas de rendu »

Combiner avec : antv-chart

Visualisez un flux (entonnoir, parcours, conversion) comme un sankey

👤 Analystes de croissance/produits ⏱ ~10 min beginner

Quand l'utiliser : Vous avez besoin d'un organigramme pour une terrasse et sankey est le bon outil.

Déroulement

Décrire les nœuds et les flux

Sankey : Atterrissage (1000) → Inscription (420) → Activé (310) → Payant (95). Afficher les pourcentages de dépôt.✓ Copié

→ Structure correcte des nœuds/liens ; les étiquettes incluent les comptes
Exporter SVG

Exportez SVG pour qu’il évolue dans Keynote.✓ Copié

→ Chemin SVG enregistré

Résultat : Un sankey croustillant pour une revue en entonnoir, sans Figma.

Combiner avec : markmap-mcp-server

Publier les graphiques générés sur MinIO pour les partager

👤 Équipes gérant un magasin d'objets auto-hébergé ⏱ ~20 min intermediate

Quand l'utiliser : Vous voulez des URL reproductibles pour les graphiques que vous référencerez à partir de Slack/Notion.

Prérequis

Point de terminaison MinIO + informations d'identification — Provisionnez les variables d'environnement MINIO_* dans la configuration de votre client MCP

Déroulement

Configurer l'environnement

Définissez MINIO_ENDPOINT, MINIO_ACCESS_KEY, MINIO_SECRET_KEY, MINIO_BUCKET_NAME dans la configuration MCP.✓ Copié

→ Le serveur signale que MinIO est activé au démarrage
Générer et télécharger

Tracez les revenus par région ; téléchargez sur MinIO et donnez-moi l'URL.✓ Copié

→ URL publique (ou présignée) renvoyée

Résultat : Liens stables pour les graphiques qui ne se briseront pas après le chat.

Pièges

Fuite des informations d'identification dans la configuration — Utilisez un utilisateur IAM dédié à l'échelle du bucket, et non la clé racine MinIO

Combiner avec : s3-like MCPs

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

mcp-echarts + filesystem

Lire un CSV, extraire des colonnes, les tracer

Lisez data/sales.csv, tracez la colonne « revenu » par « région » sous forme de graphique à barres.✓ Copié

mcp-echarts + bigquery-server

Exécutez SQL puis tracez le résultat

Interrogez les 30 derniers jours d'inscription auprès de BigQuery ; le tracé quotidien compte comme une ligne.✓ Copié

mcp-echarts + antv-chart

Choisissez entre ECharts et AntV par cas d'utilisation

Pour un tableau de bord destiné au public chinois, préférez ECharts ; pour un minimum d'encre de données, choisissez AntV.✓ Copié

Outils

Ce que ce MCP expose

Outil	Entrées	Quand appeler
generate_line_chart	xAxis: array, series: array<number[]>, title?: str	Tendance sur un axe ordonné (temps, position)
generate_bar_chart	categories, values, stack?: bool	Comparez les catégories discrètes
generate_pie_chart	items: [{name, value}]	Part du total avec ≤8 tranches
generate_scatter_chart	points: [[x,y]]	Visualisations de corrélation ou de clustering
generate_heatmap	matrix: number[][], rows, cols	Matrices de densité ou de confusion
generate_sankey	nodes, links	Flux/entonnoir entre états discrets
generate_echarts_option	free-form option object	Lorsque vous souhaitez une syntaxe ECharts complète, pas un graphique basé sur un modèle

Coût et limites

Coût d'exécution

Quota d'API: Aucun — rendu local
Tokens par appel: Petit : objet d'option entrant, chemin de sortie
Monétaire: Gratuite
Astuce: Demandez l'option JSON lorsque vous la réutiliserez plusieurs fois ; demandez PNG pour les actions ponctuelles.

Sécurité

Permissions, secrets, portée

Stockage des identifiants : Crédits MinIO dans les variables d'environnement uniquement. Aucun stockage côté serveur de vos données au-delà du graphique rendu.

Sortie de données : Aucune sortie par défaut. Les exportations MinIO sont téléchargées vers votre point de terminaison configuré uniquement.

Les images graphiques peuvent contenir des données sensibles. Vérifiez avant de publier sur un compartiment MinIO partagé.

Dépannage

Erreurs courantes et correctifs

Le rendu PNG est vide

Assurez-vous que les types de données de série correspondent (nombres, pas de chaînes) et que la longueur de l'axe X est égale à la longueur de la série.

Vérifier : Inspect the option JSON; types should be number arrays

Échec du téléchargement MinIO : incompatibilité de signature

Vérifiez MINIO_USE_SSL, MINIO_PORT et que les clés d'accès/secrètes appartiennent à la même instance MinIO.

Vérifier : mc admin info myminio/

Polices manquantes/caractères CJK sous forme de cases

Installez une police compatible CJK dans l'environnement exécutant le serveur MCP (par exemple, Noto Sans CJK).

Vérifier : fc-list | grep -i cjk

Alternatives

MCP ECharts vs autres

Alternative	Quand l'utiliser	Compromis
antv-chart	Vous préférez les valeurs par défaut opiniâtres d'AntV et les documents chinois	Vocabulaire de graphique plus petit
markmap-mcp-server	Vous avez besoin d'une hiérarchie, pas de graphiques statistiques	Classe de sortie différente
mermaid-skill	Vous avez besoin d'organigrammes/diagrammes de séquence, pas de diagrammes de données	Diagrammes ≠ graphiques

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills