本文介绍流程图的图表样式和配置面板的功能。
流程图是以节点和线的形式表现事物之间关系的组件，支持自定义节点和连接线的样式，能够以节点和线的形式在可视化应用中展示复杂的流程关系。
节点尺寸：设置流程节点的宽度和高度控制节点的尺寸，单位默认px。
节点间距：设置流程节点之间的左右间距和上下间距，单位默认px。
非高亮样式：预览或发布时非高亮节点的样式。只有开启了点击自动高亮时，此选项才显示。
参数
说明
标题
非高亮节点内标题的背景色和字体颜色。
文本
非高亮节点内文本的背景色和字体色。
链接线颜色（非高亮）
非高亮的连接线的颜色。
标题样式：流程节点标题样式。
标题文本的样式，包括文本字体、文字粗细、字号和颜色。
行高
标题的行高值，单位默认px。
对齐方式
标题的对齐方式，包括左对齐、居中和右对齐。
标题背景
状态名：该系列标题背景的状态名数值，与数据面板中的status字段对应。
背景色：该系列标题背景颜色。
文本样式：流程节点文本框内文本样式。
文本框内文本的样式，包括文本字体、文字粗细、字号和颜色。
文本框内文本的行高值，单位默认px。
背景色
文本框的背景色。
类型文本
文本框内文本的类型样式，包括该类型文本的字体、文字粗细、字号和颜色。
当内容两列展示，此模块设置左侧类型文本。
连接线类型
流程图内连接线的类型，包括：贝塞尔曲线、直线和直角。
连接线颜色
流程图内连接线的颜色。
字段
nodes
节点描述信息，包含以下字段：
id：节点的ID内容。
title：节点的标题值。
status：节点的状态值。与配置面板内的标题背景内的状态名保持一致。
content：节点的内容。
edges
连接线描述信息，包含以下字段：
from：连接线连接的起始节点。
to：连接线连接的目标节点。
交互事件
当点击节点时
当双击节点时
当点击空白区域时
事件
当接口描述请求完成时
数据接口请求返回并经过过滤器处理后抛出的事件，同时抛出处理后的JSON格式的数据。具体数据示例请参见画布编辑器中组件右侧配置面板数据页签的数据响应结果区域。
当接口描述请求失败时
数据接口请求失败时（请求失败的情况可能是：网络问题或接口报错等）返回并经过过滤器处理后抛出的事件，同时抛出处理后的JSON格式的数据。具体数据示例请参见画布编辑器中组件右侧配置面板数据页签的数据响应结果区域。
当单击流程图的某一个节点时抛出当前节点的数据。
当双击流程图的某一个节点时抛出当前节点的数据。
当点击流程图的空白区域时抛出当前节点的数据。
动作
请求接口描述
导入接口描述
按组件绘制格式处理数据后，导入组件，重新绘制。不需要重新请求服务端数据。具体数据示例请参见画布编辑器中组件右侧配置面板数据页签的数据响应结果区域。
更新组件配置
动态更新组件的样式配置。需要先在组件的配置面板中，单击复制配置到剪贴板，获取组件配置数据。再根据需要在蓝图编辑器配置页面的数据处理节点中更改对应样式的字段值。
显示
显示组件，参考数据示例如下。
return{"animationType":"","animationDuration":1000,"animationEasing":"linear"}隐藏
隐藏组件，参考数据示例如下。
return{"animationType":"","animationDuration":1000,"animationEasing":"linear"}切换显隐状态
切换组件显示或者隐藏，参考数据示例如下。
return{"animationIn":{"animationType":"","animationDuration":1000,"animationEasing":"linear"},"animationOut":{"animationType":"","animationDuration":1000,"animationEasing":"linear"}}