MCP Chart Service

一个基于 Model Context Protocol (MCP) 的图表服务，提供图表创建、管理和可视化功能，支持在 Cursor、VSCode 等 IDE 中使用。

功能特性

• 🚀 基于 @alife/bi-material-center-chart 的图表组件
• 🎨 支持丰富的图表类型：折线图、柱状图、饼图、雷达图等
• 🔧 智能图表类型识别和代码生成
• 📊 完整的图表配置和最佳实践
• 🔌 跨 IDE 支持（Cursor、VSCode）

安装

npm install @alife/mcp-chart-service

支持的图表类型

基础图表

• Line - 折线图
• Bar - 柱状图
• Pie - 饼图
• Radar - 雷达图

高级图表

• WordCloud - 词云图
• Combination - 组合图
• Area - 面积图
• Strip - 水平条形图
• Rose - 玫瑰图/南丁格尔图

特殊图表

• Treemap - 矩形树图
• Heatmap - 热力图
• Sankey - 桑基图
• RankingList - 排行榜图

数据结构

每种图表类型都有其特定的数据结构：

// 标准数据结构
{ category, value, group }

// 词云图
{ word, weight }

// 组合图
{ xField, yFields[], y2Field?, series }

// 面积图
{ month, value, category }

// 水平条形图
{ x: 类别, y: 数值 }

// 玫瑰图
{ category: 分类, value: 数值, description?: 描述 }

// 矩形树图
{ year: 年份, value: 数值 }

// 热力图
{ xField: X轴字段, yField: Y轴字段, value: 数值 }

// 桑基图
{ source: 源节点, target: 目标节点, value: 流量值 }

// 排行榜
{ 
  dimension: { name, values }, 
  measure: { name, values } 
}

触发规则

服务会自动识别以下模式的文本并提供图表建议：

(创建|添加|显示)(图表|折线图|柱状图|饼图|散点图|雷达图|组合图|数据图表|词云图|面积图|水平条形图|水平分布图|玫瑰图|南丁格尔图|矩形树图|层级图|热力图|桑基图|流向图|排行榜图|排名图|可视化)

通用配置

所有图表都支持以下基础配置：

{
  height: 500,          // 图表高度
  legend: {             // 图例配置
    position: "top"     // 位置：顶部
  },
  tooltip: {            // 提示框配置
    shared: true        // 共享提示
  }
}

图表特定配置

Line（折线图）

{
  requiredProps: ["data", "xField", "yField"],
  commonConfig: {
    point: { size: 5 },
    line: { style: { lineWidth: 2 } }
  }
}

Bar（柱状图）

// 基础数据结构
{ category, value, group }

// 堆叠柱状图数据结构
{ 
  year: '1991',   // x轴字段
  a: 3,           // 堆叠字段1
  b: 3,           // 堆叠字段2
  c: -3,          // 堆叠字段3
  d: -3           // 堆叠字段4
}

// 基础配置
{
  requiredProps: ["data", "xField", "yField"],
  commonConfig: {
    columnWidthRatio: 0.6,
    legend: { position: "top" }
  }
}

// 堆叠柱状图配置
{
  requiredProps: ["data", "xField", "yField"],
  commonConfig: {
    isStack: true,                                    // 开启堆叠
    interactions: ["element-highlight", "active-region"], // 交互配置
    yField: ["a", "b", "c", "d"],                    // 多个堆叠字段
    legend: { position: "top" }
  }
}

Pie（饼图）

{
  requiredProps: ["data", "angleField", "colorField"],
  commonConfig: {
    radius: 0.8,
    label: { type: "outer" }
  }
}

Radar（雷达图）

{
  requiredProps: ["data", "xField", "yField", "seriesField"],
  commonConfig: {
    point: { size: 4 },
    area: { style: { fillOpacity: 0.3 } }
  }
}

WordCloud（词云图）

{
  requiredProps: ["data", "wordField", "weightField"],
  commonConfig: {
    wordStyle: {
      fontSize: [12, 48],
      rotation: [0, 0]
    }
  }
}

Strip（水平条形图）

{
  description: "水平条形图，用于展示数据的分布情况",
  requiredProps: ["data", "xField", "yField"],
  commonConfig: {
    height: 500,
    legend: {
      position: "top"
    },
    tooltip: {
      shared: true
    },
    yAxis: {
      title: {
        text: "数值"
      }
    },
    xAxis: {
      title: {
        text: "类别"
      }
    }
  }
}

最佳实践

• 【图表】使用合适的图表类型展示数据
• 【图表】设置合适的图表高度（默认500px）
• 【图表】配置图例位置（默认顶部）
• 【图表】开启共享tooltip提升用户体验

IDE 配置

Cursor 配置

{
  "mcpServers": {
    "bi-chart": {
      "description": "BI图表组件助手",
      "command": "node",
      "args": ["完整路径/dist/index.js"],
      "env": {}
    }
  }
}

VSCode 配置

{
  "mcp.servers": [
    {
      "name": "bi-chart",
      "description": "BI图表组件助手",
      "command": "node",
      "args": ["完整路径/dist/index.js"]
    }
  ]
}

许可证

MIT License