Skip to main content
Glama
deenesjakoruzh
RiverThrimp

ECharts ChartPage MCP Server

by RiverThrimp
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Hybrid

ECharts ChartPage

echarts-chartpage 是一个 TypeScript 工具包，可将结构化 JSON 数据、可视化目标和字段映射转换为由 Apache ECharts 驱动的安全、可运行的 HTML 图表页面。

它以以下形式提供：

  • 用于程序化使用的 npm 包

  • 用于本地自动化的 CLI

  • 用于智能体工作流的 MCP 服务器

该项目旨在实现确定性输出、受控选项生成、严格验证以及公共开源可维护性。

特性

  • 生成包含 Apache ECharts CDN 的完整单文件 HTML 图表页面

  • 在源代码中依赖官方 echarts npm 包以确保类型和集成的正确性

  • 接受结构化数据以及 goal（目标）、theme（主题）和字段映射输入

  • 从受控白名单中推荐安全的图表类型

  • 构建受控的 ECharts 选项，无需注入任意 JS 格式化程序

  • 验证模式、字段映射、图表兼容性以及生成的 HTML 基础结构

  • 修补现有图表规范并重新生成输出

  • 在 npm API、CLI 和 MCP 服务器之间复用一个共享核心

  • 附带测试、CI、示例、贡献文档和可发布包

支持的目标

  • trend（趋势）

  • compare（比较）

  • composition（构成）

  • distribution（分布）

  • ranking（排名）

  • correlation（相关性）

支持的图表类型

  • line（折线图）

  • bar（柱状图）

  • stacked_bar（堆叠柱状图）

  • pie（饼图）

  • donut（环形图）

  • scatter（散点图）

  • area（面积图）

  • table（表格）

安装

npm install echarts-chartpage

用于本地开发：

npm install

快速入门

CLI

npx echarts-chartpage generate \
  --input examples/inputs/line-chart.json \
  --output revenue-trend.html

npm API

import { generateChartPage } from "echarts-chartpage";

const result = generateChartPage({
  title: "Monthly Revenue Trend",
  goal: "trend",
  theme: "light",
  outputMode: "single_html",
  data: [
    { month: "2025-01", revenue: 120 },
    { month: "2025-02", revenue: 132 },
    { month: "2025-03", revenue: 148 }
  ],
  fields: {
    x: "month",
    y: "revenue"
  }
});

console.log(result.chartType);
console.log(result.html);

MCP 服务器

先构建，然后启动 stdio 服务器：

npm run build
npm run mcp:start

输入模型

type GenerateChartPageInput = {
  title: string;
  description?: string;
  goal: "trend" | "compare" | "composition" | "distribution" | "ranking" | "correlation";
  data: Array<Record<string, string | number | boolean | null>>;
  fields: {
    x: string;
    y: string | string[];
    series?: string;
    category?: string;
  };
  theme?: "light" | "dark";
  outputMode?: "single_html";
  chartType?: "line" | "bar" | "stacked_bar" | "pie" | "donut" | "scatter" | "area" | "table";
};

输出

generateChartPage() 返回：

  • 规范化后的规范

  • 解析后的图表类型

  • 警告信息

  • 受控的 ECharts 选项，或在表格回退时返回 null

  • 完整的可运行 HTML

CLI 使用

CLI 二进制名称为 echarts-chartpage。

generate

从 JSON 输入生成单个 HTML 页面：

echarts-chartpage generate \
  --input examples/inputs/line-chart.json \
  --output examples/generated/line-chart.html

recommend

推荐图表类型：

echarts-chartpage recommend \
  --input examples/inputs/bar-chart.json

validate

验证输入，并可选择验证生成的 HTML：

echarts-chartpage validate \
  --input examples/inputs/pie-chart.json \
  --html examples/generated/pie-chart.html

patch

修补基础图表规范并重新生成 HTML：

echarts-chartpage patch \
  --base examples/inputs/patch-base.json \
  --patch examples/inputs/patch-update.json \
  --output examples/generated/patch-example.html

MCP 使用

服务器公开了以下工具：

  • recommend_chart_type

  • generate_chart_page

  • validate_chart_page

  • patch_chart_page

所有工具的输入和输出均为结构化 JSON。典型的 MCP 客户端配置指向已构建的 stdio 服务器：

{
  "mcpServers": {
    "echarts-chartpage": {
      "command": "node",
      "args": ["dist/mcp/server.js"]
    }
  }
}

请参阅 examples/mcp-usage.md 获取请求负载示例。

编程 API

公共 API 接口：

  • generateChartPage

  • recommendChartType

  • validateChartInput

  • validateChartPageRequest

  • validateGeneratedHtml

  • patchChartPage

  • buildChartOption

  • buildChartHtml

运行时模式也已导出：

  • generateChartPageInputSchema

  • patchChartPageChangesSchema

  • patchChartPageInputSchema

  • validateChartPageInputSchema

输入/输出示例

输入：

{
  "title": "Traffic Source Mix",
  "goal": "composition",
  "theme": "light",
  "outputMode": "single_html",
  "data": [
    { "source": "Organic", "sessions": 4200 },
    { "source": "Paid", "sessions": 2100 },
    { "source": "Referral", "sessions": 1100 }
  ],
  "fields": {
    "x": "source",
    "y": "sessions",
    "category": "source"
  }
}

输出摘要：

{
  "chartType": "donut",
  "warnings": [],
  "html": "<!doctype html>..."
}

示例

该仓库包含：

使用以下命令生成所有示例 HTML 文件：

npm run examples:generate

生成的 HTML 文件将写入 examples/generated/。

智能体技能

此仓库还包含一个可重用的 Codex 风格技能，供需要持续调用 MCP 服务器的智能体使用：

它记录了：

  • 何时触发此 MCP

  • 如何在推荐/验证/生成/修补之间进行选择

  • 结构化调用规则

  • 用于模型提示的少样本示例

使用以下命令将捆绑的技能安装到本地 Codex 技能目录中：

npm run build
npm run skill:install

架构

项目布局：

src/
  core/
    chart-recommender.ts
    option-builder.ts
    html-builder.ts
    validator.ts
    patcher.ts
    generator.ts
  cli/
    index.ts
    commands/
  mcp/
    server.ts
  schemas/
  types/
  utils/

设计规则：

  • 核心逻辑在所有接口间共享

  • 输出受控且确定

  • 不接受任意格式化函数

  • 仅发出白名单内的图表类型

  • 在可行的情况下优先使用 dataset + encode

另请参阅：

开发命令

npm install
npm run lint
npm run typecheck
npm run test
npm run build
npm run examples:generate

构建命令

npm run build

输出将发送到 dist/。

测试命令

npm run test

发布说明

发布前：

  1. 更新 package.json 中的仓库 URL。

  2. 确保 npm 账户 daqiang901003 已在发布机器上完成身份验证。

  3. 查看 CHANGELOG.md。

  4. 运行 npm run verify。

  5. 使用 npm publish 发布。

该包配置了：

  • exports

  • 生成的 .d.ts

  • bin

  • files

  • 优先使用 ESM 输出并兼容 CommonJS

路线图

  • 更丰富的排名特定排序控件

  • 面向仪表板的多面板 HTML 模板

  • 更多的图表推荐启发式算法

  • 可配置的设计预设

  • 更丰富的 MCP 元数据和追踪

常见问题解答

这会执行任意用户 JavaScript 吗？

不会。生成器不接受任意格式化函数、脚本片段或自定义 JS 注入。

为什么某些输入会回退到 table？

构建器使用保守的白名单。如果映射或数据类型与受控图表输出不兼容，它将回退到稳定的表格渲染。

生成的 HTML 需要构建步骤吗？

不需要。它是一个旨在直接在浏览器中打开的单个 HTML 文件。

我可以强制指定图表类型吗？

可以。在输入中设置 chartType。如果请求的图表与数据映射不兼容，将返回验证警告，生成过程可能会回退到 table。

安全性

  • 无任意脚本注入

  • 除固定的 ECharts CDN 外，无任意外部 JS 注入

  • 无格式化函数注入

  • 受控的 HTML 模板形状

  • 生成前进行模式验证

本项目旨在用于受信任的结构化数据流水线。如果您接受来自外部用户的不可信输入，请同时在您的边界处对其进行验证和清理。

有关完整的仓库策略，请参阅 SECURITY.md。

ECharts 集成说明

本项目在两处使用 ECharts：

  • 源代码依赖官方 echarts npm 包进行类型化选项生成

  • 生成的 HTML 使用固定的 Apache ECharts CDN 运行时，以便输出文件无需打包工具即可直接在浏览器中打开

贡献

请参阅 CONTRIBUTING.md。

许可证

MIT。请参阅 LICENSE。

This server cannot be installed

-
security - not tested
A
license - permissive license
-
quality - not tested

How are these scores calculated?

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/RiverThrimp/echarts-chartpage'

If you have feedback or need assistance with the MCP directory API, please join our Discord server