# 内容配置-指标组
指标类型数据集依赖于指标基础数据的配置。指标配置用于将指标系统的指标信息全部配置到数据可视化中。
# 风格展示
指标组共分为11种展示方式,对应指标组样式一 -- 指标组样式十一，如下图：
# 风格一：
# 风格二：
# 风格三：
# 风格四：
# 风格五：
# 风格六：
# 风格七：
# 风格八：
# 风格九：
# 风格十：
# 风格十一：
# 数据源配置
用来管理、配置组件的数据源，详细配置，请见：数据源配置
# 包装配置
用来设置组件的背景色，外边框等样式 详细配置，请见：包装配置
# 样式一内容配置
内容配置页面左侧为配置项展示，右侧为预览区域，预览区域将实时显示配置效果。
# 推荐搭配
样式一共两种推荐搭配：
1、图标大小：60px 数字大小：40px
2、图标大小：54px 数字大小：24px
# 属性解释
1、【指标列数】：以计数器形式展示每行显示的指标数量，如：将计数器数值设置为3，对应的指标每行展示3个，超过3个时换行处理。
2、【指标行数】：用于组件高度的自适应。例：设置行数为2行，每个组件展示高度为100% / 2 = 50%。
3、【图标大小】：用于设置组件中的图片大小，单位为px。
4、【图标高度】：用于设置组件中的图片行高，使其垂直居中，单位为px。
5、【数字大小】：用于设置组件中的数字大小设置，单位为px。
6、【数字行高】：用于处理数字对齐，以及文字位置，单位为px，可根据实际需求填写具体值，无需设置行高时可不填写该项，默认使用inherit（从父元素继承 line-height 属性的值）。
7、【外间距】: 模块外层间距（样式margin），分为4块，分别为：上，下，左，右，单位为px。
8、【是否垂直居中】：模块默认为垂直居中，当一个模块中出现两行内容时，可取消模块的垂直居中效果，根据实际需求选择是否开启该项。
9、【背景模糊】：当前样式下，背景使用运用毛玻璃效果。
10、【组件配置列表项】 用来设置单个组件，包括组件名称等， 详细配置，请见：包装配置
# 样式二内容配置
内容配置页面左侧为配置项展示，右侧为预览区域，预览区域将实时显示配置效果。
# 推荐搭配
样式二推荐搭配：
1、图标大小：70px 数字大小：12px
# 属性解释
1、【指标列数】：以计数器形式展示每行显示的指标数量，如：将计数器数值设置为3，对应的指标每行展示3个，超过3个时换行处理。
2、【图标大小】：用于设置组件中的图片大小，单位为px。
3、【数字大小】：用于设置组件中的数字大小设置，单位为px。
4、【内间距】: 模块内层间距（样式padding），分为4块，分别为：上，下，左，右，单位为px。
5、【展示标题】：用于控制组件夹名称是否显示的开关。
6、【标题位置】：【是否展示标题】开关开启时显示，用于设置组件夹名称显示位置，可选项为：上方、下方，居左、居中、居左。
7、【是否垂直居中】：模块默认为垂直居中，当一个模块中出现两行内容时，可取消模块的垂直居中效果，根据实际需求选择是否开启该项。
8、【背景模糊】：当前样式下，背景使用运用毛玻璃效果。
9、【组件配置列表项】 用来设置单个组件，包括组件名称等， 详细配置，请见：包装配置
该样式较为特殊
1、可设置组件类型为组件夹，并添加子组件
2、可设置组件类型为分割线
3、可选择图标展示方式，样式一多运用于线性图标，样式二多运用于彩色图标。
# 样式三内容配置
内容配置页面左侧为配置项展示，右侧为预览区域，预览区域将实时显示配置效果。
# 推荐搭配
样式二推荐搭配：
1、图标大小：24px 数字大小：12px
# 属性解释
1、【指标列数】：以计数器形式展示每行显示的指标数量，如：将计数器数值设置为3，对应的指标每行展示3个，超过3个时换行处理。
2、【图标大小】：用于设置组件中的图片大小，单位为px。
3、【数字大小】：用于设置组件中的数字大小设置，单位为px。
4、【内间距】: 模块内层间距（样式padding），分为4块，分别为：上，下，左，右，单位为px。
5、【展示标题】：用于控制组件夹名称是否显示的开关。
6、【标题位置】：【是否展示标题】开关开启时显示，用于设置组件夹名称显示位置，可选项为：上方、下方，居左、居中、居左。
7、【是否垂直居中】：模块默认为垂直居中，当一个模块中出现两行内容时，可取消模块的垂直居中效果，根据实际需求选择是否开启该项。
8、【组件配置列表项】 用来设置单个组件，包括组件名称等， 详细配置，请见：包装配置
# 样式四内容配置
内容配置页面左侧为配置项展示，右侧为预览区域，预览区域将实时显示配置效果。
# 属性解释
1、【指标列数】：以计数器形式展示每行显示的指标数量，如：将计数器数值设置为3，对应的指标每行展示3个，超过3个时换行处理。
3、【数字大小】：用于设置组件中的数字大小设置，单位为px。
4、【内间距】: 模块内层间距（样式padding），分为4块，分别为：上，下，左，右，单位为px。
5、【结构】：分为上下、左右两种，如下图：
6、【展示标题】：用于控制组件夹名称是否显示的开关。
7、【标题位置】：【是否展示标题】开关开启时显示，用于设置组件夹名称显示位置，可选项为：上方、下方，居左、居中、居左。
8、【是否垂直居中】：模块默认为垂直居中，当一个模块中出现两行内容时，可取消模块的垂直居中效果，根据实际需求选择是否开启该项。
9、【组件配置列表项】 用来设置单个组件，包括组件名称等， 详细配置，请见：包装配置
# 样式五内容配置
内容配置页面左侧为配置项展示，右侧为预览区域，预览区域将实时显示配置效果。
# 推荐搭配
样式二推荐搭配：
1、图标大小：60px 数字大小：28px
# 属性解释
1、【指标列数】：以计数器形式展示每行显示的指标数量，如：将计数器数值设置为3，对应的指标每行展示3个，超过3个时换行处理。
2、【图标大小】：用于设置组件中的图片大小，单位为px。
3、【数字大小】：用于设置组件中的数字大小设置，单位为px。
4、【内间距】: 模块内层间距（样式padding），分为4块，分别为：上，下，左，右，单位为px。
5、【展示标题】：用于控制组件夹名称是否显示的开关。
6、【标题位置】：【是否展示标题】开关开启时显示，用于设置组件夹名称显示位置，可选项为：上方、下方，居左、居中、居左。
7、【是否垂直居中】：模块默认为垂直居中，当一个模块中出现两行内容时，可取消模块的垂直居中效果，根据实际需求选择是否开启该项。
8、【组件配置列表项】 用来设置单个组件，包括组件名称等， 详细配置，请见：包装配置
# 样式六内容配置
内容配置页面左侧为配置项展示，右侧为预览区域，预览区域将实时显示配置效果。
样式六默认展示标题，标题内容为组件名称。
# 推荐搭配
样式二推荐搭配：
1、数字大小：30px
# 属性解释
1、【指标列数】：以计数器形式展示每行显示的指标数量，如：将计数器数值设置为3，对应的指标每行展示3个，超过3个时换行处理。
2、【数字大小】：用于设置组件中的数字大小设置，单位为px。
3、【数字行高】：用于处理数字对齐，以及文字位置，单位为px，可根据实际需求填写具体值，无需设置行高时可不填写该项，默认使用inherit（从父元素继承 line-height 属性的值）。
4、【内间距】: 模块内层间距（样式padding），分为4块，分别为：上，下，左，右，单位为px。
5、【是否垂直居中】：模块默认为垂直居中，当一个模块中出现两行内容时，可取消模块的垂直居中效果，根据实际需求选择是否开启该项。
6、【组件配置列表项】 用来设置单个组件，包括组件名称等， 详细配置，请见：包装配置
# 样式七内容配置
内容配置页面左侧为配置项展示，右侧为预览区域，预览区域将实时显示配置效果。
# 推荐搭配
样式二推荐搭配：
1、数字大小：22px
# 属性解释
1、【指标列数】：以计数器形式展示每行显示的指标数量，如：将计数器数值设置为3，对应的指标每行展示3个，超过3个时换行处理。
2、【数字大小】：用于设置组件中的数字大小设置，单位为px。
3、【数字行高】：用于处理数字对齐，以及文字位置，单位为px，可根据实际需求填写具体值，无需设置行高时可不填写该项，默认使用inherit（从父元素继承 line-height 属性的值）。
4、【外间距】: 模块外层间距（样式margin），分为4块，分别为：上，下，左，右，单位为px。
5、【内间距】: 模块内层间距（样式padding），分为4块，分别为：上，下，左，右，单位为px。
6、【是否垂直居中】：模块默认为垂直居中，当一个模块中出现两行内容时，可取消模块的垂直居中效果，根据实际需求选择是否开启该项。
7、【组件配置列表项】 用来设置单个组件，包括组件名称等， 详细配置，请见：包装配置
# 样式八内容配置
内容配置页面左侧为配置项展示，右侧为预览区域，预览区域将实时显示配置效果。
# 推荐搭配
样式二推荐搭配：
1、数字大小：30px
# 属性解释
1、【指标列数】：以计数器形式展示每行显示的指标数量，如：将计数器数值设置为3，对应的指标每行展示3个，超过3个时换行处理。
2、【数字大小】：用于设置组件中的数字大小设置，单位为px。
3、【数字行高】：用于处理数字对齐，以及文字位置，单位为px，可根据实际需求填写具体值，无需设置行高时可不填写该项，默认使用inherit（从父元素继承 line-height 属性的值）。
4、【外间距】: 模块外层间距（样式margin），分为4块，分别为：上，下，左，右，单位为px。
5、【内间距】: 模块内层间距（样式padding），分为4块，分别为：上，下，左，右，单位为px。
6、【是否垂直居中】：模块默认为垂直居中，当一个模块中出现两行内容时，可取消模块的垂直居中效果，根据实际需求选择是否开启该项。
7、【背景模糊】：当前样式下，背景使用运用毛玻璃效果。
8、【组件配置列表项】 用来设置单个组件，包括组件名称等， 详细配置，请见：包装配置
# 样式九内容配置
内容配置页面左侧为配置项展示，右侧为预览区域，预览区域将实时显示配置效果。
# 推荐搭配
样式二推荐搭配：
1、数字大小：12px
# 属性解释
1、【指标列数】：以计数器形式展示每行显示的指标数量，如：将计数器数值设置为3，对应的指标每行展示3个，超过3个时换行处理。
2、【数字大小】：用于设置组件中的数字大小设置，单位为px。
3、【数字行高】：用于处理数字对齐，以及文字位置，单位为px，可根据实际需求填写具体值，无需设置行高时可不填写该项，默认使用inherit（从父元素继承 line-height 属性的值）。
4、【外间距】: 模块外层间距（样式margin），分为4块，分别为：上，下，左，右，单位为px。
5、【内间距】: 模块内层间距（样式padding），分为4块，分别为：上，下，左，右，单位为px。
6、【是否垂直居中】：模块默认为垂直居中，当一个模块中出现两行内容时，可取消模块的垂直居中效果，根据实际需求选择是否开启该项。
7、【背景模糊】：当前样式下，背景使用运用毛玻璃效果。
8、【组件配置列表项】 用来设置单个组件，包括组件名称等， 详细配置，请见：包装配置
1、组件名称中存在变量时，使用{num}代替，自动替换为值列配置中选择的接口数据。
# 样式十内容配置
内容配置页面左侧为配置项展示，右侧为预览区域，预览区域将实时显示配置效果。
# 推荐搭配
样式二推荐搭配：
1、图标大小：60px 数字大小：28px
# 属性解释
1、【指标列数】：以计数器形式展示每行显示的指标数量，如：将计数器数值设置为3，对应的指标每行展示3个，超过3个时换行处理。
2、【图标大小】：用于设置组件中的图片大小，单位为px。
3、【图标高度】：用于设置组件中的图片行高，使其垂直居中，单位为px。
4、【数字大小】：用于设置组件中的数字大小设置，单位为px。
5、【数字行高】：用于处理数字对齐，以及文字位置，单位为px，可根据实际需求填写具体值，无需设置行高时可不填写该项，默认使用inherit（从父元素继承 line-height 属性的值）。
6、【外间距】: 模块外层间距（样式margin），分为4块，分别为：上，下，左，右，单位为px。
7、【内间距】: 模块内层间距（样式padding），分为4块，分别为：上，下，左，右，单位为px。
8、【是否垂直居中】：模块默认为垂直居中，当一个模块中出现两行内容时，可取消模块的垂直居中效果，根据实际需求选择是否开启该项。
9、【背景模糊】：当前样式下，背景使用运用毛玻璃效果。
10、【组件配置列表项】 用来设置单个组件，包括组件名称等， 详细配置，请见：包装配置
# 样式十一内容配置
内容配置页面左侧为配置项展示，右侧为预览区域，预览区域将实时显示配置效果。
# 推荐搭配
样式二推荐搭配：
1、数字大小：14px
# 属性解释
1、【指标列数】：以计数器形式展示每行显示的指标数量，如：将计数器数值设置为3，对应的指标每行展示3个，超过3个时换行处理。
2、【数字大小】：用于设置组件中的数字大小设置，单位为px。
3、【数字行高】：用于处理数字对齐，以及文字位置，单位为px，可根据实际需求填写具体值，无需设置行高时可不填写该项，默认使用inherit（从父元素继承 line-height 属性的值）。
4、【外间距】: 模块外层间距（样式margin），分为4块，分别为：上，下，左，右，单位为px。
5、【内间距】: 模块内层间距（样式padding），分为4块，分别为：上，下，左，右，单位为px。
6、【是否垂直居中】：模块默认为垂直居中，当一个模块中出现两行内容时，可取消模块的垂直居中效果，根据实际需求选择是否开启该项。
7、【背景模糊】：当前样式下，背景使用运用毛玻璃效果。
8、【组件配置列表项】 用来设置单个组件，包括组件名称等， 详细配置，请见：包装配置
1、组件名称中存在变量时，使用{num}代替，自动替换为值列配置中选择的接口数据。
# 组件表格配置
# 一：组件名称
配置组件名称，为input，可直接编辑，存在变量时，使用{num}代替，自动替换为值列配置中选择的接口数据。
# 二：字段一
配置组件中的字段一，为input，可直接编辑，存在变量时，使用{num}代替，自动替换为值列配置中选择的接口数据。
# 三：字段二
配置组件中的字段二，为input，可直接编辑，存在变量时，使用{num}代替，自动替换为值列配置中选择的接口数据。
# 四：值列配置
值列配置是配置指标组件的指标数值项，其值来源于数据源配置，具体配置请见”数据源配置“
1、必须先进行正确的数据源配置，该下拉框才会出现选项
2、预览时可见接口返回的正确数据，右侧实时展现取接口数据用0代替接口数据进行占位。
# 五：单位
配置组件中的单位，为input，可直接编辑。
# 六：类型
仅指标组-样式二，可选类型为：指标、链接、组件夹、分割线。
# 七：图标
设置组件图标，链接类型推荐使用彩色图标，指标类型推荐使用黑白色的线条。
# 八：样式切换
仅适用于“风格二”，设置组件图标样式，可根据需求选用，可配置的样式如下图：
# 九：背景色
可设置组件的背景颜色，搭配上述背景模糊值，可设置任意背景色调
背景色中出现两个选择背景框时，可为组件设置左右两种不同颜色的背景，如：组件-样式十。
# 十：操作列
1、新增，操作列后方按钮为添加组件按钮，点击可添加表格列，编辑组件。
2、编辑，编辑组件的其他项，包括是否跳转，值列配置，窗口配置等，具体见下图：
| 属性名 | 属性说明 |
|---|---|
| 跳转 | 组件类型为链接时，此按钮默认开启，开启时可设置跳转方式、窗口宽度、窗口高度、是否全屏、是否显示窗口标题 |
| 跳转来源 | 可选项为应用系统或组件，当选择应用系统时，跳转输入的应用系统链接，选择组件时，跳转展示选择的组件 |
| 组件 | 仅跳转来源为组件时展示，跳转至选择的组件 |
| 跳转方式 | 跳转方式为级联选择器，选项包括（跳转来源为组件时只可选择内部窗口）：1、内部窗口：通过门户内部弹窗打开，2、新页签：在当前浏览器新开一个页签展示跳转内容，3、新窗口：打开当前浏览器的新窗口 ，4、打开浏览器：通过指定浏览器打开 ，5、打开应用：打开指定的CS应用 详细配置流程和打开效果，请见:HOS门户跳转方式 |
| 窗口宽度 | 跳转方式为内部窗口时，可设置窗口宽度 |
| 窗口高度 | 跳转方式为内部窗口时，可设置窗口高度 |
| 是否全屏 | 点击组件打开弹窗时,弹窗是否要全屏展示 |
| 展示窗口标题 | 点击组件打开弹窗时,弹窗是否要显示窗口标题。详见”HOS门户弹窗配置“ |
| 所属应用系统 | 指标组中每一个小组件都可设置单独的所属应用系统，当该指标组组件中包含其他应用系统组件是可使用该项 |
| 值列配置 | 值列配置是配置指标组件的指标数值项，其值来源于数据源配置，具体配置请见”数据源配置“ |
| 参数配置 | 当跳转开关开启时，可配置多个参数 |
角标数值显示必须在【数据源配置】中选择正确的接口，并配置每一个组件对应的值列项：
具体配置位置：【组件设计-内容配置-组件列表-编辑-值列配置】，如下图：
指标对应的数据结构为：
类型一：适用于【风格一】、【风格二】、【风格三】、【风格四】、【风格五】、【风格六】、【风格八】
{
"success": true,
"code": 200,
"msg": "查询成功",
"data": {
"zhibiao01": "3",
"zhibiao02": "5",
"zhibiao03": "7",
"zhibiao04": "8",
},
"tips": "测试指标数据源"
}
类型二：适用于【风格七】
{
"data": {
"zhibiao01": {
"data01":"111:1",
"data02":"111:1",
"data03":"up",
"data04":"111.1"
},
"zhibiao02": {
"data01":"222:1",
"data02":"222:1",
"data03":"up",
"data04":"222.1"
},
"zhibiao03": {
"data01":"222:1",
"data02":"222:1",
"data03":"down",
"data04":"111.1"
},
}
}
类型三：适用于【风格九】
{
"data": {
"zhibiao01": {
"data01":"654",
"data02":"876"
},
"zhibiao02": {
"data01":"987",
"data02":"98"
},
"zhibiao03": {
"data01":"987",
"data02":"78"
},
}
}
类型四：适用于【风格十】【风格十一】
{
"data": {
"zhibiao01": {
"data01":"654",
"data02":"876",
"data03":"78",
},
"zhibiao02": {
"data01":"987",
"data02":"98",
"data03":"78",
},
"zhibiao03": {
"data01":"987",
"data02":"78",
"data03":"78",
},
}
}
# 示例：
以设计图为例,给出对应的配置方案
# 例1：
配置如下：
1、内容配置如下：
2、包装配置如下：
# 例2：
配置如下：
1、内容配置如下：
2、包装配置如下：
# 例3：
配置如下：
1、内容配置如下：
2、包装配置如下：
- 该风格需将包装配置中的标题设为隐藏
# 例4：
配置如下：
1、内容配置如下：
2、包装配置如下：
# 例5：
配置如下：
1、内容配置如下：
2、包装配置如下：
# 例6：
配置如下：
1、内容配置如下：
2、包装配置如下：
# 例7：
配置如下：
1、内容配置如下：
2、包装配置如下：
← 内容配置-自定义图表 内容配置-列表 →