Echarts MCP

🚀 📊 ECharts MCP Server

這是一個基於模型上下文協議（MCP）的服務器，可根據 ECharts 配置生成精美的圖表圖像，為數據可視化提供了高效且便捷的解決方案。

✨ 主要特性

• 🎨 依據 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：模型上下文協議實現
• Zod：模式驗證

🤝 貢獻

歡迎大家參與貢獻！請隨時提交拉取請求。

📄 許可證

本項目採用 MIT 許可證。

🔗 鏈接

• ECharts 文檔
• 模型上下文協議

由 w2xi 用心打造 ❤️