跳到主要内容 MCP Server 实现 Excel 表格一键生成可视化图表 HTML 报告 | 极客日志
JavaScript Node.js AI
MCP Server 实现 Excel 表格一键生成可视化图表 HTML 报告 MCP Server 基于模型上下文协议连接 LLM 与外部资源。演示如何利用 sequential-thinking、server-filesystem、excel-mcp-server 和 quickchart-server 四个 MCP 服务，配合 CherryStudio 或 Trae 客户端，将本地 Excel 数据自动分析并生成为包含可视化图表的 Apple 风格 HTML 报告。配置过程涉及 Node.js 环境及特定 JSON 配置文件编写，实现了从数据读取、清洗、分析到图表生成的全流程自动化。
2177283801 发布于 2026/2/8 更新于 2026/4/18 1. 前言
MCP Server（模型上下文协议服务器）是一种基于模型上下文协议（Model Context Protocol，简称 MCP）构建的轻量级服务程序，旨在实现大型语言模型（LLM）与外部资源之间的高效、安全连接。MCP 协议由 Anthropic 公司于 2024 年 11 月开源，其核心目标是解决 AI 应用中数据分散、接口不统一等问题，为开发者提供标准化的接口，使 AI 模型能够灵活访问本地资源和远程服务，从而提升 AI 助手的响应质量和工作效率。
MCP Server 的架构与工作原理
MCP Server 采用客户端 - 服务器（Client-Server）架构，其中客户端（MCP Client）负责与服务器建立连接，发起请求，而服务器端则处理请求并返回响应。这种架构确保了数据交互的高效性与安全性。例如，客户端可以向服务器发送请求，如'查询数据库中的某个记录'或'调用某个 API'，而服务器则根据请求类型，调用相应的资源或工具，完成任务并返回结果。
MCP Server 支持动态发现和实时更新机制。例如，当新的资源或工具被添加到服务器时，客户端可以自动感知并使用这些新功能，从而提高系统的灵活性和扩展性。
MCP Server 的主要功能
资源暴露与工具提供 ：
MCP Server 可以将本地文件、数据库、API 等资源作为数据实体暴露给 AI 模型，同时提供工具功能，帮助 AI 完成复杂任务，如数据检索、内容生成、实时更新等。例如，它支持对 MySQL、PostgreSQL 等数据库的查询和操作，也支持对本地文件系统的读写和目录管理。会话管理与动态通知 ：
MCP Server 能够管理客户端与服务器的连接，确保会话的时效性和稳定性，同时通过实时推送机制，将最新的资源信息及时传递给 AI 模型，以保证数据的准确性和实时性。安全性与隐私保护 ：
MCP Server 采用加密认证和访问控制机制，确保数据传输的安全性，避免敏感信息泄露。例如，它支持本地运行，避免将敏感数据上传至第三方平台，从而保护用户隐私。标准化与模块化 ：
MCP Server 提供了标准化的通信协议，支持两种传输协议（STDIO 和 SSE），并允许开发者通过插件扩展功能，使其具备灵活性和扩展性。例如，它支持通过 HTTP 标准 POST 请求与客户端进行交互，同时支持 WebSocket 实现实时数据推送。多场景应用 ：
MCP Server 可以应用于多种场景，包括但不限于：
本地资源集成 ：如文件操作、数据库管理、API 调用等。云服务交互 ：如与 GitHub、Slack、Google Drive 等云服务的集成。AI 助手扩展 ：如为 ChatGPT 等 AI 助手提供上下文支持和工具调用能力。
目前各大互联网厂商也陆续实现了 MCP-Servers 广场。今天带大家一起使用 CherryStudio 和 Trae 实现 Excel 表格一键生成可视化图表 HTML 报告的 MCP 案例，下面先看一下效果。
测试的 Excel 表格数据
CherryStudio
F:\tmp\mcpfiles 有我们的分享报告，我们看一下
微信扫一扫，关注极客日志 微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
相关免费在线工具 RSA密钥对生成器 生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
Mermaid 预览与可视化编辑 基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
Keycode 信息 查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码 JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化 使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆 Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
看起来生成的 HTML 报告还不错，通过简单的 Excel 表格通过几个 MCP 实现了一个分析报告。
Trae 同样它在我电脑的 F:\tmp\mcpfiles 目录下生成一个 zz_report.html 报告
我们通过 2 个 mcp-client 实现了 Excel 表格一键生成可视化图表 HTML 报告。那么这个 mcp-server 用到了哪些工具，如何实现的呢？下面带大家一起来实现。
2. MCP Server 配置 上面的 mcp-server 其实用到了 4 个 mcp-server，分别是 sequential-thinking、server-filesystem、excel-mcp-server、quickchart-server。
Trae 配置 MCP Server 他们的配置在 Trae 非常简单，下面是他们的配置文件。
quickchart-server { "mcpServers" : { "quickchart-server" : { "command" : "npx" , "args" : [ "-y" , "@gongrzhe/quickchart-mcp-server" ] } } }
excel-mcp-server { "mcpServers" : { "excel-mcp-server" : { "command" : "npx" , "args" : [ "--yes" , "@zhiweixu/excel-mcp-server" ] , "env" : { "LOG_PATH" : "F:\\tmp\\mcpfiles" , "CACHE_MAX_AGE" : "1" , "CACHE_CLEANUP_INTERVAL" : "4" , "LOG_RETENTION_DAYS" : "7" , "LOG_CLEANUP_INTERVAL" : "24" } } } }
server-filesystem { "mcpServers" : { "server-filesystem" : { "command" : "npx" , "args" : [ "-y" , "@modelcontextprotocol/server-filesystem" , "F:\\tmp\\mcpfiles" ] } } }
sequential-thinking { "mcpServers" : { "sequential-thinking" : { "command" : "npx" , "args" : [ "-y" , "@modelcontextprotocol/server-sequential-thinking" ] } } }
首先需要确保电脑上安装了 Node.js、uvx 等工具，详细安装可以参考 Trae 帮助文档。
安装好后，我们在 Trae 配置添加，下面以一个 mcp-server 介绍一下配置。
打开 Trae，选择 MCP (Trae 建议升级到最新版本)。
在弹出 MCP Server 配置对话框里面，把上面的 4 个 mcp-server 添加配置。
点击确定按钮完成添加配置，稍等片刻后我们看到变成可用状态，说明 Trae 已经完成了 MCP Server 安装。
分别将上面 4 个 mcp-server 添加完成即可。
CherryStudio 配置 MCP Server CherryStudio 的配置和上面的配置类似。
我们打开 CherryStudio，找到 MCP Server 配置。
我们可以在右上角使用编辑 MCP 配置的方式，也是可以手工添加的方式。
添加 MCP 配置的方式和上面的 Trae 比较类似，都是 JSON 文件格式复制一下即可。它多了一个 "type": "stdio", 类型。
另外考虑我电脑上是 Windows，所以我们 command 改成 cmd 命令，args 添加 -c 和 npx。这种方式是解决 Windows 安装 npx 不可用的问题。
区别的部分我们用红框标注了，其他都和 Trae 配置一样。
手工添加方式也非常简单，类型选择 Studio，命令行 cmd，参数填写即可。
当 CherryStudio MCP-Server 配置都变成绿色就是可以使用状态。
以上步骤就完成了 CherryStudio MCP-Server 的配置。
3. 验证及测试 下面我们以 CherryStudio 为案例测试。
## 角色定位 你是一位顶尖的数据可视化与分析专家，具备卓越的 Excel 数据处理能力和敏锐的商业洞察力。你精通使用先进的 MCP 工具（`sequential-thinking`, `server-filesystem`, `excel`, `quickchart-server`）来解读、处理、分析数据，并能基于数据特征和用户需求，智能推荐并生成高质量的可视化图表。最终，你将以专业、美观、符合 Apple 设计风格的响应式 HTML 报告，清晰呈现富有洞察力的分析结果。
## 核心能力
### 1. 数据理解与处理
- **工作流程管理 (`sequential-thinking`)：** 利用 `sequential-thinking` MCP 服务规划并执行复杂的分析任务，确保分析过程逻辑清晰、步骤严谨。
- **Excel 数据访问 (`excel`)：** 使用 `excel` MCP 服务精确、高效地读取用户提供的 Excel 文件内容（支持.xlsx, .xlsm, .xltx, .xltm 格式），包括工作表名称、单元格数据、公式等。
- **数据预处理：** 识别并专业处理数据结构问题，包括缺失值、异常值、数据类型不一致等，应用适当的清洗和转换技术，确保数据质量满足严谨的分析要求。
- **文件系统交互 (`server-filesystem`)：** 通过 `server-filesystem` MCP 服务安全地访问和管理本地文件系统中的分析所需文件（根目录限定于 `F:\tmp\mcpfiles` ）。
### 2. 智能可视化推荐与生成
- **需求深度分析：** 深入理解用户的显式和隐式目标，结合数据本身的特性，提炼出核心的分析维度和需要关注的关键指标。
- **图表智能推荐：** 基于数据类型（如时间序列、分类、比例、分布、关系等）和分析目的，智能推荐最能有效传达信息的可视化方案。
- **专业图表生成 (`quickchart-server`)：** 利用 `quickchart-server` MCP 服务，根据选定的数据和图表类型，生成清晰、准确、美观且具有信息传递效率的可视化图表（如柱状图、折线图、饼图、散点图、热力图等）。
### 3. 深度数据分析与洞察提炼
- **探索性数据分析 (EDA)：** 对数据进行全面的探索性分析，运用统计方法和可视化手段识别关键模式、趋势、周期性、相关性以及潜在的异常点。
- **洞察总结与提炼：** 超越表面数据，挖掘其背后的业务含义和深层原因，提炼出具有价值的核心洞见，并以简洁、精准、易于理解的语言进行阐述。
- **报告内容撰写：** 基于分析结果，撰写结构清晰、逻辑严谨的数据分析文字报告，包含关键发现、数据解读、趋势预测（如果适用）和切实可行的建议。
### 4. 精美 HTML 报告构建与输出
- **内容有机整合：** 将生成的可视化图表与数据分析文字报告无缝集成，确保图文互补，共同服务于分析目标的呈现。
- **Apple 风格设计：** 报告视觉设计遵循**Apple 设计风格** 原则：注重**简洁、清晰、优雅** 。使用**卡片式布局** 组织内容，确保**充足的留白** ；采用**清晰的无衬线字体** （优先使用系统 UI 字体）、**圆角元素** 、**细微阴影** 效果和**专业、和谐的色彩搭配** ；适当运用**高质量图标** 增强信息传达，提升整体专业感和现代感。
- **响应式 HTML 输出：** 生成单一、完整的 HTML 文件。确保报告**内容丰富、结构合理、导航清晰、易于阅读** ，并在不同设备（桌面、平板、手机）上均具备良好的**响应式** 布局和阅读体验。
## 工作流程
1. **需求理解与数据接入：** 接收用户指令和 Excel 文件路径，使用 `excel` 工具初步读取数据结构（如工作表名称、列名）。主动向用户确认对分析目标的理解。
2. **数据清洗与准备：** 检查数据质量，进行必要的数据清洗、转换和整理。若发现严重问题，及时向用户反馈。
3. **探索性分析与洞察发掘：** 执行深入的数据分析，识别关键模式、趋势和异常。
4. **可视化方案设计与生成：** 根据分析发现和用户目标，推荐并使用 `quickchart-server` 生成合适的可视化图表。
5. **分析报告撰写：** 撰写包含核心洞察、图表解读和建议的文字报告。
6. **HTML 报告构建与整合：** 使用 `filesystem` 工具（如果需要创建或写入文件），将文字报告和图表整合成符合 Apple 设计风格的 HTML 报告。
7. **结果呈现与迭代：** 向用户展示最终的 HTML 报告。如有必要，根据用户反馈进行调整和优化，或提出进一步分析的建议。
## 交互原则
- **主动确认：** 在关键步骤（如确定分析目标、执行复杂操作）前，主动总结你的理解并寻求用户确认，避免方向性错误。
- **透明沟通：** 在分析过程中，若遇到数据歧义、需要做出假设或存在多种分析路径，应向用户清晰说明情况，解释你的判断依据或寻求用户指导。
- **用户为中心：** 始终以帮助用户解决问题、达成目标为核心，提供清晰、准确、有价值的分析结果。
## 健壮性与错误处理
- **异常情况应对：** 若遇到无法访问文件、文件格式不支持、数据质量问题阻碍分析、MCP 工具执行失败等情况，必须立即停止当前无效尝试，清晰地向用户报告具体问题，并尽可能提供错误信息和建议的解决方案（例如，请求用户检查文件路径、格式或提供更清晰的数据）。
- **工具失败处理：** 若特定 MCP 工具调用失败，尝试理解失败原因。如果可能，尝试替代方案或告知用户该功能暂时无法完成。
## 数据隐私
- **安全规范：** 在处理用户提供的任何数据时，严格遵守数据隐私和安全规范，仅在完成用户请求的分析任务范围内使用数据，任务完成后不保留用户数据。
我们在 CherryStudio 添加一个智能体名字叫做'数据分析专家'。
完成智能体添加后，我们在聊天助手中添加一个叫做'数据分析专家'智能体。
模型这里我们选择 2025 年 4 月 29 日阿里发布的 qwen3-235B-A22B 模型。
接下来我们用到 4 个 mcp-server，所以在聊天对话框把 4 个 mcp-server 都勾选上。
请根据'F:\tmp\mcpfiles\zz.xlsx' 进行全面分析，并生成一份包含关键洞察和可视化图表的 HTML 报告
生成总结报告，并把生成的 html 输出到 F:\tmp\mcpfiles\zz_analysis_report.html 中。
后面的 Trae 测试方法和这个比较类似，这里就不做详细展开了。
4. 总结 本文主要介绍了使用 CherryStudio 和 Trae 实现 Excel 表格一键生成可视化图表 HTML 报告的 MCP 案例。详细讲解了 MCP Server 的配置过程，分别介绍了在 Trae 和 CherryStudio 中配置 sequential-thinking、server-filesystem、excel-mcp-server 和 quickchart-server 这 4 个 MCP Server 的方法。同时展示了如何设置提示词、添加智能体、选择模型以及勾选所需的 MCP Server 来完成 Excel 数据的分析和可视化报告的生成。该方案属于比较实用且具有一定创新性的方案，能够帮助用户快速、便捷地将 Excel 表格数据转化为可视化的 HTML 报告，提升数据分析和展示的效率。
