组件使用

文字组件

包括单行文本框、多行文本框、渐变文本、指标卡、字符云、翻牌器、信息提示

单行文本

单行文本是文字组件的一种，支持自定义设定文本换行，并且配置文本样式、对齐方式、动画等，常用于复杂文本内容的展示。

一、样式

在样式中可以设置组件的基本属性 、基本配置 。

1、基本属性

• 位置：包括组件的横坐标 和纵坐标 ，单位为 px；横坐标 为组件左上角距离页面左边界的像素距离，纵坐标 为组件左上角距离页面上边界的像素距离。
• 尺寸：包括组件的宽度 和高度 ，单位为 px；可单击比例锁 锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

2、基本配置

• 文本样式

  可对文本样式按需修改

  

• 水平对齐

  配置文本水平位置：居中、居左、居右、两端对齐

• 段落间距

  配置各段落间距

• 阴影

  可以设置文本的阴影效果，包括色彩、偏移、模糊效果，以及模糊范围大小。（扩展：配置阴影范围大小）

  

二、数据

1、组件数据格式

组件数据格式说明

2、JSON数据案例

{
    "value": "单行文本框"
}

3、数据配置项说明

三、交互

多行文本

多行文本是文字组件的一种，支持自定义设定文本换行，并且配置文本样式、对齐方式等，常用于复杂文本内容的展示。

一、样式

在样式中可以设置组件的基本属性 、基本配置 。

1、基本属性

• 位置 包括组件的横坐标 和纵坐标 ，单位为px；横坐标 为组件左上角距离页面左边界的像素距离，纵坐标 为组件左上角距离页面上边界的像素距离。
• 尺寸 包括组件的宽度 和高度 ，单位为px；可单击比例锁 锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

2、基本配置

• 文本样式

  

• 阴影

  阴影可以设置文本的阴影效果，包括色彩、偏移、模糊效果，以及模糊范围大小。（扩展：配置阴影范围大小）

  

二、数据

1、组件数据格式

2、组件数据格式说明

转义字符空格占位示例

3、JSON数据案例

{
    "value": "多行文本"
}

4、数据配置项说明

字符云

字符云 可将多个文本通过平面或者球的方式进行展示。

效果案例

一、样式

在样式中可以设置组件的基本属性 、全局样式 和系列 。

1、基本属性

• 位置

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

• 尺寸

  包括组件的宽度 和高度 ，单位为px；可单击比例锁 锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

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

  

• 默认隐藏

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

2、全局样式

• 文字

  可以在文字中，修改词云的字体样式和字号大小

  

二、数据

1、组件数据格式

2、JSON数据案例

[
    {
        "name": "三星",
        "value": "1"
    },
    {
        "name": "小米",
        "value": "10"
    },
    {
        "name": "华为",
        "value": "20"
    },
    {
        "name": "oppo",
        "value": "30"
    },
    {
        "name": "抖音",
        "value": "40"
    },
    {
        "name": "快手",
        "value": "50"
    },
    {
        "name": "淘宝",
        "value": "60"
    },
    {
        "name": "百度",
        "value": "70"
    },
    {
        "name": "京东",
        "value": "80"
    },
    {
        "name": "天猫",
        "value": "100"
    },
    {
        "name": "字符1",
        "value": "200"
    }
]

3、数据配置项说明

渐变文字

渐变文字 是让文字颜色有渐变展示效果的文字组件。

效果案例

一、样式

在样式中可以设置组件的基本属性 和全局样式 。

1、基本属性

• 位置 包括组件的横坐标 和纵坐标 ，单位为px；横坐标 为组件左上角距离页面左边界的像素距离，纵坐标 为组件左上角距离页面上边界的像素距离。
• 尺寸 包括组件的宽度 和高度 ，单位为px；可单击比例锁 锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

渐变文字组件尺寸不影响组件内容显示、组件动画。

2、全局样式

• 字体样式

  渐变文字可以在字体样式中，进行修改文字的字体、大小、颜色、字重和对齐方式 。

  

二、数据

1、组件数据格式

2、JSON数据案例

{
    "value": "鲁班大屏"
}

3、数据配置项说明

三、交互

指标卡

指标卡是用于展示指标的组件。

效果示例

一、样式

• 组件属性

  

• 基础设置

  

• 全局配置

  

• 标题配置

  

• 内容配置

  

二、数据

1、组件数据格式

2、JSON数据案例

{
    "value": "12345"
}

3、数据配置项说明

三、交互

翻牌器

一、样式

在样式中可以设置组件的基本属性 、基本配置 。

1、基本属性

2、基本设置

• 文本样式

  

• 字体设置

  

• 阴影

  可以设置文本的阴影效果，包括色彩、偏移、模糊效果，以及模糊范围大小。（扩展：配置阴影范围大小）

  

二、数据

1、组件数据格式

组件数据格式说明：

2、JSON数据案例

{
    "value": 12896
}

3、数据配置项说明

三、交互

信息提示

一、样式

在样式中可以设置组件的基本属性 、基本配置 。

1、基本属性

2、基本设置

• 文本样式

  

• 字体设置

  

• 全局配置

  

二、数据

1、组件数据格式

2、JSON数据案例

/lu-ban/img/source/info.svg

3、数据配置项说明

三、交互

翻牌器

组件说明

翻牌器是指标组件的一种，支持自定义翻牌器的标题、数字、前缀、后缀样式，在可视化应用中用于展示实时数据的变化情况，通常单独用于热数据展示或与其他组件配合使用。

效果案例

一、属性

在样式中可以设置组件的基础设置 。

1、基本设置

• 标题

  设置标题名称。

• 所属屏幕

  设置组件的所属页面，点击移动进行操作

• 隐藏

  点击隐藏，可以进行组件隐藏，默认不隐藏

2、位置尺寸

• 位置 包括组件的横坐标 和纵坐标 ，单位为px；横坐标 为组件左上角距离页面左边界的像素距离，纵坐标 为组件左上角距离页面上边界的像素距离。
• 尺寸 包括组件的宽度 和高度 ，单位为px；可单击比例锁 锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

尺寸设置大于组件实际大小时，不影响组件显示，组件不被拉伸；尺寸宽度小于组件实际宽度时，组件布局受影响；尺寸高度小于组间实际高度时，不影响组件显示。

2 字体设置

3 数字阴影设置

4 分隔符设置

二、 数据

JSON数据案例

{
    "value": 12896
}

三、事件

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择对应的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义事件等。

辅助组

图片

图片组件 可上传自定义图片或者选择设计资源来显示图片，并可通过修改配置实现动画效果。

效果案例

在配置中可以设置组件的基础设置 、全局配置 、动画配置 。

一、样式

1、基础设置

• 标题

  设置标题名称。

• 所属屏幕

  设置组件的所属页面，点击移动进行操作

• 隐藏

  点击隐藏，可以进行组件隐藏，默认不隐藏

• 位置

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

• 尺寸

  包括组件的宽度 和高度 ，单位为px。

图片组件尺寸不影响组件内容显示、组件动画。

2.全局配置

• 图片上传

  图片优先使用数据面板中配置的数据，未配置数据面板中的数据时使用此处数据。

  

  图片保存素材后，可在资源-我的收藏-设计素材中直接使用，也可以直接使用官方素材。

• 边框圆角

  可配置图片圆角。

3、动画配置

点击启动后会展示下面的配置项

动画类型 ：透明度、缩放、顺时针旋转、逆时针旋转、自定义。

二、数据

1、组件数据格式

组件数据格式说明：

2、JSON数据案例

{
    "value": "img/img-default.png"
}

3、数据配置项说明

三、事件

为当前组件增加事件，包含数据更新、点击、双击、鼠标移入、鼠标移出。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择交互的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义事件等。

iframe

组件说明

iframe组件用于在当前项目中引用其他网页，在数据中输入指定url即可引用其他网页。

效果案例

一、属性

1、基础设置

在样式中可以进行组件的基础设置 。

标题到字体同其他组件。

2、地址

设置iframe的地址。

二、数据

1、组件数据格式

数据格式说明

2、JSON数据案例

http://10.16.3.92:8188/lu-ban

3、数据配置项说明

三、事件

为当前组件增加事件，包含数据更新、iframe内部事件、postMessage。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择交互的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义事件等。

视频组件

组件说明

视频流是视频组件的一种，主要用于对接监控视频 ，在可视化应用中主要应用于监控场景需求，对接监控视频展示场景。

效果案例

部分监管场景可视化效果设计

一、属性

在样式中可以设置组件的基础设置 。

1、基础设置

标题到字体同其他组件

2、地址

设置视频流的地址

二、数据

1、组件数据格式

数据格式说明

2、JSON数据案例

http://10.16.3.92:8188/lu-ban/

3、数据配置项说明

数据配置项说明

三、事件

为当前组件增加事件，包含数据更新、关闭、postMessage、加载完成。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择交互的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义事件等。

图标

组件说明

有单独的组件库，可以设置图标显示。

效果案例

一、属性

在样式中可以设置组件的基础设置、图标设置、图标选择 。

1、基础设置

2、图标设置

• 颜色

  设置图标的颜色。

• 大小

  设置图标的字体大小

• 角度

  设置图标的旋转角度，默认0度，可以设置90度，180度，270度，例如设置90度，相应的图片会旋转

  

3、图标选择

支持图标搜索，分为动画、天气、通用三大类，点击选项卡支持切换

二、事件

为当前组件增加事件，包含数据更新、点击、双击。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择交互的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义事件等。

矩形组件

组件说明

块状组件，可以当作其他内容的背景，支持渐变显示。

效果案例

可视化效果设计

一、属性

在样式中可以设置组件的基础设置 。

1、基础设置

• 标题到字体同其他组件

• 背景色

  点击后弹出颜色选择框，支持hex，rgba等，点击两个色块可以选择渐变显示，右上部可以设置渐变的角度。

  

• 描边粗细

  设置描边的宽度。

• 描边颜色

  输入描边的颜色，支持hex， rgba。

• 圆角

  设置自定义矩形的圆角。

二、事件

为当前组件增加事件，包含数据更新、点击、双击、鼠标移入、鼠标移出。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件。

2、动作

可以选择交互的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义等

直线

组件说明

可以用作分割线，支持渐变显示。

效果案例

可视化效果设计

一、属性

在样式中可以设置组件的基础设置 。

1、基础设置

• 标题到字体同其他组件

• 线条样式

  可以设置为实线、点线、虚线、混合线。

• 线条宽度

  设置线条的宽度。

• 线条颜色

  输入描边的颜色，支持hex， rgba。

• 填充颜色

  设置线条的填充颜色，支持渐变色，支持hex， rgba。

二、事件

为当前组件增加事件，包含数据更新。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件。

2、动作

可以选择交互的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义等

数据人

组件说明

用于页面添加数字人。

效果案例

部分监管场景可视化效果设计

一、属性

在样式中可以设置组件的基础设置、配置 。

1、基本设置

标题到字体同其他组件。

2、配置

数据格式说明

• 播放语音

  开启后会播放下面设置的语音内容。

  

• 切换服饰

  可以选择默认服饰或者节日服装，选择节日服装后这样显示。

  

• 开启走路动画、开启动作

  可以设置相应动画内容

二、数据

1、JSON数据案例

{
    "value": "/lu-ban/static/spa/index.html?ui=0&dir=2k"
}

2、数据配置项说明

三、事件

为当前组件增加事件，包含数据更新。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件。

2、动作

可以选择交互的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义等。

X6

组件说明

用户绘制IOT内容。

效果案例

部分监管场景可视化效果设计

一、属性

在样式中可以设置组件的基础设置 。

1、基本设置

• 标题到字体同其他组件。

• 编辑

  点击编辑后，有如下配置，可以新增节点，进行节点图片配置、节点ports配置、边线配置。

  

二、数据

1、JSON数据案例

[
    {
        "id": 0,
        "imgKey": 0
    },
    {
        "id": 1,
        "imgKey": 0
    },
    {
        "id": 2,
        "imgKey": 0
    },
    {
        "id": 3,
        "imgKey": 0
    }
]

2、数据配置项说明

三、事件

为当前组件增加事件，包含数据更新、点击。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择交互的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义等

闭合多边形

组件说明

用于展示一个闭合的区域。

效果案例

一、属性

在样式中可以设置组件的基础设置、编辑设置 。

1、基本设置

标题到字体同其他组件。

2、编辑设置

开启编辑后，会看到实验楼的demo，支持添加新的内容。

点击编辑会弹出如下弹窗，支持对多边形进行各类设置。

二、事件

为当前组件增加事件，包含数据更新和点击。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择交互的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义等

轮播组件

组件说明

用于循环展示一组内容。

效果案例

一、属性

在样式中可以设置组件的基础设置、轮播设置、标题文字设置、展示信息文字设置 。

1、基础设置

标题到字体同其他组件。

2、轮播设置

可以设置一屏展示的轮播项数量、设置单个轮播的宽度、单个轮播的高度、轮播项的左右间隔及是否开启轮播。

3、标题文字设置

可以设置顶部标题的间距、文字大小以及字符间的间距。

4、展示信息文字设置

二、数据

数据可以参考组件自带静态数据的数据格式。

数据配置项说明

三、事件

为当前组件增加事件，包含数据更新、点击、双击。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择交互的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义等

二次确认弹窗

组件说明

用于展示二次确认的信息，并可配置确定或者取消的后续操作。

效果案例

一、属性

在样式中可以设置组件的基础设置、全局配置 。

1、基础设置

标题到字体同其他组件。

2、全局配置

可以设置二次弹窗的标题和提示内容。

二、数据

数据可以设置显示的图标。

数据配置项说明

三、事件

为当前组件增加事件，包含数据更新、确认、取消。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择交互的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义事件等。

物联设备

组件说明

目前用于配置视频播放。

效果案例

一、属性

在样式中可以设置组件的基础设置、屏幕选择 。

1、基础设置

标题到字体同其他组件。

2、屏幕选择

可以设置单屏、四分屏、九分屏，可以设置屏幕、是否自动播放、是否循环、设置设备和通道，点击复制信息会复制出携带deviceId和channelId的对象。

二、数据

数据可以设置显示的图标。

1、数据配置项说明

三、事件

为当前组件增加事件，包含数据更新。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择交互的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义等

轨迹回放

组件说明

用于设置轨迹回放的当前进度和播放时的速度。

效果案例

一、属性

在样式中可以设置组件的基础设置、设置、滑块设置、分割线设置 。

1、基础设置

标题到字体同其他组件。

2、设置

3、滑块设置

4、分割线设置

二、事件

为当前组件增加事件，包含数据更新、点击。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择交互的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义等

指标组件

进度条

组件说明

百分比条可以用来记录事项进程或占比情况。

效果案例

一、属性

在样式中可以设置组件的基础设置 。

1、基本设置

• 标题

  设置标题名称。

• 所属屏幕

  设置组件的所属页面，点击移动进行操作

• 隐藏

  点击隐藏，可以进行组件隐藏，默认不隐藏

2、位置尺寸

• 位置 包括组件的横坐标 和纵坐标 ，单位为px；横坐标 为组件左上角距离页面左边界的像素距离，纵坐标 为组件左上角距离页面上边界的像素距离。
• 尺寸 包括组件的宽度 和高度 ，单位为px；可单击比例锁 锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

尺寸设置大于组件实际大小时，不影响组件显示，组件不被拉伸；尺寸宽度小于组件实际宽度时，组件布局受影响；尺寸高度小于组间实际高度时，不影响组件显示。

3、图形配置

二、数据

JSON数据案例

{
    "value": 60,
    "des": "进度条悬浮展示内容"
}

渐变进度条

组件说明

渐变进度条是用于反映指标的组件之一，可设相关样式，智能地展示指标实时的变化情况。

效果案例

一、属性

在样式中可以设置组件的基础设置 。

1、基础设置

• 标题

  设置标题名称。

• 所属屏幕

  设置组件的所属页面，点击移动进行操作

• 隐藏

  点击隐藏，可以进行组件隐藏，默认不隐藏

2、位置尺寸

• 位置 包括组件的横坐标 和纵坐标 ，单位为px；横坐标 为组件左上角距离页面左边界的像素距离，纵坐标 为组件左上角距离页面上边界的像素距离。
• 尺寸 包括组件的宽度 和高度 ，单位为px；可单击比例锁 锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

尺寸设置大于组件实际大小时，不影响组件显示，组件不被拉伸；尺寸宽度小于组件实际宽度时，组件布局受影响；尺寸高度小于组间实际高度时，不影响组件显示。

组件位置尺寸说明

3、进度条设置

二、数据

1、JSON数据案例

[
    {
        "name": "线上",
        "count": 152
    },
    {
        "name": "线下",
        "count": 285
    }
]

三、事件

事件包含：点击、鼠标移入和鼠标移出。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择对应的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义事件等。

仪表盘

组件说明

仪表盘是一个半圆形的指标指示图，给定数据范围，通过仪表盘的形式显示不同范围内数据的组件。

效果案例

一、属性

在样式中可以设置组件的基础设置 。

1、基础设置

• 标题

  设置标题名称。

• 所属屏幕

  设置组件的所属页面，点击移动进行操作

• 隐藏

  点击隐藏，可以进行组件隐藏，默认不隐藏

2、位置尺寸

• 位置 包括组件的横坐标 和纵坐标 ，单位为px；横坐标 为组件左上角距离页面左边界的像素距离，纵坐标 为组件左上角距离页面上边界的像素距离。
• 尺寸 包括组件的宽度 和高度 ，单位为px；可单击比例锁 锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

尺寸设置大于组件实际大小时，不影响组件显示，组件不被拉伸；尺寸宽度小于组件实际宽度时，组件布局受影响；尺寸高度小于组间实际高度时，不影响组件显示。

3、自定义设置

如若属性配置不能符合需求，可开启自定义配置，编码实现需求。

5、图形配置

6、刻度配置

7、指标配置

8、自定义配色

二、数据

1、JSON数据案例

{
    "value": 0.6
}

齿轮进度条

组件说明

齿轮进度条是一个圆形的指标指示图，给定数据范围，通过仪表盘的形式显示不同范围内数据的组件。

效果案例

一、属性

在样式中可以设置组件的基础设置 。

1、基础设置

2、图形配置

3、指标配置

4、颜色配置

二、数据

JSON数据案例

{
    "value": 38
}

三、事件

事件包含：点击、鼠标移入和鼠标移出。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择对应的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义事件等。

百分比仪表盘

组件说明

百分比仪表盘是用于反映指标的组件之一，是一个半圆形的指标指示图，给定数据范围，通过仪表盘的形式显示不同范围内数据的组件。

效果案例

一、属性

在样式中可以设置组件的基础设置 。

1、基础设置

2、仪表盘设置

二、数据

1、JSON数据案例

{
    "name": "线上",
    "percent": 75
}

三、事件

事件包含：点击、双击、鼠标移入和数据更新。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择对应的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义事件等。

时速仪表盘

组件说明

时速仪表盘是用于反映指标的组件之一，是一个半圆形的指标指示图，给定数据范围，通过仪表盘的形式显示不同范围内数据的组件。

效果案例

一、属性

在样式中可以设置组件的基础设置 。

1、基础设置

2、图形配置

3、刻度配置

4、指标配置

5、颜色配置

二、数据

1、JSON数据案例

{
    "value": 80
}

三、事件

事件包含：点击。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择对应的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义事件等。

拥堵情况仪表盘

组件说明

拥堵情况仪表盘是用于反映指标的组件之一，通过仪表盘的形式显示不同范围内数据的组件。

效果案例

一、属性

在样式中可以设置组件的基础设置 。

1、基础设置

2、图形配置

3、刻度配置

4、指标配置

5、颜色配置

6、装饰配置

二、数据

1、JSON数据案例

{
    "value": 6.2
}

三、事件

事件包含：点击。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择对应的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义事件等。

多色仪表盘

组件说明

多色仪表盘是用于反映指标的组件之一，通过仪表盘的形式显示不同范围内数据的组件。

效果案例

一、属性

在样式中可以设置组件的基础设置 。

1、基础设置

2、图形配置

3、刻度配置

4、指标配置

5、颜色配置

二、 数据

JSON数据案例

{
    "value": 6.2
}

三、事件

事件包含：点击、双击、鼠标移入和数据更新。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择对应的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义事件等。

交互组件

按钮

组件说明

按钮组件可以通过默认、悬停、点击等配置项修改按钮组件不同状态的样式，可用于页面之间的效果切换，用于交互效果的实现，在可视化应用中使用广泛。

效果案例

一、属性

在样式中可以设置组件的基础设置 。

1、基础设置

• 标题

  设置标题名称。

• 所属屏幕

  设置组件的所属页面，点击移动进行操作

• 隐藏

  点击隐藏，可以进行组件隐藏，默认不隐藏

2、位置尺寸

• 位置 包括组件的横坐标 和纵坐标 ，单位为px；横坐标 为组件左上角距离页面左边界的像素距离，纵坐标 为组件左上角距离页面上边界的像素距离。
• 尺寸 包括组件的宽度 和高度 ，单位为px；可单击比例锁 锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

尺寸设置大于组件实际大小时，不影响组件显示，组件不被拉伸；尺寸宽度小于组件实际宽度时，组件布局受影响；尺寸高度小于组间实际高度时，不影响组件显示。

组件位置尺寸说明

3、全局样式

4、默认设置

5、悬浮设置

二、 事件

事件包含：点击、双击、鼠标移入和鼠标移出。

配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

动作

可以选择对应的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义事件等。

选项卡

组件说明

选项卡组件可以通过网格布局、背景、选中样式等配置项修改组件样式；常用于多组件、多页面之间的效果切换，用于交互效果的实现。

效果案例

一、属性

在样式中可以设置组件的基础设置 。

1、基础设置

• 标题

  设置标题名称。

• 所属屏幕

  设置组件的所属页面，点击移动进行操作

• 隐藏

  点击隐藏，可以进行组件隐藏，默认不隐藏

2、位置尺寸

• 位置 包括组件的横坐标 和纵坐标 ，单位为px；横坐标 为组件左上角距离页面左边界的像素距离，纵坐标 为组件左上角距离页面上边界的像素距离。
• 尺寸 包括组件的宽度 和高度 ，单位为px；可单击比例锁 锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

尺寸设置大于组件实际大小时，不影响组件显示，组件不被拉伸；尺寸宽度小于组件实际宽度时，组件布局受影响；尺寸高度小于组间实际高度时，不影响组件显示。

3、选项组设置

4、默认状态设置

5、选中状态设置

6、自定义内容设置

如若以上属性不满足需求，可以通过自定义设置组件。

二、数据

JSON数据案例

[
    {
        "label": "选项卡1",
        "value": "1",
        "flag": true
    },
    {
        "label": "选项卡2",
        "value": "2"
    }
]

三、事件

事件包含：点击、选项变化、鼠标移入、鼠标移出和组件事件。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择对应的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义事件等。

时间选择器

组件说明

时间选择器可自主选择时间结点，时间精确到时:分:秒，用户可选择时间，满足各时间段的选择，通常与图表类组件配置交互。

效果案例

一、属性

在样式中可以设置组件的基础设置 。

1、基础设置

• 标题

  设置标题名称。

• 所属屏幕

  设置组件的所属页面，点击移动进行操作

• 隐藏

  点击隐藏，可以进行组件隐藏，默认不隐藏

2、位置尺寸

• 位置 包括组件的横坐标 和纵坐标 ，单位为px；横坐标 为组件左上角距离页面左边界的像素距离，纵坐标 为组件左上角距离页面上边界的像素距离。
• 尺寸 包括组件的宽度 和高度 ，单位为px；可单击比例锁 锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

尺寸设置大于组件实际大小时，不影响组件显示，组件不被拉伸；尺寸宽度小于组件实际宽度时，组件布局受影响；尺寸高度小于组间实际高度时，不影响组件显示。

3、时间选择器设置

4、下拉框设置

二、数据

JSON数据案例

{
    "value": "00时00分00秒"
}

三、事件

事件包含：聚焦、失焦、值变化和数据更新。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择对应的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义事件等。

日期选择器

组件说明

日期选择器可自主选择时间结点，时间精确到年/月/日，用户可选择日期，满足各时间段的选择，通常与图表类组件配置交互。

效果案例

一、属性

在样式中可以设置组件的基础设置 。

1、基础设置

• 标题

  设置标题名称。

• 所属屏幕

  设置组件的所属页面，点击移动进行操作

• 隐藏

  点击隐藏，可以进行组件隐藏，默认不隐藏

2、位置尺寸

• 位置 包括组件的横坐标 和纵坐标 ，单位为px；横坐标 为组件左上角距离页面左边界的像素距离，纵坐标 为组件左上角距离页面上边界的像素距离。
• 尺寸 包括组件的宽度 和高度 ，单位为px；可单击比例锁 锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

尺寸设置大于组件实际大小时，不影响组件显示，组件不被拉伸；尺寸宽度小于组件实际宽度时，组件布局受影响；尺寸高度小于组间实际高度时，不影响组件显示。

3、日期选择器设置

4、下拉框设置

二、 数据

1、JSON数据案例

{
    "value": "2000-01-01"
}

三、事件

事件包含：聚焦、失焦、值变化和数据更新。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择对应的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义事件等。

日期时间选择器

组件说明

日期时间选择器可自主选择时间结点，时间精确到年/月/日 时:分:秒，用户可选择日期和时间任意搭配，满足各时间段的选择，通常与图表类组件配置交互。

效果案例

一、属性

在样式中可以设置组件的基础设置 。

1、基础设置

• 标题

  设置标题名称。

• 所属屏幕

  设置组件的所属页面，点击移动进行操作

• 隐藏

  点击隐藏，可以进行组件隐藏，默认不隐藏

2、位置尺寸

• 位置 包括组件的横坐标 和纵坐标 ，单位为px；横坐标 为组件左上角距离页面左边界的像素距离，纵坐标 为组件左上角距离页面上边界的像素距离。
• 尺寸 包括组件的宽度 和高度 ，单位为px；可单击比例锁 锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

尺寸设置大于组件实际大小时，不影响组件显示，组件不被拉伸；尺寸宽度小于组件实际宽度时，组件布局受影响；尺寸高度小于组间实际高度时，不影响组件显示。

3、日期时间选择器设置

4、下拉框设置

二、 数据

1、JSON数据案例

{
    "value": "2000-01-01 00:00:00"
}

三、事件

事件包含：聚焦、失焦、值变化和数据更新。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择对应的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义事件等。

下拉菜单

组件说明

下拉菜单 提供可下拉滚动的菜单选项，可在有限的大屏空间内提供较大数量的选项。

效果案例

一、属性

在样式中可以设置组件的基础设置 。

1、基础设置

• 标题

  设置标题名称。

• 所属屏幕

  设置组件的所属页面，点击移动进行操作

• 隐藏

  点击隐藏，可以进行组件隐藏，默认不隐藏

2、位置尺寸

• 位置 包括组件的横坐标 和纵坐标 ，单位为px；横坐标 为组件左上角距离页面左边界的像素距离，纵坐标 为组件左上角距离页面上边界的像素距离。
• 尺寸 包括组件的宽度 和高度 ，单位为px；可单击比例锁 锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

尺寸设置大于组件实际大小时，不影响组件显示，组件不被拉伸；尺寸宽度小于组件实际宽度时，组件布局受影响；尺寸高度小于组间实际高度时，不影响组件显示。

2、下拉菜单设置

二、 数据

1、JSON数据案例

[
    {
        "label": "选项0",
        "value": "option0"
    },
    {
        "label": "选项1",
        "value": "option1"
    },
    {
        "label": "选项2",
        "value": "option2"
    },
    {
        "label": "选项3",
        "value": "option3"
    },
    {
        "label": "选项4",
        "value": "option4"
    }
]

三、事件

事件包含：聚焦、失焦、值变化和数据更新。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择对应的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义事件等。

输入框

组件说明

输入框可用于通过设定自定义事件来搜索其他组件，另外的常见使用场景是在业务系统海里数据源里进行数据检索 。

效果案例

一、属性

在样式中可以设置组件的基础设置 。

1、基础设置

• 标题

  设置标题名称。

• 所属屏幕

  设置组件的所属页面，点击移动进行操作

• 隐藏

  点击隐藏，可以进行组件隐藏，默认不隐藏

2、位置尺寸

• 位置 包括组件的横坐标 和纵坐标 ，单位为px；横坐标 为组件左上角距离页面左边界的像素距离，纵坐标 为组件左上角距离页面上边界的像素距离。
• 尺寸 包括组件的宽度 和高度 ，单位为px；可单击比例锁 锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

尺寸设置大于组件实际大小时，不影响组件显示，组件不被拉伸；尺寸宽度小于组件实际宽度时，组件布局受影响；尺寸高度小于组间实际高度时，不影响组件显示。

3、输入框设置

二、 数据

1、JSON数据案例

{
    "value": ""
}

三、事件

事件包含：聚焦、失焦、输入、值变化和数据更新。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择对应的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义事件等。

开关

组件说明

开关组件可用于控制其他组件的状态。

效果案例

一、属性

在样式中可以设置组件的基础设置 。

1、基础设置

• 标题

  设置标题名称。

• 所属屏幕

  设置组件的所属页面，点击移动进行操作

• 隐藏

  点击隐藏，可以进行组件隐藏，默认不隐藏

2、位置尺寸

• 位置 包括组件的横坐标 和纵坐标 ，单位为px；横坐标 为组件左上角距离页面左边界的像素距离，纵坐标 为组件左上角距离页面上边界的像素距离。
• 尺寸 包括组件的宽度 和高度 ，单位为px；可单击比例锁 锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

尺寸设置大于组件实际大小时，不影响组件显示，组件不被拉伸；尺寸宽度小于组件实际宽度时，组件布局受影响；尺寸高度小于组间实际高度时，不影响组件显示。

3、开关设置

二、 数据

1、JSON数据案例

{
    "value": true
}

三、事件

事件包含：值变化和数据更新。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择对应的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义事件等。

单选框

组件说明

单选框组件可以通过全局样式、样式、系列等配置项修改组件样式；常用于多组件、多页面之间的效果切换，用于交互效果的实现。

效果案例

一、属性

在样式中可以设置组件的基础设置 。

1、基础设置

• 标题设置标题名称。
• 所属屏幕设置组件的所属页面，点击移动进行操作
• 隐藏点击隐藏，可以进行组件隐藏，默认不隐藏

2、位置尺寸

• 位置 包括组件的横坐标 和纵坐标 ，单位为px；横坐标 为组件左上角距离页面左边界的像素距离，纵坐标 为组件左上角距离页面上边界的像素距离。
• 尺寸 包括组件的宽度 和高度 ，单位为px；可单击比例锁 锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

尺寸设置大于组件实际大小时，不影响组件显示，组件不被拉伸；尺寸宽度小于组件实际宽度时，组件布局受影响；尺寸高度小于组间实际高度时，不影响组件显示。

3、通用设置

4、单选默认设置

5、单选选中设置

二、 数据

1、JSON数据案例

[
    {
        "label": "选项一",
        "value": "option1"
    },
    {
        "label": "选项二",
        "value": "option2"
    },
    {
        "label": "选项三",
        "value": "option3"
    },
    {
        "label": "选项四",
        "value": "option4"
    },
    {
        "label": "选项五",
        "value": "option5"
    }
]

三、事件

事件包含：值变化。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择对应的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义事件等。

复选框

组件说明

复选框组件可以通过全局样式、样式、系列等配置项修改组件样式；常用于多组件、多页面之间的效果切换，用于交互效果的实现。

效果案例

一、属性

在样式中可以设置组件的基础设置 。

1、基础设置

• 标题

  设置标题名称。

• 所属屏幕

  设置组件的所属页面，点击移动进行操作

• 隐藏

  点击隐藏，可以进行组件隐藏，默认不隐藏

2、位置尺寸

• 位置 包括组件的横坐标 和纵坐标 ，单位为px；横坐标 为组件左上角距离页面左边界的像素距离，纵坐标 为组件左上角距离页面上边界的像素距离。
• 尺寸 包括组件的宽度 和高度 ，单位为px；可单击比例锁 锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

尺寸设置大于组件实际大小时，不影响组件显示，组件不被拉伸；尺寸宽度小于组件实际宽度时，组件布局受影响；尺寸高度小于组间实际高度时，不影响组件显示。

3、通用设置

4、多选默认设置

5、多选选中设置

二、 数据

JSON数据案例

[
    {
        "label": "选项一",
        "value": "option1",
        "checked": true
    },
    {
        "label": "选项二",
        "value": "option2",
        "checked": false
    },
    {
        "label": "选项三",
        "value": "option3",
        "checked": false
    },
    {
        "label": "选项四",
        "value": "option4",
        "checked": false
    },
    {
        "label": "选项五",
        "value": "option5",
        "checked": false
    }
]

三、事件

事件包含：值变化。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择对应的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义事件等。

地图组件

通用地图

组件说明

多功能地图用于地图的展示，支持arcgis、图吧、百度地图、腾讯地图、高德地图以及超图6种地图格式，支持设置中心点，设置区域边界，在地图上绘制点、线、多边形、圆、自定义DIV、飞线等内容。

效果案例

需要点击左侧的组件库，然后选中地图列，单机"通用地图"选项。

然后地图上会添加上如下内容：

一、地图设置

1、基础设置

支持设置地图所属屏幕，位置，尺寸等，可以手动隐藏地图，通常地图设置为满屏展示，注意左侧的图层中要保持地图在最下方，否则会覆盖其他元素。

2、地图设置

支持设置地图的类型，有arcgis、图吧、百度地图、腾讯地图、高德地图以及超图合计6个备选项。此外还支持设置地图中心点、地图初始缩放级别等内容。

二、配置数据请求

新增数据

配置数据

可以使用静态数据或者api接口获取数据。注意：通常地图数据需要勾选"自动执行"选项。

配置事件

内容	是否必填	说明
事件类型	是	选择 "数据更新"
动作	是	选择 "组件联动"
联动组件	是	选择对应地图组件的名字，这里只可以选择一个组件
组件动作	是	选择 "地图数据更新"
变量字段	是	存储到地图中的字段名，后续配置点线面图层数据的时候会用到
名称	否	如果数据请求经常会删除，则可配置该参数刷新地图的数据，该字段的值同基础配置中的名字

配置完成后，点击"请求数据"按钮，然后点击确定。

三、配置点线面图层数据

在地图组件上单击，在点/线/区域设置中根据需要添加或者复制元素。

目前支持配置点、线、多边形区域（多边形或者圆）、自定义div、标题。注意：数据需要手动从下方的可视化json中选取（通常选择的是一组数据）如果json中未包含想要使用的数据，需要到相应的数据请求上，点击一下"请求数据"按钮。

配置弹窗（可选）：

先在地图上绘制弹窗组件

然后在新绘制的"警情弹窗"上点击隐藏，使其一开始不显示。

在需要弹出该点的点击编辑，例如上述弹窗对应的"警情点"：

点击编辑，在事件部分添加事件

在这里配置点击后"显示"，事件2通常配置成弹窗（其余配置和事件1相同），这样弹窗就在点击位置的下方显示。如果需要有数据需要传递给弹窗动态展示，则可以新加一个页面变量，弹窗上的变量全部绑定这个页面变量，定义一个事件将点上的数据传给页面变量完成绑定。

如下图所示：

点击"编辑过滤器"按钮，配置具体的对应字段。

5、配置地图指令

如上图所示，需要点击警情点的时候在地图上打出对应的点。

在警情点的地图元素上点击，然后在面板上选择"事件"。

内容	说明
事件类型	选择"点击"
动作	选择"组件联动"
联动组件	选择对应地地图组件的名字，这里只可以选择一个组件
组件动作	选择"地图指令配置"
指令类型	包含点、线、多边形、圆、自定义div、边界、标题、区域中心打点（一个区域，找中心点打点）、Wms图层、飞线、热力图
地图元素名	选择在第二步中配置的点线面图层的名称。例如：上面提到的"警情点"

通辽组件

一、通辽地图服务接入指南

适用场景：可视化平台（HTTPS）调用底图/高程服务
一、服务地址清单

底图服务： HTTPS（推荐） https://tlchserver2.gis.cn:6443/geoscene/rest/services/通辽影像/MapServer

底图服务： HTTP+IP http://10.21.204.59:6080/geoscene/rest/services/通辽影像/MapServer

高程服务： HTTPS（推荐） https://10.21.204.59:6443/geoscene/rest/services/通辽4490/通辽市主城区DEM_4490/ImageServer

高程服务： HTTP+IP http://10.21.204.59:6080/geoscene/rest/services/通辽4490/通辽市主城区DEM_4490/ImageServer |

注意：
1、若使用 HTTP+IP 模式，浏览器会拦截服务
2、HTTPS 模式需按照测绘院给的方式配置

二、强制浏览器放行HTTP（开发测试阶段采用方案）

以Chrome为例： 

1、 右键桌面 Chrome 图标 → 选择 属性 2 、在 “目标” 字段末尾追加参数 "C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-running-insecure-content 3、重启浏览器访问平台

三、HTTPS服务接入流程 如果底图服务和高程服务采用https 设计院提供了解决方案，在所有客户端安装测绘院提供的 SSL证书。

二、通辽地图组件使用说明文档（以2D地图为例）

组件介绍

组件概述、特性

通辽地图2D组件是一个基于ArcGIS 4.25开发的地图可视化组件，专门为通辽地区定制。该组件目前支持点图层展示、交互事件、动态指令控制功能，适用于大屏展示、数据可视化等场景。

主要特性：

• 图层支持：支持仅支持打点图层，支持多种点图层配置和展示
• 动态控制：支持通过指令动态控制地图元素的展示和清空
• 样式定制：支持自定义图标、尺寸样式
• 数据绑定：目前仅支持页面变量数据源绑定

基础配置

一、地图基础设置 1、缩放等级 (zoom)

• 类型: Number
• 默认值: 12
• 范围: 3-18
• 说明: 设置地图的初始缩放等级

2、中心点

• 默认值: 122.2386, 43.646
• 格式: 经度, 纬度
• 说明: 设置地图的初始中心点位置

3、底图服务URL- 类型: String

• 默认值: 通辽影像底图服务
• 说明: 设置地图底图服务的URL地址 二、点图层配置 1、每个点图层包含以下配置项： 基础属性
• 图层名称: 图层的唯一标识名称
• 类型 (type): 固定为“点”
• 图标URL: 点位的图标图片地址
• 宽度: 图标宽度
• 高度: 图标高度

数据配置

• 数据类型: 固定为 '页面变量'
• 页面变量: 绑定的页面变量名称 数据格式要求，页面变量数据格式： 点图层绑定的页面变量必须是数组格式，每个元素包含以下字段： [ { name: "点位名称", // 必需：点位名称 lng: 122.2386, // 必需：经度 lat: 43.646, // 必需：纬度 // 其他自定义字段... } ]

事件系统

1、支持的事件类型

点击事件 (click)

• 触发条件：用户点击地图上的点位
• 事件参数： { type: 'point', activeLayer: '图层名称', position: { x: 鼠标X坐标, y: 鼠标Y坐标 }, data: 点位数据对象 }

加载完成事件 (ready) —暂未开发

• 触发条件：地图组件初始化完成
• 事件参数：无

移动或缩放事件 (zoomAndPan) —暂未开发

• 触发条件：用户进行地图缩放或平移操作
• 事件参数：无

2、事件配置 在图层配置中可以为每个图层设置独立的事件

动态指令系统

支持的指令类型

1. 地图指令配置

• 指令类型: 点
• 功能: 动态显示指定图层的点位

2. 清空地图元素

• 功能: 清空指定图层的所有点位

使用步骤

参考案例：https://10.21.204.45/lu-ban/view/1960881066185084929

1、 添加组件到页面

1. 在组件库中找到"通辽地图2D"组件
2. 拖拽到页面画布中
3. 调整组件位置和大小

2、 配置地图基础设置

1. 点击组件进入配置面板

2. 在"地图配置"中设置：

   • 缩放等级
   • 中心点坐标
   • 底图服务URL 3、 添加点图层

3. 在"点图层配置"中点击"添加"按钮

4. 配置图层基本信息：

   • 图层名称
   • 图标URL
   • 图标尺寸

4、 配置数据源

1. 点击图层配置中的"编辑"按钮

2. 在"数据"下拉框中选择页面变量

3. 确保页面变量数据格式正确

5、 设置事件

1. 在图层配置对话框中配置事件
2. 选择事件类型（点击）
3. 配置相应的动作

6、 配置指令

打点指令：

第一步先给页面变量赋值：

第二步执行地图指令：

1. 选择触发地图指令的组件（比如按钮、图片等）
2. 组件联动选择通辽地图2D
3. 组件动作选择：地图指令配置
4. 指令类型选择：点
5. 地图元素名称：选择需要触发的图层名称

清空指令：

1. 选择触发地图指令的组件（比如按钮、图片等）

2. 组件联动选择通辽地图2D

3. 组件动作选择：清空地图元素

4. 地图元素名称：选择需要清空的图层名称

                                  |
   

Echarts组件

Echarts-地图

组件说明

使用Echarts绘制地图，可根据数据展示不同地区的状态 。

效果案例

一、属性

在配置中可以设置组件的基础设置 、标题设置 、图例(visualMap)设置、文字(label)设置、数据设置、自定义配色 。

1、基础设置

标题到字体同其他组件。

2、标题配置

可以设置是否显示标题，标题的内容，标题的颜色，字体大小等，设置标题的位置，是否开启点击下钻。

3、图例(visualMap)设置

可以设置是否显示图例、图例字体的颜色、字体大小、左右和上下位置，可以添加分段根据数据和自定义配色为将地区渲染成不同的颜色。

4、文字(label)设置

可以设置地图上是否显示文字，是否显示数值，文字的字体颜色，字体大小，悬浮选中时文字、背景等。

5、数据设置

获取标准的geojson数据插入到文本框中，组件会渲染出对应的地理信息，geojson地址：https://datav.aliyun.com/portal/school/atlas/area_selector。

6、自定义配色

设置地图上和图例色块的颜色，从下到上的顺序。

二、数据

组件数据格式

数据配置项说明

三、事件

为当前组件增加事件，包含数据更新、点击。

1、配置事件触发条件

点击后会弹出弹窗，使用硬编码设置事件的触发条件

2、动作

可以选择交互的相应动作，包含跳转链接、跳转屏幕、组件联动、页面变量赋值，自定义等，可通过配置自定义事件跟新接口参数达到下钻的效果。

Echarts-地球

组件说明

使用Echarts绘制地球，可以在其上绘制航线 。

效果案例

一、属性

在配置中可以设置组件的基础设置 。

1、基础设置

标题到字体同其他组件。

二、数据

1、组件数据格式，配置的航线信息

2、数据配置项说明

Echarts-交通

组件说明

使用Echarts绘制交通图 。

效果案例

一、属性

在配置中可以设置组件的基础设置、图片设置 。

1、基础设置

标题到字体同其他组件。

2、图片设置

可以切换svg底图。

二、数据

组件数据格式，effect设置小车的样式，coords设置小车的路径

数据配置项说明

Echarts-选座

组件说明

使用Echarts绘制航班、公交等选座 。

效果案例

一、属性

在配置中可以设置组件的基础设置、图片设置 。

1、基础设置

标题到字体同其他组件。

2、图片设置

可以切换svg底图。

二、数据

组件数据格式，配置已选的座位数据。

数据配置项说明

Echarts-结构图

组件说明

使用Echarts绘制结构图 。

效果案例

一、属性

在配置中可以设置组件的基础设置、图片设置 。

1、基础设置

标题到字体同其他组件。

2、图片设置

可以切换svg底图。

二、数据

组件数据格式，配置各部分的数据。

数据配置项说明

Echarts-路径图

组件说明

使用Echarts绘制路径图 。

效果案例

一、属性

在配置中可以设置组件的基础设置、图片设置 。

1、基础设置

标题到字体同其他组件。

2、图片设置

可以切换svg底图。

二、数据

组件数据格式，配置行驶的路径。

数据配置项说明

Echarts-公交

组件说明

使用Echarts绘制公交线路，默认加载百度地图，需要由外网环境 。

效果案例

一、属性

在配置中可以设置组件的基础设置 。

1、基础设置

标题到字体同其他组件。

二、数据

组件数据格式，配置公交的线路点。

数据配置项说明

其他组件

日期时间

组件说明

日期时间组件可以用于展示时间和日期。

一、样式

在样式中可以设置组件的基本属性 、基本配置 和动画 。

1、基本属性

• 位置

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

• 尺寸

  包括组件的宽度 和高度 ，单位为px；可单击比例锁 锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。尺寸调整不影响组件内容显示、组件动画。

• 默认隐藏

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

2、基本配置

二、交互

天气

组件说明

天气组件可以用于说明当前的天气、温度、风向情况。

一、样式

在样式中可以设置组件的基本属性 、基本配置 和动画 。

1、基本属性

• 位置

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

• 尺寸

  包括组件的宽度 和高度 ，单位为px；可单击比例锁 锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。尺寸调整不影响组件内容显示、组件动画。

• 默认隐藏

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

2、基本配置

二、数据

1、JSON数据案例

{
    "weather": "多云",
    "temperature": "25",
    "wind": "东南风"
}

2、数据配置项说明

三、交互

3d模型

组件说明

3d模型组件可以先通过右上角的链接跳转到模型编辑、发布页面，发布完成后可以在模型列表中选择模型展示。

一、样式

在样式中可以设置组件的基本属性 、基本配置 和动画 。

1、基本属性

• 位置

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

• 尺寸

  包括组件的宽度 和高度 ，单位为px；可单击比例锁 锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。尺寸调整不影响组件内容显示、组件动画。

• 默认隐藏

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

2、基本配置

二、交互

自定义Vue组件

组件说明

自定义VUE组件可以灵活快速搭建本产品中没有的组件。

一、样式

在样式中可以设置组件的基本属性 、基本配置 和动画 。

1、基本属性

• 位置

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

• 尺寸

  包括组件的宽度 和高度 ，单位为px；可单击比例锁 锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。尺寸调整不影响组件内容显示、组件动画。

• 默认隐藏

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

2、基本配置

2种方式定义组件内容：1. 远程地址获取组件 2.通过自行编写代码或者从组件库中获取组件

二、数据

1、数据配置项说明

三、交互

系统编程

变量

全局变量

管理页面

全局变量用于存储一些应用内使用的常量。全局变量定义后可以在多个不同的应用内使用。

如上图所示，在全局变量管理页面中以列表的方式展示平台内创建的变量。可以对全局变量进行新增、编辑、删除等操作

新增全局变量时，需要填写变量的名称，变量的标识和变量值。变量名称仅用于标记变量用途，方便查看，在实际的使用场景中，仅会通过全局变量的标识进行引用

使用说明

1. 自定义代码

在自定义 JS代码中，可以通过 $global.variableName 引用 variableName 对应的全局变量。支持对全局变量的取值和赋值逻辑。

2. 表达式

在表达式中，支持通过 {{ $global.variableName }} 的方式引用 variableName 对应的全局变量，但是在表达式场景中仅支持取值操作。

页面变量

页面变量只能在当前应用内使用，用于存储当前应用的一些状态值。

管理页面

在大屏应用的左侧边栏中，点击页面变量图标，可以打开页面变量的管理界面。应用内所有的页面变量会以列表的形式进行展示。管理界面支持对页面变量的新增、编辑和删除操作。

新增页面变量时，需要填写变量名、变量值和备注等信息。

变量名是变量的唯一标识。

变量值是变量的初始值，支持数字、字符串、布尔值、对象等 JS 数据类型。

备注用于描述变量的业务含义。

使用说明

1. 数据绑定

在组件的数据设置面板中，支持配置页面变量类型的数据。通过可视化配置的方式，将组件的数据绑定到指定的页面变量。

2. 自定义代码

在自定义代码中，通过特定语法可以获取和更新页面变量。

获取页面变量：context.variables.get('variableName')

更新页面变量：context.variables.set('variableName', variableValue)

3. 表达式

在表达式中，可以通过页面变量的变量名直接获取页面变量。如

但是表达式场景下，不支持页面变量的赋值操作。

事件交互

事件交互模块主要用于简化应用程序中用户交互行为的实现，通过可视化配置的方式实现各类交互场景

事件触发

事件交互的起始条件，一般是组件内置的各类监听事件，如鼠标点击、鼠标移入、数据更新等。

触发条件

事件触发后可以设置一些特定的触发条件，来控制是否触发后续的交互动作，仅在满足条件的场景下，触发后续行为。

触发条件通过自定义代码进行控制，通过返回值是 true 或 false 来判断是否满足条件。

响应动作

事件触发后的行为动作。根据实际的业务场景，目前平台内置了跳转链接、跳转屏幕、组件联动、页面变量赋值、触发数据请求、展示全局提示和自定义事件等多种交互动作

跳转链接

跳转链接事件用于打开指定的 URL 地址，支持配置当前页面打开和新页面打开

跳转屏幕

跳转屏幕事件用于跳转到当前应用内的指定页面

组件联动

组件联动用于控制页面中的其他组件。常见的组件动作包括显示、隐藏、显隐切换、更新组件配置、更新组件数据等。

联动组件时支持同时选择多个组件，然后统一设置组件动作。

页面变量赋值

页面变量赋值，用于更新指定的页面变量。支持常量的直接赋值模式，也支持通过表达式进行赋值。

直接赋值

表达式赋值

触发数据请求

触发数据请求，用于触发指定的数据请求并传递新的请求参数。请求参数支持常量的直接赋值模式，也支持通过表达式进行赋值。

常量赋值

表达式赋值（userId 为页面变量）

展示全局提示

展示全局提示，用于配置全局提示信息。支持配置常见的全局提示类型，如成功、失败、、提示、告警等。

提示的消息文字支持常量的直接赋值模式，也支持通过表达式进行赋值。

自定义事件

事件交互中存在一些通过可视化配置无法实现的场景，这时就需要通过自定义代码来实现。

自定义事件基于 JS 代码实现，内置了一些大屏相关的 API。

使用案例

案例1：

页面变量使用 ：点击按钮请求组件B数据，实现组件A数据要作为组件B的入参

平台支持 页面变量的增删改查等基本操作，页面变量用于存储应用内的状态数据。可以在组件的数据配置、事件配置中使用。

操作步骤

1. 创建页面变量userInfo
   
2. 组件A配置事件：数据更新之后给页面变量赋值

3. 按钮配置事件