/ 目录 / 演练场 / MCP ECharts
● 社区 hustcc ⚡ 即开即用

MCP ECharts

作者 hustcc · hustcc/mcp-echarts

ECharts通过MCP —代理选择正确的图表(折线图、条形图、饼图、散点图、热图、sankey、雷达... )并返回PNG/SVG或原始选项对象。

hustcc/mcp-echarts将Apache ECharts包裹在MCP服务器后面。15个以上的图表工具涵盖了标准的ECharts系列— line、bar、area、pie、scatter、radar、heatmap、sankey、funnel、treemap、sunburst等—具有完整的ECharts语法传递。本地渲染(零云) ,导出到PNG/SVG ,或返回原始ECharts “选项”对象,以便您可以将其粘贴到自己的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

在一个工具调用中将数字表转换为图表

👤 在聊天中工作的分析师、项目经理和工程师 ⏱ ~5 min beginner

何时使用: 您有一个小数据集,并且希望在不打开电子表格的情况下获得可视化效果。

前置条件
  • 节点18 + — nvm install 18
步骤
  1. 描述图表
    每周活跃用户条形图:周一820 ,周二905 ,周三1120 ,周四980 ,周五1340 ,周六780 ,周日610。称之为“白天的WAU”。✓ 已复制
    → 代理选择具有正确x轴标签和值的GENERATE_BAR_CHART
  2. 导出PNG
    导出为PNG并将其保存到~/charts/wau.png。✓ 已复制
    → 返回文件;工具结果中的png_path

结果: 您可以放入卡组或文档的图表,而无需离开聊天。

注意事项
  • 在包含30多个类别的数据集上索取饼图 — 客服代表应建议条形图/热图;强制使用“使用条形图,饼图不可读”
搭配使用: filesystem

获取RAW ECharts选项以粘贴到React/Vue仪表板中

👤 前端开发人员构建内部工具 ⏱ ~15 min intermediate

何时使用: 您希望Claude起草图表配置,因此您只需在应用程序中对其进行调整。

前置条件
  • 使用ECharts的前端 — npm install echarts
步骤
  1. 询问选项JSON
    为堆积面积图生成ECharts选项:三个系列(直接,有机,付费) , 2025年每月。✓ 已复制
    → 返回形状是具有series [] .type: 'line', areaStyle和stack: 'total'的选项对象
  2. 放入您的组件
    现在将其作为名为exportOption的TypeScript常量发出。✓ 已复制
    → TS常量已准备好粘贴

结果: 生产就绪的ECharts配置,无需手工制作样板。

注意事项
  • 客服代表在您需要时返回巴布亚新几内亚 — 说“return option JSON only — no rendering”
搭配使用: antv-chart

将流程(漏斗、旅程、转化)可视化为sankey

👤 增长/产品分析师 ⏱ ~10 min beginner

何时使用: 您需要一个甲板的流程图,而sankey是正确的工具。

步骤
  1. 描述节点和流程
    Sankey :登陆(1000)→注册(420)→激活(310)→付费(95)。显示派送百分比。✓ 已复制
    → 正确的节点/链接结构;标签包括计数
  2. 导出SVG...
    导出SVG ,以便在Keynote中缩放。✓ 已复制
    → SVG路径已保存

结果: 一个清脆的漏斗审查,没有Figma。

搭配使用: markmap-mcp-server

将生成的图表发布到MinIO进行共享

👤 运行自托管对象存储的Teams ⏱ ~20 min intermediate

何时使用: 您希望从Slack/Notion引用的图表具有可重现的URL。

前置条件
  • MinIO端点+凭据 — 在MCP客户端配置中设置MINIO_* env变量
步骤
  1. 配置env
    在MCP配置中设置MINIO_ENDPOINT、MINIO_ACCESS_KEY、MINIO_SECRET_KEY、MINIO_BUCKET_NAME。✓ 已复制
    → 服务器报告启动时启用了MinIO
  2. 生成并上传
    按地区绘制收入图表;上传到MinIO并给我URL。✓ 已复制
    → 已返回公共(或预先签名)网址

结果: 稳定的图表链接,聊天记录后不会中断。

注意事项
  • 正在泄漏配置中的凭据 — 使用专用的存储桶作用域IAM用户,而不是MinIO根密钥
搭配使用: s3-like MCPs

组合

与其他 MCP 搭配,撬动十倍杠杆

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 配额
无—本地渲染
每次调用 Token 数
小:选项对象输入,路径输出
费用
免费
提示
当您多次重复使用JSON时,请询问选项JSON ;向PNG索取一次性共享。

安全

权限、密钥、影响范围

凭据存储: 仅在env vars中的MinIO creds。除了渲染的图表之外,没有服务器端存储您的数据。
数据出站: 默认情况下没有出口。MinIO仅导出上传到您配置的端点。

故障排查

常见错误与修复

PNG渲染为空

确保序列数据类型匹配(数字,而不是字符串) ,并且x轴长度等于序列长度。

验证: Inspect the option JSON; types should be number arrays
MinIO上传失败:签名不匹配

检查MINIO_USE_SSL、MINIO_PORT ,以及访问/密钥属于同一MinIO实例。

验证: mc admin info myminio/
缺少字体/中日韩字符作为框

在运行MCP服务器的环境中安装支持CJK的字体(例如, Noto Sans CJK )。

验证: fc-list | grep -i cjk

替代方案

MCP ECharts 对比其他方案

替代方案何时用它替代权衡
antv-chart您更喜欢AntV固执己见的默认值和中文文档较小的图表词汇
markmap-mcp-server您需要层次结构,而不是统计图表不同的输出类别
mermaid-skill您需要流程图/序列图,而不是数据图图表≠图表

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills