数字卡片

属性

基础

• 组件标题： 用于在图层和节点编程中显示组件的名称。修改后在图层和节点编程中搜索组件时按照新标题进行搜索。1.1+

• 组件尺寸： 组件的宽度和高度，单位为px。

  • 锁定纵横比：：单击切换是否锁定纵横比，锁定时调整组件尺寸保持其宽度与高度的比例不变。 2024.3+

• 组件位置： 组件在大屏中的位置，包括组件的横坐标和纵坐标，单位为px。横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。

• 隐藏时解析： 默认组件设置隐藏后组件不解析，组件配置的数据资源及交互事件，节点编程事件都不会执行。当开启隐藏时解析时，上述功能将执行。

  提示

  隐藏时解析常用于页面中不需要展示组件但要获取相关数据。

• 排列方式： 设置卡片中标题和翻牌器的排列方式。

  • 垂直 标题和翻牌器垂直排列，标题在上，翻牌器在下。

  • 水平 标题和翻牌器水平排列，标题在左，翻牌器在右。

  • 反转 标题和翻牌器的排列顺序反转，标题在下，翻牌器在上。

• 对齐方式： 设置卡片中标题和翻牌器的对齐方式。

  • 起始 标题和翻牌器在排列方向上靠起始端对齐。

  • 居中 标题和翻牌器在排列方向上居中对齐。

  • 结束 标题和翻牌器在排列方向上靠结束端对齐。

• 间距： 设置卡片中标题与翻牌器的间距大小。间距值越大，标题与翻牌器之间的距离越大；值越小，标题与翻牌器之间的距离越小。

• 鼠标样式： 设置鼠标悬浮在组件上的样式。选择适合的鼠标样式以增强用户交互体验。

盒样式

• 高斯模糊： 模拟半透明磨砂玻璃的观感，结合透明度，使得背后的元素变得模糊，但轮廓和颜色仍依稀可见， 同时保持一定的视觉通透性。2024.3+

• 透明度： 设置组件的透明度，取值范围为0~1。当为0时，组件隐藏；当为1时，组件显示。默认透明度为 1。

• 2D 旋转： 设置组件的旋转角度度数。默认旋转度数为 0，其最大旋转度数为 360 度，从左向右拉取滑块为顺时针旋转。

• 3D 旋转： 点击在下拉框中选择3D旋转。4.2+

  • X 轴：基于横轴旋转，值为角度度数；

  • Y 轴：基于纵轴旋转，值为角度度数；

  • Z 轴：基于垂直于屏幕的轴旋转，值为角度度数（特别的，若只设置 Z 轴的值，则效果等同于 2D 旋转）。

  • 透视距离：观察者与屏幕之间的距离。值越大，距离屏幕越近；值越小，距离屏幕越远。默认为 500。

  • 透视位置：观察者与目标物之前的位置。分别代表 X 轴和 Y 轴，值为百分比值，取值范围为 0 ~ 100。默认 50|50，即正对目标物。

• 边框： 设置组件边框样式。

  • 单击设置单边样式。

  • 按 Ctrl 键，连续单击手柄，可同时设置多边样式。

  • 单击选中状态同时设置四边样式。

  • 可设置单个边框得显隐、颜色、宽度和类型。

• 圆角： 设置边框圆角，可分别设置四个方向的圆角大小。

• 背景：3.0+

  • 单击设置纯色背景。

  • 单击添加多个颜色设置渐变色背景。

  • 背景渐变色：线性渐变、径向渐变。

    • 线性渐变：可通过调整角度改变背景渐变的方向。
    

    • （1） 控制颜色交界线的渐变角度。

    • （2） 选择起始颜色并控制占比。

    • （3） 选择过渡颜色并控制占比。

    • 径向渐变：从组件中心向周围渐变，可选择“椭圆形”和“圆形”作为组件背景中心的形状。

    

    • （1） 控制渐变中心的形状。

    • （2） 选择起始颜色并控制占比。

    • （3） 选择过渡颜色并控制占比。

  • 背景图片：素材库图片、图片地址。

• 区域阴影：

  • 单击设置阴影颜色。

  • 单击切换阴影显示内部或外部。

  • 水平： 阴影的水平偏移量。值为0时阴影在组件下方，值>0时阴影向右侧偏移，值<0时阴影向左侧偏移。

  • 垂直： 阴影的垂直偏移量。值为0时阴影在组件下方，值>0时阴影向下方偏移，值<0时阴影向下方偏移。

  • 模糊： 阴影的模糊程度。值为0时阴影没有模糊效果，值越大阴影效果越明显。

  • 尺寸： 阴影的尺寸。值为0时阴影与组件大小相同，值>0时阴影比组件大，值<0时阴影比组件小。

标题

• 对齐边距： 设置卡片中标题距左边框的距离。

• 字体颜色： 设置标题的字体颜色。

• 字体大小： 设置标题的字体大小。

• 字体粗细： 设置标题的字体粗细，可选 普通、加粗、更细。

• 字体： 设置标题的字体格式，可选系统内置字体和自定义字体。

翻牌器

• 对齐边距： 设置翻牌器距卡片左边框的距离。值越大，翻牌器离左边框越远；值越小，翻牌器离左边框越近。

• 数字

  • 外间隔： 设置翻牌器数字之间的外部间隔。值越大，数字之间的外部距离越大；值越小，数字之间的外部距离越小。

  • 内间隔： 设置翻牌器数字之间的内部间隔。值越大，数字之间的内部距离越大；值越小，数字之间的内部距离越小。

  • 千分位分隔符： 设置是否显示千分位分隔符。开启后，数字会显示千分位分隔符。

  • 四舍五入： 设置是否对数字进行四舍五入。开启后，数字会根据小数位数进行四舍五入。

  • 小数位数： 设置数字显示的小数位数。

  • 始终动画： 设置是否始终显示数字变化的动画。

  • 动画时间（ms）： 设置数字变化动画的持续时间。时间值越大，动画速度越慢；值越小，动画速度越快。

  • 分隔符背景： 设置是否显示分隔符的背景。

  • 背景色： 设置翻牌器单个字符背景的颜色。

  • 背景圆角： 设置翻牌器单个字符背景的圆角大小。

  • 特殊数字： 设置系统内置特殊数字，可选 默认、数字字体一、数字字体二。

  • 字体颜色： 设置翻牌器数字的颜色。

  • 字体大小： 设置翻牌器数字的大小。

  • 字体粗细： 设置翻牌器数字的粗细，可选 普通、加粗、更细。

  • 字体： 设置翻牌器数字的格式，可选系统内置字体和自定义字体。

  • 图片设置

    • 图片选择 选择翻牌器单个字符背景图片，优先级高于背景色。

    • 图片地址 设置翻牌器单个字符背景图片地址，优先级高于背景色。

• 前缀： 翻牌器前缀的设置。

  • 内容： 设置前缀的内容。

  • 间距： 设置前缀与数字的间距。

  • 距下边距： 设置前缀距下边距的距离。

  • 字体颜色： 设置前缀的字体颜色。

  • 字体大小： 设置前缀的字体大小。

  • 字体粗细： 设置前缀的字体粗细，可选 普通、加粗、更细。

  • 字体： 设置前缀的字体格式，可选系统内置字体和自定义字体。

• 后缀： 翻牌器后缀的设置。

  • 内容： 设置后缀的内容。

  • 间距： 设置后缀与数字的间距。

  • 距下边距： 设置后缀距下边距的距离。

  • 字体颜色： 设置后缀的字体颜色。

  • 字体大小： 设置后缀的字体大小。

  • 字体粗细： 设置后缀的字体粗细，可选 普通、加粗、更细。

  • 字体： 设置后缀的字体格式，可选系统内置字体和自定义字体。

提示框 2024.3+

• 适用于在用户与图表交互时显示详细的数据信息。

• 显示： 组件是否显示提示框。

• 显示类型： 提示框内展示内容的类型，可选 组件 或 模版。2024.3+

  • 组件： 选择需要在提示框内展示的组件。禁止选择自身作为提示组件，不允许选在自身的父组件作为提示组件。仅在显示类型为组件时可配置。2024.3+

  • 模板： 可在模版输入框中输入提示框中内容。支持字符串模板和回调函数两种形式；若当前组件不是图表组件或者地图组件，模版输入框内可以输入html标签。仅在显示类型为模版时可配置。

• 触发方式： 设置提示框被触发的方式，可选 悬停、点击 和 悬停或点击。2024.3+

  • 悬停： 鼠标指针移动到组件或组件图形上时展示提示框。

  • 点击： 鼠标左键点击组件或组件图形上时展示提示框。

  • 悬停或点击： 悬停或点击二者都可以触发提示框展示。

• 显示位置： 选择提示框的展示位置，可选 内部中心、上边、左边、下边 和 右边。2024.3+

• 触发点： 提示框显示的触发位置，可选 坐标轴 或 数据项 触发。仅在当前组件为图表组件或者地图组件时可设置。

  • 坐标轴： 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。

  • 数据项： 数据项图形触发，主要在散点图、饼图等无类目轴的图表中使用。

• 多系列排序： 用来选择系列在提示框内的展示顺序，可选 根据系列升序、根据系列降序、根据数据升序、根据数据降序。仅在当前组件为图表组件或者地图组件且显示类型为模版时设置。

• 外观

  • 背景颜色： 设置提示框的背景颜色。

  • 边框颜色： 设置提示框的边框颜色。

  • 边框宽度： 设置提示框的边框宽度。值越大边框越宽。

  • 内边距： 设置提示框上下左右四边与内容之间的距离。值越大距离越大。

• 文本样式 仅在显示类型为模版时可设置。

  • 字体颜色： 设置提示框显示内容的字体颜色。

  • 字体大小： 设置提示框显示内容的字体大小。

  • 字体粗细： 设置提示框显示内容的字体粗细，可选 普通、加粗、更细。

  • 字体： 设置提示框显示内容的样式，可选系统内置字体和自定义字体

数据

静态数据

上图中的示例代码数据如下：

{
    "des": "数字卡片",
    "value": 886623
}

数据资源

• 选择数据资源： 切换到 数据资源 标签，点击可从数据管理或API中选择相应的数据资源作为组件的数据支撑。

• 还原默认数据： 点击①处刷新数据资源。

• 搜索数据中的字段： 当列表中字段过多时，可通过搜索框搜索列表中的字段。

• 刷新字段列表： 点击②处刷新字段列表

• 字段类型

  • 字符型： 标识符为A。

  • 数值型： 标识符为#。

交互

数值改变事件

勾选启用，开启数值改变事件。当数字卡片组件中数值改变时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考交互事件。

标题单击事件 3.0+

勾选启用，开启标题单击事件。当单击标题时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考交互事件。

数据响应

数字卡片支持数据响应。

节点编程

事件

• 数值改变事件： 数值改变时触发事件。

  • 抛出的参数：  改变后的数据。

• 标题单击事件： 标题单击时触发事件。3.0+

  • 抛出的参数：  数值绑定的数据。