Skip to main content
图表生成节点是LangChat Pro工作流中的模型节点，利用EChart生成柱状图、折线图、饼图等可视化图表，将图表数据作为变量传递给下游节点。

​
节点特性

图表生成节点属于工具型处理节点，其核心特性是执行图表生成操作并将结果封装为上下文变量，而非直接输出给用户。

​
工具节点 vs 输出节点

在LangChat Pro工作流中，节点按照输出特性分为两类： 输出节点（直接响应用户）：
  • LLM大模型节点：支持流式输出
  • 直接回复节点：输出变量内容
工具节点（上下文变量传递）：
  • 图表生成节点
  • 百度搜索节点
  • 知识库检索节点
  • 其他功能节点
工具型节点不会直接将内容输出给用户，必须通过直接回复节点引用其输出变量才能向用户展示结果。

​
图表生成节点

图表生成节点基于EChart图表库，提供强大的数据可视化能力，支持多种图表类型和丰富的配置选项。

​
配置参数

​
输入参数

图表类型：
  • 折线图：适合展示趋势变化
  • 柱状图：适合对比不同类别数据
  • 饼状图：适合展示占比关系
  • 通过图表类型选择器配置
图表数据：
  • 支持动态引用流程上下文变量
  • 支持静态数据输入
  • 支持变量和数据的混合输入
  • 通过智能变量选择器配置
  • 数据格式：用分号分隔的数字，例如：1;11;111
X轴数据：
  • 支持动态引用流程上下文变量
  • 支持静态数据输入
  • 支持变量和数据的混合输入
  • 通过智能变量选择器配置
  • 数据格式：用分号分隔的标签，例如：1月;2月;3月

​
输出变量

EChart图表JSON：
  • 数据类型：TEXT文本格式
  • 内容：EChart图表配置的JSON数据
  • 用途：供下游节点引用和处理

​
案例

Chart节点主要接收两个变量：
  1. 图表数据：图表数据，可以是静态数据，也可以是动态引用流程上下文变量。
  2. X轴数据：X轴数据，可以是静态数据，也可以是动态引用流程上下文变量。
我们兼容了各种数据结构的输入，尽可能的吧输入的数据解析为数组结构，保证能填充到Echart图表中。 ┌───────────────────┬─────────────────────────────────────────────┬────────────────────────┐
│ 输入 │ 解析路径 │ 输出 │
├───────────────────┼─────────────────────────────────────────────┼────────────────────────┤
│ “1,2,3” │ 含逗号 → splitByDelimiter │ [1, 2, 3] │
├───────────────────┼─────────────────────────────────────────────┼────────────────────────┤
│ “[1,2,3]” │ 方括号 → JSON 解析 │ [1, 2, 3] │ ├───────────────────┼─────────────────────────────────────────────┼────────────────────────┤ │ ”[‘a’,‘b’]” │ 方括号 → JSON 失败 → 单引号替换后 JSON 解析 │ [“a”, “b”] │ ├───────────────────┼─────────────────────────────────────────────┼────────────────────────┤ │ ”[“a”,“b”]” │ 方括号 → JSON 解析 │ [“a”, “b”] │ ├───────────────────┼─────────────────────────────────────────────┼────────────────────────┤ │ “a;b;c” │ 含分号 → 分号分割（保持向后兼容） │ [“a”, “b”, “c”] │ ├───────────────────┼─────────────────────────────────────────────┼────────────────────────┤ │ “draft,published” │ 含逗号 → splitByDelimiter │ [“draft”, “published”] │ ├───────────────────┼─────────────────────────────────────────────┼────────────────────────┤ │ “hello” │ 单个值 │ [“hello”] │ └───────────────────┴─────────────────────────────────────────────┴────────────────────────┘ 如下案例，结合数据库节点，将数据库生成的数据可视化： 
SELECT DISTINCT status AS x_axis_data
FROM aigc_app
ORDER BY status ASC
返回结果： 
[{"x_axis_data": "draft"}, {"x_axis_data": "published"}]
当前代码 array 类型的逻辑是收集所有行该列的值，最终输出变量 x_axis_data 就是 [“draft”, “published”]。 image-20260210141914276