# 组件属性配置
组件属性配置用于定义组件有哪些属性,以及属性的类型等基本信息。
组件属性配置采用两级配置:{ 属性分类: [ 属性,属性... ] }
。同一个分类(catalog
)下的属性不允许重名,默认分类为basic
。属性可以采用如下三种方式配置:
- 模块内置属性,不同模块组件内置了一些共有的属性配置,不需要再额外配置。
- 预置属性,系统预置了一些属性名和对应的配置信息,以
属性名
的形式引用。 - 预置属性组,系统预置了一些成组的属性,以
@属性组名称
的形式引用。 - 自定义属性,以JSON形式配置一个属性。
{
"properties": {
"basic": [
"compStyle",// 预置属性
"@dataset",// 预置属性组,包含了一组预置属性
{
"name": "title",
"type": "edit"
}// 自定义属性
],
"legend": ["@legend"],
"categoryAxis1": ["@categoryAxis"],
"valueAxis1": ["@valueAxis"],
"x": [["@dataDefinition"]],//二维数组表示x下可以存储多个对象
"y": [["@dataDefinition"]]
}
}
# 属性配置
通常属性只需要配置属性类型等少数选项,属性类型会包含属性配置选项的默认值,只有在需要覆盖时才按需配置。不同的属性有不同的额外配置。
{
"name": "...",
"type": "...",
"defaultValue": "...",
"saveTheme": true|false,
"saveConditionStyle": true|false,
"condition": "...",
"expContentType": "...",
"expAccessable": "...",
"refs": ["..."]
}
# name
属性名。属性名大小写敏感,在一个属性分类下唯一。
# type
属性类型。属性类型包含了属性的一些默认选项,可按需覆盖。
{
"name": "",
"type": "",
"property": ""//覆盖type的property属性
}
# defaultValue
属性的默认值。
{
"iconSize":{
"defaultValue": 10 //表示图标大小默认是10
}
}
# saveTheme
是否支持保存风格。
# saveConditionStyle
是否支持条件样式。
# condition
属性的显示条件,用于控制属性栏上该属性的显示隐藏。
{
"condition": "source==='url'"
}
语法参考条件表达式。
# expContentType
表达式编辑框编辑内容的模式。
auto
。可以编辑宏也可以编辑表达式expression
。必须是表达式。macro
。含宏的文本,如日期:${DATE()}
。
{
"expContentType": "expression"
}
# expAccessable
表示当前属性是否可以通过表达式访问。以日期组件的startDate
属性为例,配置如下:
{
"startDate":{
"expAccessable": "true"
}
}
表示可以在表达式中输入dateInput1.startDate
来引用输入控件的值。
# refs
当前属性依赖的属性。如果当前属性的值受到另一个属性的值影响,则需要配置当前属性依赖另一个属性。以输入控件的value
属性为例,配置如下:
{
"value":{
"refs": ["defaultValue"]
}
}
表示输入控件的value
属性需要依赖默认值defaultValue
属性,因为当默认值发生改变时,value的值也会发生变化。
# 属性类型
属性类型会包含属性配置选项的默认值。
# dataset
数据集。通常用于下拉框、单选面板等展示数据列表的组件。
默认配置
{
"dataset": { "type": "dataset" }
}
该类型会从属性列表中按属性名查找其它相关属性:
itemFilter
。用于过滤数据选项的表达式属性。
以下拉框配置为例,dataOptions属性会查找itemFilter属性作为选项过滤条件:
{
"properties": {
"dataset": { "type": "dataset" },
"itemFilter": { "type": "exp" }
}
}
组件渲染时,通过查询器获取数据:
let dp = this.getDataOptionsDataProvider();
dp.fetchData().then(items => {
//do sth
});
# 模块内置属性
不同模块组件公有的属性配置,包括id,name,以及位置属性。代码内部加入,不需额外配置。
- 仪表板
{
"id": {},
"name": {},
"left": {},
"top": {},
"width": {},
"height": {},
"offGrid": { "defaultValue": false },
"compStyle": {}
}
- SuperPage
{
"id": {},
"name": {},
"position": { "defaultValue": "relative" },
"top": { "defaultValue": 0 },
"left": { "defaultValue": 0 },
"bottom": {},
"right": {},
"rorate": { "defaultValue": 0 },
"height": {},
"minHeight": { "type": "size" },
"maxHeight": { "type": "size" },
"width": {},
"minWidth": { "type": "size" },
"maxWidth": { "type": "size" },
"flexible": { "defaultValue": false },
"flexGrow": { "defaultValue": 0 },
"flexShrink": { "defaultValue": 0 },
"compStyle": {}
}
# 预置属性
预置属性是系统默认配置好的属性配置,通过属性名
引用。
# dataset
数据组件的数据集属性配置,可用于列表或浮动面板。
{ "type": "dataset" }
# selected
数据组件引用'选中'表达式属性。
{ "type": "interactive" }
# selectedCount
数据组件引用'选中'个数表达式属性。
{ "type": "interactive" }
# checked
数据组件引用'勾选'表达式属性。
{ "type": "interactive" }
# checkedCount
数据组件引用‘勾选’个数表达式属性。
{ "type": "interactive" }
# font
字体。
{
"type": "font",
"defaultValue": { "family": "arial, helvetica, sans-serif", "bold": false, "italic": false, "underline": false, "lineThrough": false, "color": "font", "size": 12 }
}
# fill
背景填充。
{ "type": "fill" }
# borderRadius
圆角。
{ "defaultValue": { "all": 0 }, "type": "borderRadius" }
# cellPadding
单元格内边距。表格中使用。
{ "defaultValue": { "left" : 5, "right": 5, "top": 0, "bottom": 0 }, "type": "padding" }
# fieldFilters
组件字段过滤。
{ "type": "fieldFilter" }
# colorPalette
图表的色板选择。
{ "saveTheme": true, "defaultValue": "default" }
# textAlign
文字水平对齐方式。
{ "defaultValue": "left", "saveTheme": true }
# verticalAlign
文字垂直对齐方式。
{ "defaultValue": "top", "saveTheme": true }
# border
边框。
{ "defaultValue": { "all": { "type": "solid", "width": 1, "color": "lineColor" } }, "valueType": "border" }
# padding
内边距。
{ "defaultValue": { "all": 0 }, "valueType": "padding" }
# margin
外边距。
{ "defaultValue": { "all": 0 }, "valueType": "margin" }
# 预置属性组
预置属性集合是系统默认配置好的属性配置集合,通过@属性组名称
引用。
不同场景使用属性组时对组内的属性有不同的显示隐藏需求,可通过配置实现:
excludes
,排除属性,指定属性名数组。override
,覆盖属性,用指定的属性覆盖属性组的属性。condition
,生效条件,如果为false则不包含这些属性。
# @basic
组件基础属性。在basic
分类下,包括:
{
"fill": { "type": "fill" },
"border": { "defaultValue": { "all": { "type": "solid", "width": 1, "color": "lineColor" } }, "type": "border" },
"borderRadius": { "defaultValue": { "all": 0 }, "type": "borderRadius" },
"margin": { "defaultValue": { "all": 0 }, "type": "margin" },
"padding": { "defaultValue": { "all":0 },"type": "padding" },
"boxShadow": { "type": "shadow" },
"insetBoxShadow": { "type": "shadow" },
"textShadow": { "type": "shadow" },
"visible": { "defaultValue": "true" },
"visibleCondition": { "compileCondition": "visible===\"condition\"", "type": "exp","dynamicPropertyName": "visible" },
"disable": { "defaultValue": "false" },
"disableCondition": { "compileCondition": "disable===\"condition\"", "type": "exp", "dynamicPropertyName": "disable" }
}
# @basic_input
输入组件共用的基础属性组。在basic分类下,包括:
{
"height": { "saveConditionStyle": true, "saveTheme": true },
"font": { "type": "font",
"defaultValue": { "family": "arial, helvetica, sans-serif", "bold": false, "italic": false, "underline": false, "lineThrough": false, "color": "font", "size": 12 } },
"fill": { "type": "fill" },
"border": { "defaultValue": { "all": { "type": "solid", "width": 1, "color": "lineColor" } }, "type": "border" },
"borderRadius": { "defaultValue": { "all": 3 }, "type": "borderRadius" },
"margin": { "defaultValue": { "all": 0 }, "type": "margin" },
"padding": { "defaultValue": { "all": 5 }, "type": "padding" },
"visible": { "defaultValue": "true" },
"visibleCondition": { "compileCondition": "visible===\"condition\"", "type": "exp", "dynamicPropertyName": "visible" },
"disable": { "defaultValue": "false" },
"disableCondition": { "compileCondition": "disable===\"condition\"", "type": "exp", "dynamicPropertyName": "disable" },
"displayFormat": { "type": "displayFormat" },
"impactSource": { "defaultValue": "self" },
"scope": { "defaultValue": "all" }
}
# @title
组件标题属性。在title
分类下,包括:
{
"showTitle": { "defaultValue": true, "saveTheme": false },
"value": { "expContentType": "auto" },
"titlePosition": { "defaultValue": "top" },
"border": { "defaultValue": { "all": { "type": "none" } }, "type": "border" },
"contentAdjust": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": "no" },
"fill": { "type": "fill" },
"font": { "type": "font",
"defaultValue": { "family": "arial, helvetica, sans-serif", "bold": false, "italic": false, "underline": false, "lineThrough": false, "color": "font", "size": 12 }
},
"padding": { "defaultValue": { "all": 10 }, "type": "padding" },
"prefixIcon": { "type": "icons" },
"prefixIconColor": { "defaultValue": "#000000", "type": "color" },
"prefixIconSize": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": 32 },
"suffixIcon": { "type": "icons" },
"suffixIconColor": { "defaultValue": "#000000", "type": "color" },
"suffixIconSize": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": 32 },
"textAlign": { "saveTheme": true, "defaultValue": "left" },
"verticalAlign": { "saveTheme": true, "defaultValue": "middle" },
"textShadow": { "saveTheme": true, "type": "shadow" }
}
# @inputTitle
输入组件标题属性。用于位置在左右侧的输入组件标题。在title
分类下,包括:
{
"showTitle": { "defaultValue": true, "saveTheme": false },
"value": { "expContentType": "auto" },
"titlePosition": { "defaultValue": "left", "saveConditionStyle": true, "saveTheme": true },
"border": { "defaultValue": { "all": { "type": "none" } }, "type": "border" },
"contentAdjust": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": "no" },
"fill": { "type": "fill" },
"font": { "type": "font",
"defaultValue": { "family": "arial, helvetica, sans-serif", "bold": false, "italic": false, "underline": false, "lineThrough": false, "color": "font", "size": 12 } },
"height": { "defaultValue": "auto" },
"padding": { "defaultValue": { "left": 10, "top": 4, "right": 10, "bottom": 4 }, "type": "padding" },
"prefixIcon": { "type": "icons" },
"prefixIconColor": { "defaultValue": "#000000", "type": "color" },
"prefixIconSize": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": 32 },
"suffixIcon": { "type": "icons" },
"suffixIconColor": { "defaultValue": "#000000", "type": "color" },
"suffixIconSize": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": 32 },
"textAlign": { "saveTheme": true, "defaultValue": "left" },
"verticalAlign": { "saveTheme": true, "defaultValue": "middle" },
"textShadow": { "saveTheme": true, "type": "shadow" },
"width": { "saveTheme": true, "defaultValue": "100px" }
}
# @dataset
可选项属性组。包括:
{
"dataset": { "type": "dataset" },
"itemFilter": { "type": "itemFilter", "waits": ["dataset"] },
"itemDataConf": { "defaultValue": "caption" },
"searchEnabled": { "defaultValue": "auto" },
"arbitraryInputEnabled": { "defaultValue": true },
"multiple": { "defaultValue": false },
"selectAllEnable": { "defaultValue": false },
"checkedCountVisible": { "defaultValue": true },
"enableCleanValue": { "defaultValue": false },
"selectLeaf": { "defaultValue": false },
"showRootPath": { "defaultValue": false },
"captionPathVisible": { "defaultValue": false },
"showCount": { "defaultValue": false },
"excludeZeroCount": { "defaultValue": false },
"autoSelectFirst": { "defaultValue": false }
}
# @input
输入组件的基础属性组配置。包括:
{
"filters": { "type": "fieldFilter", "compileCondition": "!!autoFilter", "refs": ["value", "visible"] },
"value": { "calcType": 6, "contributorClassName": "InputValueRuntimeCompiledProperty", "refs": ["exp", "submitField" ] },
"txt": { "calcType": 6, "refs": ["value"] },
"filterExp": { "calcType": 6, "contributorClassName": "InputFilterExpRuntimeCompiledProperty", "refs": ["value"], "compileCondition": "!!autoFilter" },
"filterExpTxt": { "calcType": 6, "contributorClassName": "InputFilterExpTxtRuntimeCompiledProperty", "refs": ["txt"], "compileCondition": "!!autoFilter" },
"title": { "expContentType": "auto" },
"exp": { "type": "calcExp", "refs": ["calcCondition"] },
"calcCondition": { "compileCondition": "calcConditionEnabled===true", "valueType": "exp" },
"calcConditionEnabled": { "defaultValue" :false },
"mask": { "defaultValue": false },
"maskRule": { "defaultValue": "auto" },
"maskCondition": { "compileCondition": "!!mask", "valueType": "exp" },
"toggleFocusOnEnter": { "defaultValue": true },
"inheritValidate": { "defaultValue": true },
"notNull": { "defaultValue": false, "type": "validate_notNull", "refs": ["value"] },
"validateEnabled": { "defaultValue": false },
"validateExp": { "type": "validate_logic", "compileCondition": "!!validateEnabled" },
"validateMessage": { "type": "validateMessage", "compileCondition": "!!validateEnabled" },
"maxLength": {},
"dataRange": {},
"decCount": { "defaultValue": 0 },
"validateRules": { "valueType": "validateRules", "compileCondition": "!!validateEnabled" },
"autoFilter": { "defaultValue": false },
"conditionField": { "type": "reference", "referenceType": "field" },
"pattern": {},
"includeAllWhenEmpty": { "defaultValue": true },
"submitField": { "type": "submitField" },
"submitData": { "defaultValue": "true" },
"submitCondition": { "expContentType": "expression", "compileCondition": "submitData==='condition'" },
"displayFormat": {},
"placeholder": { "expContentType": "macro" },
"tooltip": { "expContentType": "macro" },
"textAlign": { "saveTheme": true, "defaultValue": "left" }
}
# @datecombobox
日期属性组配置。包括:
{
"dateType": { "defaultValue": "auto" },
"datePanel": { "defaultValue": "static" },
"selectExist": { "defaultValue": false },
"enableCleanValue": { "defaultValue": false },
"earliest": { "valueType": "exp" },
"latest": { "valueType": "exp" }
}
# @font
通用字体有关的属性组。包括:
{
"font": { "type": "font",
"defaultValue":{ "family":"arial, helvetica, sans-serif", "bold": false, "italic": false, "underline": false, "lineThrough": false, "color": "font", "size":12 } },
"textAlign": { "saveTheme": true, "defaultValue": "left" },
"verticalAlign": { "saveTheme": true, "defaultValue": "middle" },
"keywordColor": { "defaultValue": "#FF0000", "type": "color" }
}
# @table
通用表格属性组设置。包括:
{
"freezeColEnable": { "defaultValue": false },
"freezeCol": { "defaultValue": 1 },
"freezeRightCol": { "defaultValue": 0 },
"freezeLine": { "defaultValue": { "type": "solid", "color": "#000000", "width": 1 }, "type": "line" },"dragColWidth": { "defaultValue": true },
"enableSelectCells": { "defaultValue": false },
"enableDynamicColumns": { "defaultValue": false },
"dynamicColumns": { "type": "exp", "compileCondition": "enableDynamicColumns==true" },
"enableDrag": { "defaultValue": false },
"scrollMode": { "defaultValue": "auto" },
"tableBorder": { "defaultValue": { "all": { "type": "solid", "width": 1, "color": "#C9CACD" } }, "type": "border" },
"gridLine": { "defaultValue": { "all": { "type": "solid", "width": 1, "color": "#C9CACD" } }, "type": "border" }
}
# @expand
展开基本设置。包括:
{
"enableExpand": { "defaultValue": true },
"autoExpand": { "defaultValue": false },
"expand": { "defaultValue": "firstLeaf" }
}
# @expandIcon
折叠展开样式设置。包括:
{
"foldIcon": {},
"foldIconColor": { "defaultValue": "#000000", "type": "color" },
"foldIconSize": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": 16 },
"expandIcon": {},
"expandIconColor": { "defaultValue": "#000000", "type": "color" },
"expandIconSize": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": 16 }
}
# @placeholder
数据展示类组件的占位符。包括:
{
"placeholderType": { "defaultValue": "default" },
"placeholderFill": { "type": "images" },
"desc": {},
"html": {},
"font": { "defaultValue": { "bold": false, "italic": false, "underline": false, "lineThrough": false, "color": "#CCC", "size": 12 }, "type": "font" }
}
# @pagination
数据展示类组件的分页设置。包括:
{
"pageType": { "defaultValue": "default" },
"pagePosition": { "defaultValue": "bottom" },
"pageAlign": { "defaultValue": "center" },
"pageStyle": { "defaultValue": "noSquare" },
"totalCountVisible": { "defaultValue": true }
}
# @legend
图形的图例属性。包括:
{
"display": { "defaultValue": "auto" },
"position": { "defaultValue": "top" },
"align": { "defaultValue": "center" },
"scroll": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": true },
"font": { "type": "font",
"defaultValue": { "family": "arial, helvetica, sans-serif", "bold": false, "italic": false, "underline": false, "lineThrough": false, "color": "font", "size": 12 } },
"border": { "defaultValue": { "type": "none", "width": 1, "color": "lineColor" }, "type": "line" },
"padding": { "defaultValue": { "all": 5 }, "type": "padding" }
}
# @categoryAxis
图形的类目轴属性。包括:
{
"labelVisible": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": "true" },
"labelGap": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": "all" },
"contentAdjust": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": "autoRotate" },
"labelAngle": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": "0" },
"maxSize": { "saveConditionStyle": true, "saveTheme": true },
"labelFont": { "type": "font",
"defaultValue": {"bold": false, "italic": false, "underline": false, "lineThrough": false, "color": "font2", "size": 12, "family": "arial, helvetica, sans-serif" } },
"axisNameVisible": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": "false" },
"axisNameLocation": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": "end" },
"axisNameFont": { "type": "font",
"defaultValue": { "family":"arial, helvetica, sans-serif", "bold": false, "italic": false, "underline": false, "lineThrough": false, "color": "font", "size": 12 } },
"axisLineStyle": { "defaultValue": { "type": "solid", "width": 1, "color": "lineColor" }, "type": "line" },
"tickStyle": { "defaultValue": { "type": "solid", "width": 1, "color": "lineColor" }, "type": "line" },
"tickLength": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": 5 },
"splitLineStyle": { "defaultValue": { "type": "solid", "width": 1, "color": "lineColor" }, "type": "line" }
}
# @valueAxis
图形的值轴。包括:
{
"labelVisible": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": "true" },
"labelFormat": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": "auto" },
"labelAngle": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": "0" },
"labelFont": { "type": "font",
"defaultValue": {"bold": false, "italic": false, "underline": false, "lineThrough": false, "color": "font2", "size": 12, "family": "arial, helvetica, sans-serif" } },
"scale": { "defaultValue": "value" },
"minType": { "defaultValue": "value" },
"maxType": { "defaultValue": "value" },
"logBase": { "defaultValue": 10 },
"axisNameVisible": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": "false" },
"axisNameLocation": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": "end" },
"axisNameFont": { "type": "font",
"defaultValue": { "family":"arial, helvetica, sans-serif", "bold": false, "italic": false, "underline": false, "lineThrough": false, "color": "font", "size": 12 } },
"axisLineStyle": { "defaultValue": { "type": "solid", "width": 1, "color": "lineColor" }, "type": "line" },
"tickStyle": { "defaultValue": { "type": "solid", "width": 1, "color": "lineColor" }, "type": "line" },
"tickLength": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": 5 },
"splitLineStyle": { "defaultValue": { "type": "solid", "width": 1, "color": "lineColor" }, "type": "line" }
}
# @datadef
数据区字段或标记字段的编译属性配置。包括:
{
"exp": { "type": "exp", "evalEnv": 2, "refs": ["sorts"], "dynamicPropertyName": "value" },
"role": {},
"desc": { "type": "exp_auto", "evalEnv": 2 },
"displayFormat":{ "type": "displayFormat", "saveTheme": false },
"txt": { "type": "txt" },
"sorts": { "type": "sorts" }
}
# @tooltip
提示信息属性组配置。包括:
{
"tooltipVisible": { "defaultValue": true },
"tooltipContentType": { "defaultValue": "richText" },
"tooltip": { "type":"exp_macro", "delayEval": true, "compileCondition": "tooltipVisible==true&&tooltipContentType=='richText'" },
"html": { "type": "exp_macro", "delayEval": true, "compileCondition": "tooltipVisible==true&&tooltipContentType=='html'" },
"resPathType": { "defaultValue": "fix" },
"resPath": {},
"resPathExp": { "type": "exp_macro", "compileCondition": "tooltipVisible==true&&tooltipContentType===\"resource\"&&resPathType===\"exp\"" },
"params": { "type": "params", "expContentType": "auto", "compileCondition": "tooltipVisible==true&&tooltipContentType===\"resource\"" },
"resWidth": { "defaultValue": 350 },
"resHeight": { "defaultValue": 220 },
"tooltipTriggerOn": { "defaultValue": "mousemove" },
"tooltipCompStyle": { "saveConditionStyle": true, "saveTheme": true }
}
# @label
标签属性配置。包括:
{
"labelValue": { "valueType": "exp_macro", "delayEval": true, "richTextStyleNamesMapping": { "font": "labelFont" } },
"labelVisible": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": "false" },
"labelFont": { "valueType": "font",
"defaultValue": { "bold": false, "italic": false, "underline": false, "lineThrough": false, "color": "font2", "size": 12, "family":"arial, helvetica, sans-serif" } },
"labelTextShadow": { "saveConditionStyle": true, "saveTheme": true },
"labelPosition": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": "auto" },
"labelAngle": { "saveConditionStyle": true, "saveTheme": true, "defaultValue": "0" }
}
# @animation
组件属性栏动画属性组配置。包括:
{
"animationEnable": { "defaultValue": "inherit"},
"animationDuration": { "defaultValue": 3000 },
"animationEasing": {}
}
# @loopScroll
组件循环滚动设置属性组。可用于柱形图,表格自动滚动。包括:
{
"loopScroll": { "defaultValue": false },
"scrollModel": { "defaultValue": "scrollByItem" },
"scrollSpeed": { "defaultValue": 1 }
}