旋转卡片

旋转卡片是一种指标组件，适用于大屏可视化需要展示丰富繁多指标内容数据时，搭建出酷炫的大屏效果。

效果案例

配置

基础属性

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

组件尺寸：包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高。再次单击进行解锁，解锁后宽高比不受限制。比例锁默认不锁定。

旋转：以组件的中心为中心点，进行旋转，单位为度（°）。手动输入角度值，控制组件的旋转角度；

• 单击图标，控制组件左右翻转样式；
• 单击图标，控制组件上下翻转样式。

透明：取值范围为0~100%。为0%时，组件隐藏；为100%时，组件完全显示。默认为100%。

组件属性

全局

当前值类型：可选择通过索引或id来切换当前值。

• 索引：选择索引时，可通过常量设置默认选中的当前指标是第几个指标，通过表达式设置可动态切换当前值。
• 默认id：选择默认id时，可通过常量设置默认选中的当前指标是哪个id对应的指标数据，通过表达式设置可动态切换当前值。

动画

切换速度：切换一次指标所用的动画时间。

轮播

• 停止条件：满足条件时将停止轮播动画，当条件不再满足时会继续轮播。
• 时间间隔：两次切换中间间隔的时间。
• 方向：
  • 顺时针：水平滚动时，页面向左为前；垂直滚动时，页面向上为前；
  • 逆时针：水平滚动时，页面向右为后；垂直滚动时，页面向下为后。
• 移入暂停：打开时，当鼠标移入组件轮播会暂停，移出后再继续。

轨道

半径：圆型运动轨迹的半径。

后方留白：是否需要在轨迹后半段留白，以应对一些3d场景。

相机位置

配置将相机架在3维空间的坐标，以获得在此视角拍摄组件的成像。

x:10; y:6; z:900：

默认样式

宽度/高度/圆角：一个指标背景的大小及圆角。

透明度：指标的整体透明度。

背景：可设置颜色和图片。

边框：背景边框。

外阴影：背景外阴影。

内阴影：背景内阴影。

悬浮样式

鼠标移入时的样式。

当前样式

当前选中卡片的样式。

前进后退按钮

左右间距：与页面的间距。

垂直偏移：垂直于轮播方向的偏移距离。

显示方式：

• 移入：鼠标移入组件时显示按钮；
• 始终：始终显示按钮。

类型：可以选中系统图标，也可以自己上传图片自定义。

宽度/高度：按钮的尺寸大小。

内容

卡片中的内容以一行一行的字段内容进行显示。

字段名：此行内容对应的字段名称。

标题：此行内容前可配置标题内容。

布局

• 排列方式：标题与行内容的排列方式。

• 行高：内容的高度。为空时代表不限制行高，设置具体值后超出高度时仍然会显示，此时垂直对齐方式为居中、居下、两端时，会根据当前行高显示对齐效果。
• 列宽：内容的宽度。为空时代表不限制列宽，设置具体值后超出列宽时仍然会显示，此时水平对齐方式为居中、居右、两端时，会根据当前列宽显示对其效果。同时如果设置了内容溢出换行，会根据列宽进行自动换行。
• 水平对齐：未设置列宽时，居中、居右、两端均无效果，只能居左对齐。
• 垂直对齐：未设置行高时，居中、居下、两端均无效果，只能居上对齐。
• 内容溢出：默认溢出显示，设置列宽时还可以进行自动换行配置。

位置：内容针对于卡片内容区域的左上距离处为内容开始位置。

标题样式：标题的文本样式。

值样式

• 左偏移：值距离左边的偏移距离（横向排列，水平两端对齐时，此配置失效）。
• 值类型：支持文本、数值、指标类型的内容。
• 后缀：内容的后缀及样式。

当前样式：当前选中卡片的标题与值的文本样式。

图片系列

卡片内的图片，可通过配置条件设置不同的图片。

类型：支持图标或自定义图片。

宽度/高度/圆角/旋转：图片的大小、圆角及旋转角度。

位置：图片针对于卡片内容区域的左上距离处为图片开始位置。

当前样式：当前选中卡片的图片样式。

数据

组件数据格式

静态数据-JSON数据案例

[
    {
        "id": "1",
        "name": "产品-001",
        "value": 3849.04
    }
]

交互

支持配置鼠标点击事件
当点击组件时，触发交互事件：设置大屏变量、打开超链接、设置可见、设置JS事件、设置面板状态；

支持配置数值变化事件
当数值改变时，触发交互事件：设置大屏变量、设置可见、设置JS事件、设置面板状态。