/ ディレクトリ / プレイグラウンド / MCP ECharts
● コミュニティ hustcc ⚡ 即起動

MCP ECharts

作者 hustcc · hustcc/mcp-echarts

MCP 経由の ECharts — エージェントは適切なチャート (折れ線、棒、円、散布図、ヒートマップ、サンキー、レーダーなど) を選択し、PNG/SVG または生のオプション オブジェクトを返します。

hustcc/mcp-echarts は、MCP サーバーの背後で Apache EChart をラップします。 15 を超えるチャート ツールは、完全な ECharts 構文パススルーにより、標準的な ECharts ファミリ (折れ線、棒グラフ、面グラフ、円グラフ、散布図、レーダー、ヒートマップ、サンキー、ファンネル、ツリーマップ、サンバーストなど) をカバーします。 ローカルでレンダリング (ゼロクラウド)、PNG / SVG にエクスポート、または生の ECharts option オブジェクトを返して、それを独自の ECharts インスタンスに貼り付けることができます。 オプションの MinIO 統合により、生成されたイメージが共有のためにオブジェクト ストレージにアップロードされます。

なぜ使うのか

主な機能

ライブデモ

実際の動作

mcp-echarts.replay ▶ 準備完了
0/0

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "mcp-echarts",
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json
{
  "context_servers": {
    "mcp-echarts": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "mcp-echarts"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

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

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方: MCP ECharts

1 回のツール呼び出しで数値表をグラフに変換します

👤 チャットで作業するアナリスト、PM、エンジニア ⏱ ~5 min beginner

使うタイミング: データセットが小さく、スプレッドシートを開かずにビジュアルを表示したいとします。

前提条件
  • ノード18+ — nvm インストール 18
フロー
  1. チャートの説明
    週間アクティブ ユーザーの棒グラフ: 月 820、火 905、水 1120、木 980、金 1340、土 780、日 610。タイトルを「WAU by day」とします。✓ コピーしました
    → エージェントは正しい X 軸ラベルと値を含むgenerate_bar_chartを選択します
  2. PNG をエクスポートする
    PNG としてエクスポートし、~/charts/wau.png に保存します。✓ コピーしました
    → ファイルが返されました。 ツール結果の png_path

結果: チャットを終了せずにデッキまたはドキュメントにドロップできるチャート。

注意点
  • 30 以上のカテゴリを含むデータセットの円グラフを要求する — エージェントは代わりにバー/ヒートマップを提案する必要があります。 「棒グラフを使用してください。円は読めません」で強制的に実行します
組み合わせ: filesystem

React/Vue ダッシュボードに貼り付ける生の ECharts オプションを取得します

👤 内部ツールを構築するフロントエンド開発者 ⏱ ~15 min intermediate

使うタイミング: クロードにチャート構成の下書きを作成してもらい、アプリ内でのみ調整できるようにしたいとします。

前提条件
  • EChartsを使用したフロントエンド — npm インストール echarts
フロー
  1. オプション JSON を要求する
    積み上げ面グラフの ECharts オプションを生成します: 3 シリーズ (直接、オーガニック、有料)、2025 年の月次。✓ コピーしました
    → 返される形状は、series[].type:'line'、areaStyle、stack:'total' のオプション オブジェクトです。
  2. コンポーネントにドロップします
    次に、exportOption という名前の TypeScript const として出力します。✓ コピーしました
    → TS const を貼り付ける準備ができました

結果: ボイラープレートを手作りすることなく、本番環境に対応した ECharts 構成を実現します。

注意点
  • オプションが必要なときにエージェントが PNG を返す — 「オプション JSON のみを返す - レンダリングなし」と言います
組み合わせ: antv-chart

フロー (ファネル、ジャーニー、コンバージョン) をサンキーとして視覚化する

👤 成長/製品アナリスト ⏱ ~10 min beginner

使うタイミング: デッキのフロー図が必要です。sankey は適切なツールです。

フロー
  1. ノードとフローの説明
    サンキー: ランディング (1000) → サインアップ (420) → アクティブ化 (310) → 支払い済み (95)。 ドロップオフ率を表示します。✓ コピーしました
    → 正しいノード/リンク構造。 ラベルにはカウントが含まれます
  2. SVGのエクスポート
    Keynote で拡大縮小できるように SVG をエクスポートします。✓ コピーしました
    → SVGパスが保存されました

結果: Figma なしでファネル レビュー用のサクサクしたサンキー。

組み合わせ: markmap-mcp-server

生成されたチャートを MinIO に公開して共有します

👤 セルフホスト型オブジェクト ストアを実行しているチーム ⏱ ~20 min intermediate

使うタイミング: Slack/Notion から参照するグラフの再現可能な URL が必要です。

前提条件
  • MinIO エンドポイント + 認証情報 — MCP クライアント構成で MINIO_* 環境変数をプロビジョニングします
フロー
  1. 環境の構成
    MCP 構成で MINIO_ENDPOINT、MINIO_ACCESS_KEY、MINIO_SECRET_KEY、MINIO_BUCKET_NAME を設定します。✓ コピーしました
    → サーバーは起動時に MinIO が有効であることを報告します
  2. 生成してアップロードする
    地域ごとの収益をグラフ化します。 MinIO にアップロードして URL を教えてください。✓ コピーしました
    → パブリック (または署名付き) URL が返されました

結果: チャットロール後に壊れないチャートの安定したリンク。

注意点
  • 構成内の認証情報の漏洩 — MinIO ルート キーではなく、バケット スコープの専用 IAM ユーザーを使用する
組み合わせ: s3-like MCPs

組み合わせ

他のMCPと組み合わせて10倍の力を

mcp-echarts + filesystem

CSV を読み取り、列を抽出し、グラフ化します。

data/sales.csv を読み取り、「収益」列を「地域」ごとに棒グラフとしてグラフ化します。✓ コピーしました
mcp-echarts + bigquery-server

SQLを実行して結果をグラフ化する

BigQuery から過去 30 日間のサインアップをクエリします。 毎日のカウントを線としてプロットします。✓ コピーしました
mcp-echarts + antv-chart

ユースケースに応じて ECharts と AntV のどちらかを選択してください

中国人向けのダッシュボードには ECharts をお勧めします。 データインク最小限の場合は AntV を選択します。✓ コピーしました

ツール

このMCPが提供する機能

ツール入力呼び出すタイミングコスト
generate_line_chart xAxis: array, series: array<number[]>, title?: str 順序付けされた軸 (時間、位置) のトレンド 0
generate_bar_chart categories, values, stack?: bool 個別のカテゴリを比較する 0
generate_pie_chart items: [{name, value}] スライスが 8 個以下の合計シェア 0
generate_scatter_chart points: [[x,y]] 相関またはクラスタリングの視覚化 0
generate_heatmap matrix: number[][], rows, cols 密度行列または混同行列 0
generate_sankey nodes, links 離散状態間のフロー/ファネル 0
generate_echarts_option free-form option object テンプレート化されたグラフではなく、完全な ECharts 構文が必要な場合 0

コストと制限

運用コスト

APIクォータ
なし - ローカルレンダリング
呼び出しあたりのトークン
小: オプション オブジェクトが入力、パスが出力
金額
無料
ヒント
JSON を何度も再利用する場合は、オプション JSON を要求してください。 一回限りの株式については PNG を要求してください。

セキュリティ

権限、シークレット、影響範囲

認証情報の保管: 環境変数のみの MinIO 認証。 レンダリングされたグラフ以外のデータはサーバー側に保存されません。
データ送信先: デフォルトでは出力はありません。 MinIO エクスポートは、構成されたエンドポイントにのみアップロードします。

トラブルシューティング

よくあるエラーと対処法

PNG レンダリングが空白です

系列のデータ型が一致し (文字列ではなく数値)、x 軸の長さが系列の長さと等しいことを確認します。

確認: Inspect the option JSON; types should be number arrays
MinIO のアップロードに失敗しました: 署名が一致しません

MINIO_USE_SSL、MINIO_PORT、およびアクセス/秘密キーが同じ MinIO インスタンスに属していることを確認してください。

確認: mc admin info myminio/
フォントが見つからない / CJK 文字がボックスとして表示される

MCP サーバー (Noto Sans CJK など) を実行している環境に CJK 対応フォントをインストールします。

確認: fc-list | grep -i cjk

代替案

MCP ECharts 他との比較

代替案代わりに使う場面トレードオフ
antv-chartAntV の独断的なデフォルトと中国語のドキュメントを好むチャートの語彙が少ない
markmap-mcp-server統計グラフではなく階層が必要です異なる出力クラス
mermaid-skillデータチャートではなく、フローチャート/シーケンス図が必要です図≠チャート

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る