MCP Echarts Server

MCP ECharts服务器

一种支持模型上下文协议的服务器 16种核心Apache ECharts图表类型 具有SVG服务器端渲染、主题支持和模式驱动架构。

🚀 特性

• 16种核心图表类型：SVG兼容的ECharts图表，具有可靠的服务器端渲染
• 主题支持：专业的浅色和深色主题，具有优化的调色板
• 模式驱动的：使用Zod区分联合进行强TypeScript验证
• 符合MCP标准：支持多种传输的完整模型上下文协议
• 生产就绪：干净的架构，全面的错误处理
• CLI测试：使用主题选择进行命令行图表测试

📊 支持的图表类型

岩芯分析图

• line, bar, pie, scatter, effectScatter

统计图形

• radar, heatmap, boxplot, candlestick, parallel

层次结构图

• tree, treemap, sunburst

网络和专业图表

• graph, funnel, gauge, calendar

🎨 主题支持

浅色主题

• 专业蓝绿色调色板： #5470c6, #91cc75, #fac858
• 干净的白色背景，带有微妙的网格
• 针对可读性和打印进行了优化

深色主题

• 鲜艳的颜色： #4992ff, #7cffb2, #fddd60
• 深色背景，对比度增强
• 针对暗模式界面进行了优化

🛠️ MCP工具

render_chart

生成支持主题的SVG图表

{
  "type": "bar",
  "theme": "dark",
  "outputFormat": "png_base64",
  "title": "Sales Data",
  "data": {
    "categories": ["Q1", "Q2", "Q3", "Q4"],
    "series": [{"name": "Sales", "values": [100, 150, 120, 180]}]
  }
}

输出格式：

• svg （默认）：以文本形式返回SVG
• png_base64：返回PNG作为MCP图像内容

PNG Base64响应：

{
  "type": "image",
  "mimeType": "image/png",
  "data": "iVBORw0KGgoAAAANSUhEUgAA..."
}

list_supported_charts

列出所有16种支持的图表类型及其功能级别

get_capabilities

发现服务器功能、主题支持和限制

health_check

服务器运行状况和状态监控

verify_api

测试所有图表类型的API完整性和验证

🏗️ 建筑

src/
├── schemas/          # Zod schemas with theme support
├── charts/           # 16 chart builders with theme integration
├── utils/            # Theme utilities and validation
├── tools/            # MCP tool implementations
└── server.ts         # MCP server with transport support

🚀 快速开始

安装

npm install -g @echarts/mcp-echarts-server

运行服务器

# STDIO (default)
mcp-echarts-server

# HTTP Server
mcp-echarts-server --transport streamable --port 1122

# Server-Sent Events
mcp-echarts-server --transport sse --port 1122

🧪 测试图表

测试个人图表

# Light theme (default)
npm run test:charts -- line
npm run test:charts -- bar

# Dark theme
npm run test:charts -- line --theme=dark
npm run test:charts -- pie --theme=dark

# PNG Base64 output
npm run test:charts -- line --format=png_base64
npm run test:charts -- bar --theme=dark --format=png_base64

测试所有图表

# All charts, light theme, SVG
npm run test:charts -- --all

# All charts, dark theme, PNG
npm run test:charts -- --all --theme=dark --format=png_base64

输出

• SVG文件： test-{chartType}-{theme}.svg
• PNG文件： test-{chartType}-{theme}.png

📈 图表示例

带区域填充的折线图：

{
  "type": "line",
  "theme": "dark",
  "smooth": true,
  "area": true,
  "data": {
    "categories": ["Mon", "Tue", "Wed"],
    "series": [{"name": "Sales", "values": [150, 230, 224]}]
  }
}

雷达图：

{
  "type": "radar",
  "theme": "light",
  "data": {
    "indicators": [{"name": "Sales", "max": 100}],
    "series": [{"name": "Q1", "values": [80]}]
  }
}

🔧 发展

npm install
npm run build
npm run test:charts -- --all

📚 文档

• 架构指南 -系统设计和组件
• 测试指导 -使用CLI进行图表测试
• 项目概要 -综合概述

📄 许可证

麻省理工学院