Echarts MCP

🚀 📊 ECharts MCP Server

このModel Context Protocol (MCP)サーバーは、EChartsの設定から美しいグラフ画像を生成します。

🚀 クイックスタート

このサーバーを使用することで、EChartsの設定から高品質なグラフ画像を生成できます。AIアシスタントとの統合も容易です。

✨ 主な機能

• 🎨 EChartsの設定から高品質なグラフ画像を生成します。
• 🖼️ 様々なグラフタイプ（棒グラフ、折れ線グラフ、円グラフ、散布図など）をサポートします。
• 📐 グラフの寸法（幅/高さ）をカスタマイズできます。
• 🎯 MCPを介してAIアシスタントと簡単に統合できます。

📦 インストール

設定

.cursor/mcp.json

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

ローカル開発

ソースから実行する場合は、以下の手順を実行します。

# リポジトリをクローンする
git clone https://github.com/w2xi/echarts-mcp.git
cd echarts-mcp

# 依存関係をインストールする
npm install

# サーバーを起動する
npm start

次に、MCPクライアントを設定します。

{
  "mcpServers": {
    "echarts-mcp": {
      "command": "node",
      "args": ["/path/to/echarts-mcp/cli.js"],
      "env": {}
    }
  }
}

💻 使用例

基本的な使用法

設定が完了したら、AIアシスタントでグラフ生成を要求することで、MCPサーバーを使用できます。

例のプロンプト

• "過去6か月間の売上データを示す棒グラフを生成してください"
• "市場シェアの分布を表示する円グラフを作成してください"
• "時間経過に伴う温度データの折れ線グラフを作成してください"

ツールのパラメータ

• width: グラフの幅（ピクセル単位、例: 1000）
• height: グラフの高さ（ピクセル単位、例: 500）
• echarts: EChartsの設定オブジェクトを文字列として指定

例のECharts設定

{
  backgroundColor: '#fff',
  title: {
    text: 'Monthly Sales Data'
  },
  tooltip: {},
  legend: {
    data: ['Sales']
  },
  xAxis: {
    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  },
  yAxis: {},
  series: [{
    name: 'Sales',
    type: 'bar',
    data: [120, 200, 150, 80, 70, 110]
  }]
}

📚 ドキュメント

開発

スクリプト

• npm start - MCPサーバーを起動します。
• npm test - テストグラフを実行します。
• npm run inspect - デバッグツールでMCPサーバーを検査します。

依存関係

• ECharts: グラフ生成ライブラリ
• Canvas: サーバーサイドのキャンバスレンダリング
• MCP SDK: Model Context Protocolの実装
• Zod: スキーマ検証

🤝 コントリビューション

コントリビューションは大歓迎です！ご自由にPull Requestを送信してください。

📄 ライセンス

MITライセンス

🔗 リンク

• ECharts Documentation
• Model Context Protocol

Made with ❤️ by w2xi