chart-mcp-service/README.md

MCP服务，实现根据输入自动生成对应图表的功能

# Chart MCP Service

一个基于MCP（Model Context Protocol）的图表服务，实现根据输入自动生成对应图表的功能。该服务使用模板方式引入@alife/bi-material-center-chart组件，不直接在MCP包中引入依赖。

## 功能特性

- 🎯 **智能识别图表类型** - 输入任何图表需求描述，自动识别最适合的图表类型
- ⚡ **生成图表代码** - 基于@alife/bi-material-center-chart生成完整的React组件代码
- 📊 **图表管理** - 创建、查看、更新、删除图表配置
- 📚 **规则查看** - 查看完整的图表组件规则、触发关键词和模板
- 💡 **最佳实践** - 获取特定图表类型的开发最佳实践和注意事项
- ✅ **配置验证** - 检查图表配置是否符合最佳实践和规则要求

## 支持的图表类型

- **line** - 折线图
- **bar** - 柱状图  
- **pie** - 饼图
- **area** - 面积图
- **scatter** - 散点图
- **radar** - 雷达图
- **heatmap** - 热力图
- **wordcloud** - 词云图
- **strip** - 水平条形图
- **sankey** - 桑基图
- **treemap** - 矩形树图

## 安装和使用

### 1. 安装依赖

\`\`\`bash
npm install
\`\`\`

### 2. 编译项目

\`\`\`bash
npm run build
\`\`\`

### 3. 启动服务

\`\`\`bash
npm start
\`\`\`

### 4. 开发模式

\`\`\`bash
npm run dev
\`\`\`

## MCP工具列表

### 1. identify_chart_type
智能识别图表类型
- **参数**: `description` - 图表需求描述
- **示例**: "显示销售趋势"、"创建一个饼图"、"用户分布可视化"

### 2. generate_chart_code
生成图表代码
- **参数**: `type` - 图表类型
- **返回**: 完整的React组件代码，包含导入语句

### 3. create_chart
创建图表实例
- **参数**: `id`, `type`, `title`, `config`(可选)
- **返回**: 包含完整代码和配置的图表对象

### 4. get_chart
获取图表详情
- **参数**: `id` - 图表ID
- **返回**: 图表的完整信息

### 5. list_charts
列出所有图表
- **返回**: 当前存储的所有图表列表

### 6. update_chart
更新图表配置
- **参数**: `id`, `updates` - 要更新的字段

### 7. delete_chart
删除图表
- **参数**: `id` - 要删除的图表ID

### 8. get_chart_rules
获取图表规则
- **参数**: `type`(可选) - 特定图表类型
- **返回**: 图表规则、触发关键词和模板

### 9. get_best_practices
获取最佳实践
- **参数**: `type` - 图表类型
- **返回**: 特定图表类型的开发最佳实践

### 10. validate_chart_config
验证图表配置
- **参数**: `type`, `config`
- **返回**: 验证结果，包含错误、警告和建议

## 使用示例

### 识别图表类型

\`\`\`
输入: "我想展示一下销售数据的时间变化趋势"
输出: {
  "type": "line",
  "confidence": 80,
  "reasons": ["匹配关键词: 趋势, 时间, 变化"],
  "suggestions": [
    "建议使用 折线图 来展示您的数据",
    "推荐导入: import { Line, LineProps } from '@alife/bi-material-center-chart'"
  ]
}
\`\`\`

### 生成图表代码

\`\`\`javascript
// 生成面积图代码示例
import { Area, AreaProps } from '@alife/bi-material-center-chart';
import React from 'react';

const AreaChart: React.FC = () => {
  const data = [
    { month: '1月', value: 3, category: '产品A' },
    { month: '2月', value: 4, category: '产品A' },
    // ... 更多数据
  ];

  const config: AreaProps = {
    data,
    xField: 'month',
    yField: 'value',
    seriesField: 'category',
    height: 500,
    point: { size: 4 },
    area: { style: { fillOpacity: 0.3 } },
    legend: { position: 'top' },
    tooltip: { shared: true },
    color: ['#1890ff', '#2fc25b']
  };

  return <Area {...config} />;
};
\`\`\`

## 颜色配置最佳实践

- **分类数据使用seriesField进行颜色映射** - 用于展示同一维度下的不同系列数据
- **数值映射使用colorField** - 用于连续数值到颜色的映射
- **多系列对比使用seriesField** - 如柱状图中的不同系列
- **单一维度分类使用colorField** - 如饼图的不同扇形

## 项目结构

\`\`\`
chart-mcp-service/
├── src/
│   ├── index.ts           # MCP服务主文件
│   ├── rules.ts           # 图表规则处理类
│   └── chart-generator.ts # 图表代码生成器类
├── dist/                  # 编译输出目录
├── package.json
├── tsconfig.json
└── README.md
\`\`\`

## 技术栈

- **TypeScript** - 类型安全的JavaScript
- **MCP SDK** - Model Context Protocol SDK
- **Node.js** - 运行时环境

## 开发说明

本项目遵循chart-mcp.json配置文件中的规则，实现了：

1. **模板引入** - 不在MCP包中直接引入@alife/bi-material-center-chart，而是通过模板生成导入代码
2. **智能识别** - 基于关键词匹配算法识别图表类型
3. **最佳实践** - 遵循颜色配置、数据结构等最佳实践
4. **规则验证** - 对图表配置进行验证，确保符合规范

## 许可证

ISC