ECharts 图表生成器插件

插件简介

ECharts 图表生成器是一个 XpertAI 平台插件，能够根据用户输入的一组或多组数据，自动生成完整的 ECharts 图表配置（option JSON）以及可直接使用的 HTML 预览代码。支持折线图、柱状图、饼图、散点图、雷达图、面积图、堆叠柱状图、堆叠折线图等多种图表类型。

适用场景

• 数据可视化：将业务数据快速转化为图表配置
• 报表生成：自动生成报表中的图表部分
• 数据分析：通过图表直观展示数据趋势和对比
• 前端开发：快速获取 ECharts option 配置，减少手动编写
• AI Agent 工具：作为 MCP Tool 供 Agent 调用，实现智能图表生成

目录结构

echarts-generator/
├── .xpertai-plugin/
│   └── plugin.json              # 插件清单
├── index.js                     # 插件入口（CommonJS）
├── package.json                 # 项目配置
├── README.md                    # 说明文档
├── src/
│   ├── echarts-generator.module.ts    # NestJS 模块
│   ├── echarts-generator.service.ts   # 核心服务（图表生成逻辑）
│   ├── schemas/
│   │   ├── config.schema.ts           # 插件配置 Schema（zod）
│   │   └── tool.schema.ts             # 工具输入输出 Schema（zod）
│   └── mcp/
│       ├── echarts-generator.mcp-server.ts  # MCP Server 定义
│       └── tools/
│           └── generate-chart.tool.ts       # generate-chart 工具
├── resources/                   # 资源目录（可扩展 Skills/Apps/Hooks）
└── examples/                    # 调用示例
    ├── request.example.json
    ├── line-chart.example.json
    ├── pie-chart.example.json
    └── radar-chart.example.json

安装与导入

通过 npm 安装到 XpertAI 平台

# 在 XpertAI 平台通过 API 安装
POST http://10.161.48.53:3300/api/plugin
{
  "pluginName": "@timmy_hu/echarts-generator",
  "version": "1.0.0",
  "source": "npm"
}

本地开发

npm install
node -e "console.log(require('./index.js'))"

配置项说明

| 配置项 | 类型 | 默认值 | 必填 | 说明 | |--------|------|--------|------|------| | defaultTheme | string | light | 否 | 默认图表主题（light/dark） | | defaultWidth | number | 800 | 否 | 默认图表宽度（像素） | | defaultHeight | number | 600 | 否 | 默认图表高度（像素） | | animation | boolean | true | 否 | 是否启用动画 | | animationDuration | number | 1000 | 否 | 动画时长（毫秒） |

MCP Tool 列表

generate-chart（生成ECharts图表）

根据输入数据生成 ECharts 图表配置。

入参说明

| 参数 | 类型 | 必填 | 说明 | |------|------|------|------| | chartType | string | 是 | 图表类型：line/bar/pie/scatter/radar/area/stacked-bar/stacked-line | | title | string | 否 | 图表标题 | | subtitle | string | 否 | 图表副标题 | | categories | string[] | 否 | X轴分类标签数组 | | series | object[] | 是 | 数据系列列表（至少一组） | | series[].name | string | 是 | 数据系列名称 | | series[].data | number[] | 是 | 数据值数组 | | series[].smooth | boolean | 否 | 是否平滑曲线 | | series[].areaStyle | boolean | 否 | 是否显示面积填充 | | series[].color | string | 否 | 自定义颜色 | | width | number | 否 | 图表宽度（像素），默认800 | | height | number | 否 | 图表高度（像素），默认600 | | theme | string | 否 | 主题（light/dark） | | showLegend | boolean | 否 | 是否显示图例，默认true | | showToolbox | boolean | 否 | 是否显示工具栏，默认true | | xAxisName | string | 否 | X轴名称 | | yAxisName | string | 否 | Y轴名称 |

返回值说明

| 字段 | 类型 | 说明 | |------|------|------| | success | boolean | 是否成功 | | chartType | string | 图表类型 | | option | object | ECharts option JSON 配置对象 | | width | number | 建议宽度 | | height | number | 建议高度 | | theme | string | 主题 | | htmlPreview | string | 可直接使用的 HTML 预览代码 | | error | string | 错误信息（仅失败时） |

调用示例

柱状图 - 多组数据

{
  "chartType": "bar",
  "title": "2024年季度销售额",
  "categories": ["Q1", "Q2", "Q3", "Q4"],
  "series": [
    { "name": "产品A", "data": [120, 200, 150, 80] },
    { "name": "产品B", "data": [60, 130, 90, 110] }
  ],
  "xAxisName": "季度",
  "yAxisName": "销售额（万元）"
}

折线图 - 平滑曲线

{
  "chartType": "line",
  "title": "月度趋势",
  "categories": ["1月", "2月", "3月", "4月", "5月", "6月"],
  "series": [
    { "name": "访问量", "data": [820, 932, 901, 1234, 1290, 1330], "smooth": true }
  ]
}

饼图

{
  "chartType": "pie",
  "title": "市场份额",
  "categories": ["搜索引擎", "直接访问", "邮件营销", "联盟广告"],
  "series": [
    { "name": "来源", "data": [1048, 735, 580, 484] }
  ]
}

雷达图

{
  "chartType": "radar",
  "title": "能力对比",
  "categories": ["销售", "管理", "技术", "客服", "研发"],
  "series": [
    { "name": "团队A", "data": [90, 80, 70, 85, 95], "areaStyle": true },
    { "name": "团队B", "data": [70, 90, 85, 60, 75], "areaStyle": true }
  ]
}

支持的图表类型

| 类型编码 | 说明 | 适用场景 | |----------|------|----------| | line | 折线图 | 趋势分析、时间序列 | | bar | 柱状图 | 分类对比 | | pie | 饼图 | 占比分析 | | scatter | 散点图 | 相关性分析 | | radar | 雷达图 | 多维能力对比 | | area | 面积图 | 趋势+量级展示 | | stacked-bar | 堆叠柱状图 | 分类+组成对比 | | stacked-line | 堆叠折线图 | 趋势+组成分析 |

常见错误和处理方式

| 错误 | 原因 | 处理方式 | |------|------|----------| | 不支持的图表类型 | chartType 值不在枚举范围内 | 使用支持的8种类型之一 | | series 不能为空 | 未传入数据系列 | 至少传入一组 series | | data 必须为数字数组 | 数据中包含非数字值 | 确保 data 数组中全部为数字 |

安全注意事项

• 本插件不涉及外部 API 调用，无需鉴权配置
• 生成的 HTML 预览代码引用 CDN 上的 ECharts 库（jsdelivr），请确保网络可访问
• 如需离线使用，可将 ECharts 库下载到本地并修改 HTML 中的 script src
• 插件不会存储或传输用户输入的数据

使用方式

1. 在 XpertAI 平台安装本插件
2. 在 Agent 对话中调用 generate-chart 工具
3. 传入图表类型和数据，获取 ECharts option 配置
4. 将 option 配置用于前端 ECharts 渲染，或直接使用返回的 HTML 预览代码