isqqw ECharts 图表生成（代码）

HappyJess/isqqw-echarts-code

0 Stars 17 次浏览李扶摇更新于 2026-08-23

开发者工具

该服务暂未提供标准配置，请参考 README 手动接入

服务介绍

isqqw ECharts 图表生成（代码版）

基本信息

字段	内容
服务名称	isqqw-echarts-code
显示名称	isqqw ECharts 图表生成（代码）
服务类型	Hosted（远程托管）
传输协议	Streamable HTTP
分类	开发者工具 / 数据可视化
开发者	isqqw
服务地址	https://mcp.isqqw.com/generate-echarts-code/mcp
鉴权方式	Bearer Token（API Key）

服务简介

根据传入的结构化参数，在服务端直接构建标准 ECharts option 配置，返回可直接使用的 ECharts option JS 代码字符串，方便开发者嵌入项目中使用或进行二次修改定制。与图片版逻辑完全相同，仅输出格式不同。支持全部 31 种图表类型及 @echarts-x 扩展。

使用场景

前端开发时需要将图表代码嵌入 Vue / React 项目
需要对生成的图表进行二次定制（修改颜色、样式、交互）
在 Cursor 中边写代码边生成图表 option
技术文档中需要展示可运行的图表代码示例

接入配置

Claude Desktop / Cursor / OpenClaw（Streamable HTTP）

{
  "mcpServers": {
    "isqqw-echarts-code": {
      "url": "https://mcp.isqqw.com/generate-echarts-code/mcp",
      "headers": {
        "Authorization": "Bearer <YOUR_API_KEY>"
      }
    }
  }
}

在 https://mcp.isqqw.com 注册账号并创建 API Key，替换 YOUR_API_KEY。

工具列表（31个）

通用工具

工具名	说明
`code_generate_echarts`	直接传入完整 ECharts option JSON 字符串，返回格式化的 JS 代码（推荐用于复杂图表）

基础图表

工具名	说明
`code_generate_line_chart`	折线图代码
`code_generate_bar_chart`	柱状图代码
`code_generate_pie_chart`	饼图 / 环形图代码
`code_generate_radar_chart`	雷达图代码
`code_generate_scatter_chart`	散点图代码
`code_generate_effect_scatter_chart`	涟漪散点图代码
`code_generate_funnel_chart`	漏斗图代码
`code_generate_gauge_chart`	仪表盘代码

统计与分布

工具名	说明
`code_generate_boxplot_chart`	箱线图代码
`code_generate_heatmap_chart`	热力图代码
`code_generate_treemap_chart`	矩形树图代码
`code_generate_candlestick_chart`	K线图代码

关系与层级

工具名	说明
`code_generate_tree_chart`	树图代码
`code_generate_graph_chart`	关系图代码
`code_generate_sankey_chart`	桑基图代码
`code_generate_sunburst_chart`	旭日图代码
`code_generate_chord_chart`	弦图代码
`code_generate_parallel_chart`	平行坐标图代码

地理与时序

工具名	说明
`code_generate_map_chart`	地图代码（中国/世界/省级/城市级）
`code_generate_lines_chart`	路径图代码
`code_generate_theme_river_chart`	主题河流图代码
`code_generate_pictorial_bar_chart`	象形柱状图代码

@echarts-x 扩展图表

工具名	说明
`code_generate_liquid_fill`	水球图代码
`code_generate_word_cloud`	词云图代码
`code_generate_violin`	小提琴图代码
`code_generate_contour`	等高线图代码
`code_generate_stage`	阶段图代码
`code_generate_segmented_doughnut`	分段环形图代码
`code_generate_bar_range`	区间柱状图代码
`code_generate_line_range`	折线区间图代码

使用示例

用户：帮我生成一个中国各省 GDP 分布地图的 ECharts 代码

AI 调用 code_generate_map_chart：
- data: [{"name": "广东", "value": 135673}, {"name": "江苏", "value": 122875}, ...]
- mapName: "china"
- title: "中国各省GDP分布"

返回：
var option = {
  title: { text: "中国各省GDP分布" },
  tooltip: { trigger: "item" },
  visualMap: { min: 0, max: 150000, ... },
  series: [{ type: "map", map: "china", data: [...] }]
};

查看源码项目主页