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 用心打造 ❤️