设计(Design) 定义信息图的视觉呈现,对应配置对象中的 design 字段。它由三个核心元素组成:
- 结构(structure):布局与组织方式
- 标题(title):标题样式设计
- 数据项(item/items):数据单元的视觉样式
所有设计资产本质上都是 JSX 组件。框架提供 JSX 渲染引擎 及内置组件库,并支持注册自定义组件。
结构
结构是信息图的视觉骨架,决定整体布局并承载标题、数据项等设计元素,也可按需求加入装饰。
通过 options.design.structure 配置结构,例如:
SYNTAX
design structure list-row # 其他结构配置项... # 其他配置项...
下图展示相同数据项在两种结构下的差异:左为 list-grid 网格,右为 list-pyramid 金字塔。
标题
标题用于引导与说明。默认标题包含文本 title 与描述 desc,可按需配置。
标题样式通过 options.design.title 配置,具体文案通过 options.data.title 与 options.data.desc 传入:
SYNTAX
design title default align-horizontal left desc-line-number 2 # 其他标题设计配置项... # 其他设计配置项... data title 信息图标题 desc 这是信息图的描述文本 # 其他数据...
更多标题设计会持续增加。
数据项
数据项组件用于展示具体内容,是信息图的最小可视化单元。options.design 支持 item 与 items 两种形式,常用 item 配置单一数据项设计:
SYNTAX
design item simple-horizontal-arrow # 其他数据项设计配置项... # 其他配置项...
在层级结构等场景,可用 items 为不同层级设置不同设计:
SYNTAX
design items - level-1-item # 第一层级数据项设计 - level-2-item # 第二层级数据项设计
下图为两种层级设计示例:一级数据项使用 circle-node,二级使用圆角矩形文本 pill-badge。
