跳至主要內容

进度条

2025年1月14日大约 1 分钟

进度条

属性

基础

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

  • 组件尺寸: 组件的宽度和高度,单位为px

    • 锁定纵横比::单击切换是否锁定纵横比,锁定时调整组件尺寸保持其宽度与高度的比例不变。 2024.3+
  • 组件位置: 组件在大屏中的位置,包括组件的横坐标和纵坐标,单位为px。横坐标为组件左上角距离页面左边界的像素距离,纵坐标为组件左上角距离页面上边界的像素距离。

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

    提示

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

  • 类型: 进度条的类型。

    • 线性

    • 环形

    • 仪表盘

  • 宽度: 进度条的宽度。

  • 背景色: 进度条的背景颜色。

  • 进度条底色: 进度条的底颜色。

  • 文字显示: 是否显示文字。

  • 环形宽度: 是否显示文字。

  • 长度: 是否显示文字。

  • 文字间距: 是否显示文字。

  • 两端形状: 是否显示文字。

  • 字体颜色: 字体的颜色。

  • 字体大小: 字体的大小。

  • 字体粗细: 字体的粗细。

  • 字体: 字体的格式。

  • 条件映射: 用于根据某种逻辑条件判断,符合条件时将执行条件下配置的样式。

    • 添加条件映射: 点击添加条件映射。

    • 重命名条件映射: 点击条件映射名可进行重命名,默认值为 未命名条件

    • 启用/停用条件映射: 点击可启用/停用条件映射,激活状态代表启用该条件映射。

    • 编辑条件映射: 点击按钮可在条件映射面板中编辑当前条件映射。

    • 删除条件映射: 点击按钮可删除当前条件映射。

    • 添加条件: 点击条件映射面板中在下拉框中选择具体条件进行添加。

    • 重命名条件: 点击条件名可进行重命名,默认值为条件类型,例 TOP条奇数条偶数条指定条

    • 启用/停用条件: 点击可启用/停用条件,激活状态代表启用该条件。

    • 删除条件: 点击按钮可删除当前条件。

盒样式

  • 高斯模糊: 模拟半透明磨砂玻璃的观感,结合透明度,使得背后的元素变得模糊,但轮廓和颜色仍依稀可见, 同时保持一定的视觉通透性。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时阴影比组件小。

提示框 2024.3+

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

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

  • 显示类型: 提示框内展示内容的类型,可选 组件模版2024.3+

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

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

  • 触发方式: 设置提示框被触发的方式,可选 悬停点击悬停或点击2024.3+

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

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

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

  • 显示位置: 选择提示框的展示位置,可选 内部中心上边左边下边右边2024.3+

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

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

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

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

  • 外观

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

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

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

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

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

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

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

    • 字体粗细: 设置提示框显示内容的字体粗细,可选 普通加粗更细

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

数据

静态数据

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

{
    "value": 60,
    "total": 100
}

数据资源

交互

数值改变事件

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

数据响应

进度条支持数据响应

节点编程

事件

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

    • 抛出的参数:  改变后的数据。
上次编辑于: 2025/2/26 16:47:12
贡献者: yaodd,xuch