数据可视化 DLV
数据可视化 DLV
- 最新动态
- 产品介绍
-
用户指南
- 准备工作
- DLV控制台简介
- 如何使用DLV
- 管理工作空间
- 新建数据连接
- 创建大屏
- 开发大屏
- 管理大屏
- 管理图层
-
管理数据连接
-
新建数据连接
- 数据连接概述
- 使用静态数据源
- 新建API数据连接
- 新建API网关数据连接
- 新建CSV文件数据连接
- 新建对象存储服务(OBS)数据连接
- 新建DWS数据连接
- 新建DLI数据连接
- 新建MRS Hive数据连接
- 新建MRS SparkSQL数据连接
- 新建ClickHouse数据连接
- 新建RDS MySQL数据连接
- 新建RDS PostgreSQL数据连接
- 新建RDS SQL Server数据连接
- 新建RDS GaussDB数据连接
- 新建RDS GeminiDB Influx 接口数据连接
- 新建云搜索服务 Elasticsearch数据连接
- 新建DAYU数据服务连接
- 新建分布式数据库中间件(DDM)数据连接
- 新建Oracle数据连接
- 新建MySQL数据连接
- 新建PostgreSQL数据连接
- 新建SQL Server数据连接
- 新建Elasticsearch数据连接
- 编辑数据连接
- 查找数据连接
- 删除数据连接
- 管理VPC连接
-
新建数据连接
- 管理组件
- 组件指南
- 组合大屏
- 在第三方系统中集成大屏
- 修订记录
- 开发指南
- 最佳实践
- API参考
- 常见问题
- 文档下载
- 通用参考
链接复制成功!
UI类型介绍
本文介绍DLV支持的控件(组件配置项)。您可以通过gui.json文件中定义的type字段,来定义控件的类型和配置。
文本输入框
字段名 |
是否必选 |
参数类型 |
描述 |
---|---|---|---|
placeholder |
否 |
String |
值为空时的提示内容。 |
value |
是 |
String |
文本输入框的值。 |
示例如下:
1 2 3 4 5 6 7 |
{ "label": "Init value", "name": "initvalue", "type": "input", "placeholder": "input value", "value": "" } |
数值控件
数值控件:
字段名 |
是否必选 |
参数类型 |
描述 |
---|---|---|---|
value |
是 |
Number |
数值控件的值,默认为0。 |
min |
否 |
Number |
可调整的最小值,默认为30000。 |
max |
否 |
Number |
可调整的最大值,默认为-30000。 |
precision |
否 |
Number |
小数数值保留位置,默认为0。 |
step |
否 |
Number |
调整数值的大小幅度,默认为1。 |
示例如下:

1 2 3 4 5 6 7 8 9 10 |
{ "label": "Size", "name": "size", "type": "number", "min": 0.1, "max": 1.5, "precision": 1, "step": 0.1, "value": "0.6" } |
下拉选择器
字段名 |
是否必选 |
参数类型 |
描述 |
---|---|---|---|
value |
是 |
string |
下拉选择器选中的值。 |
data |
是 |
Array<Object> |
下拉选择器中包含的所有可选值。 |
isSearch |
否 |
Boolean |
下拉选择器是否支持搜索功能,默认为false。 |
data示例如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{ "label": "Layout", "name": "initvalue", "type": "select", "data": [ { "key": "Center", "value": "center" }, { "key": "Left", "value": "left" }, { "key": "Right", "value": "right" } ], "value": "center" } |
图1 下拉选择器

颜色选择器
字段名 |
是否必选 |
参数类型 |
描述 |
---|---|---|---|
value |
是 |
String |
颜色选择器所选择的值(可为渐变色或echarts颜色值)。 |
gradient |
否 |
Boolean |
是否支持渐变色,默认为true。 |
示例如下:
1 2 3 4 5 6 7 |
{ "label": "Color", "name": "color", "type": "color", "value": "rgba(70,94,212,1)", "gradient": true }, |
图2 颜色选择器

区域编号 |
描述 |
---|---|
1 |
支持渐变色 |
父主题: 组件开发指南