图表

1. 组件概述

图表是一个内容展示组件，用于将数据以可视化的方式呈现。它基于 ECharts 图表库实现，支持折线图、柱状图、饼图、散点图、雷达图等多种图表类型。通过图表组件，可以将枯燥的数字数据转化为直观的图形，帮助用户快速理解数据趋势和分布规律。图表组件是数据分析和结果展示的核心组件。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：学习数据可视化。在学习辅导类应用中，展示学生的答题正确率趋势。将工作流返回的答题统计数据绑定到图表的变量名配置，使用折线图展示每日正确率变化，帮助学生直观了解自己的学习进步情况。
• 场景二：知识分布展示。在知识问答类应用中，用饼图展示用户提问的知识领域分布。工作流统计用户历史提问的分类数据后，图表自动更新显示各领域占比，帮助用户了解自己的知识偏好。

加载中...

查看 JSON

复制 JSON

3. 功能配置

配置

基本折叠组

配置项	说明
名字	组件的名称标识，用于在事件动作中定位该图表组件。例如设置为”scoreChart”，其他组件可以通过这个名字来刷新或操作该图表。

数据设置折叠组

配置项	说明
数据源	选择图表数据的来源方式。有两个选项：「上下文变量」表示从页面变量中获取图表配置，适合数据由工作流动态生成的场景；「静态JSON数据」表示直接在编辑器中配置固定的图表数据，适合展示固定内容的场景。
变量名	当数据源选择「上下文变量」时显示。填写存储 ECharts 配置的变量名，图表会自动读取该变量的值并渲染。例如工作流返回了名为”chartConfig”的变量，这里就填写”chartConfig”。
Echarts 配置	当数据源选择「静态JSON数据」时显示。这是一个代码编辑器，用于直接编写 ECharts 的配置代码。配置格式遵循 ECharts 官方规范，包括 xAxis（横轴）、yAxis（纵轴）、series（数据系列）等。默认提供了一个简单的折线图示例配置。
数据映射	高级配置，用于对数据进行二次处理。如果数据源返回的数据格式不符合 ECharts 要求，可以在这里编写 JavaScript 函数进行转换。函数接收三个参数：config（原始配置）、echarts（echarts对象）、data（接口返回的数据）。
更新策略	控制图表配置更新时的行为。「追加模式」会将新配置与旧配置合并，适合只更新部分数据的场景；「完全替换」会用新配置完全覆盖旧配置，适合需要完全刷新图表的场景。默认为「完全替换」。

图表下钻折叠组

配置项	说明
点击时下钻	配置图表的下钻功能。开启后，用户点击图表中的数据项（如某个柱子或某个数据点）时，会弹出一个详情弹窗，展示该数据项的更多信息。点击「添加 DrillDown」按钮可以配置弹窗内容，通常会在弹窗中放置另一个图表来展示详细数据。

状态折叠组

配置项	说明
可见	控制图表是否显示。默认可见。
隐藏	控制图表是否隐藏。与「可见」相反。

设计

宽高设置折叠组

配置项	说明
宽度	设置图表的宽度。默认为”100%“，即占满父容器宽度。可以设置具体像素值（如”400px”）或百分比（如”80%”）。
高度	设置图表的高度。默认为”300px”。可以设置具体像素值或百分比。注意：图表必须有明确的高度才能正常显示，如果使用百分比，需确保父容器有明确高度。

事件

配置项	说明
添加事件	图表支持四种触发事件：「初始化」在图表创建完成时触发；「鼠标点击」在用户点击图表数据项时触发，可获取被点击项的数据信息；「鼠标悬停」在鼠标移到数据项上时触发；「切换图例选中状态」在用户点击图例切换显示/隐藏某个数据系列时触发。点击事件常用于实现图表联动或下钻分析。