形状

文档基于形状组件v1.1.28版本

组件说明

形状组件可根据接入数据或预置形状显示对应的样式。

效果案例

*形状 组件效果案例

一、样式

在样式中可以设置组件的基本属性状态设置水位回调

1、基本属性

位置尺寸

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

尺寸包括组件的宽度高度,单位为px;可单击比例锁锁定组件宽高比,等比例调整组件的宽高,比例锁默认不锁定。

基本柱状图组件尺寸不影响组件内容显示、组件动画。

*组件位置尺寸说明


默认隐藏

勾选之后在初始加载时组件默认隐藏且关闭回调触发,通常用来配合显隐控制,如【选项卡】组件进行显隐切换。

2、全局

配置项

说明

形状

预置矩形、圆形、三角形样式,同时支持上传svg文件格式。
svg文件可参考以下文档:https://www.runoob.com/svg/svg-tutorial.html

背景

支持设置形状背景为颜色或纹理

描边

支持设置形状边框颜色、粗细与圆角

阴影

支持设置形状内阴影与外阴影颜色、偏离程度、模糊度等

圆角

支持配置圆角设置

旋转

支持配置形状绕X,Y,Z的旋转。


3、动画

支持开启形状动画,设置是否循环播放。

配置项

说明

速度

预置矩形、圆形、三角形样式,同时支持上传svg文件确定样式

动画时长

支持设置形状背景为颜色或纹理

动画延时

支持设置形状边框颜色、粗细与圆角

动画间隔

支持设置形状内阴影与外阴影颜色、偏离程度、模糊度等

类型

可选择透明度、缩放、顺时针旋转、逆时针旋转和回旋转预置动画,同时也支持自定义动画。


4、滤镜

支持在形状上添加滤镜,预置的滤镜效果有高斯模糊、亮度、对比度、灰度、色相、反色、饱和度、褐色和阴影。

二、数据

组件数据格式

字段

说明

/

可以根据自己需求来配置

*组件数据格式说明


JSON数据案例

[
]


数据配置项说明

配置项

说明

数据源

数据源类型、数据源选择等

数据过滤器

勾选启用数据过滤器,单击添加过滤器,可在设置数据源页面中配置数据过滤器,详情请参见数据过滤器使用说明

数据响应结果

展示数据请求的响应结果

自动更新

选中后可以设置数据请求时间间隔


数据对接详情

数据对接详情请见以下文档👇

项目交付——数据对接入门

三、交互

载入动画

所有组件均提供移入、移入(小)、划变三种组件载入动画。

载入动画选择无时,则组件没有载入动画。

载入动画仅在可视化应用预览、发布组件加载时显示。

载入动画配置项:

配置项

说明

渐隐渐显

启用是

速率

匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、低速开始、低速结束、低速开始和结束(cubic-bezier(0.42,0,0.58,1))

方向

动画方向

持续时间

载入动画持续时间,单位为ms

延时

载入动画延时长,单位为ms


自定义事件

自定义事件为「交互事件」的增强模块,支持通过数据驱动组件状态、或变更组件样式配置,也可自定义编辑复杂的条件逻辑;

详细的自定义事件教学👉自定义事件教学


欢迎您在评论区留下您对该组件的意见,管理员会及时回复您,如长时间未回复欢迎您搜索钉钉群:33782396或者扫描以下二维码添加微信群 @谨禧 说出您的想法,采纳后将送出定制礼品。

也可以通过问卷来向我们反馈需求:https://jinshuju.net/f/XyCXU0

400-8505-905复制
免费试用
在线咨询
微信社区
易知微-数据可视化
微信扫一扫入群