组件指南

基础

标题

标题是基础组件的一种，支持自定义标题的内容、样式（支持文字渐变）、超链接等，常用于展示可视化应用中各个模块的标题。

预览：

配置

数据

示例数据如下：

[
  {
    "value": "我是标题名称",
    "url": ""
  }
]

字段	说明
value	（可选）标题的内容，存在时会覆盖配置中的标题名；为空时，会读取配置中的标题名进行显示。
url	（可选）点击标题后跳转的超链接地址，存在时会覆盖超链接配置项的URL。

交互

动作	说明
请求数据	重新请求服务端数据，上游组件抛出的config参数和options参数，其中config参数将作为请求参数，和当前请求参数项合并；options参数在导入数据之前会和当前options参数合并，达到动态更改请求参数和配置的效果。
导入数据	按组件接入数据格式处理数据后，导入组件，重新绘制。
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

多行文本

多行文本是基础组件的一种，支持自定义文本的内容、样式（支持文字渐变），滚动配置等，常用于可视化应用中展示段落文本内容。

预览：

配置

数据

示例数据如下：

[
  {
    "value": "听云数据可视化大屏提供数据综合展示、应用性能监控等多种场景模板，稍加修改就能够直接服务于您的可视化需求。通过拖拽即可实现灵活的可视化布局，在模板的基础上任何人都能够发挥创意，实现您自己的可视化应用。支持API、数据库、CSV、静态JSON等多种数据来源，且能够动态轮询。能够实现多个数据源汇聚于一个可视化界面中"
  }
]

字段	说明
value	（可选）段落内容，存在时会覆盖配置中的段落内容；为空时，会读取配置中的段落内容进行显示。

交互

动作	说明
请求数据	重新请求服务端数据，上游组件抛出的config参数和options参数，其中config参数将作为请求参数，和当前请求参数项合并；options参数在导入数据之前会和当前options参数合并，达到动态更改请求参数和配置的效果。
导入数据	按组件接入数据格式处理数据后，导入组件，重新绘制。
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

跑马灯

跑马灯是基础组件的一种，支持自定义文本的内容、样式（支持文字渐变），滚动配置等，能够将组件中的溢出文本以跑马灯动画的形式展示在可视化应用中。

预览：

配置

数据

示例数据如下：

[
  {
    "value": "听云数据可视化大屏提供数据综合展示、应用性能监控等多种场景模板，稍加修改就能够直接服务于您的可视化需求。通过拖拽即可实现灵活的可视化布局，在模板的基础上任何人都能够发挥创意，实现您自己的可视化应用。支持API、数据库、CSV、静态JSON等多种数据来源，且能够动态轮询。能够实现多个数据源汇聚于一个可视化界面中"
  }
]

字段	说明
value	（可选）跑马灯内容，存在时会覆盖配置中的内容；为空时，会读取配置中的内容进行显示。

交互

动作	说明
请求数据	重新请求服务端数据，上游组件抛出的config参数和options参数，其中config参数将作为请求参数，和当前请求参数项合并；options参数在导入数据之前会和当前options参数合并，达到动态更改请求参数和配置的效果。
导入数据	按组件接入数据格式处理数据后，导入组件，重新绘制。
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

日期时间

日期时间是基础组件的一种，支持自定义日期时间的图标样式和文本样式，能够在可视化应用中展示当前时间，帮助您合理控制可视化应用或可视化应用中某个模块的演示时间。

预览：

配置

时间器：

参数	说明
文本样式	设置时间器文本的字体、字号、字体颜色和字体粗细等。支持渐变。
格式化	设置时间器文本的显示格式。默认为yyyy-MM-dd HH:mm:ss，表示“年月日时分秒”的时间格式，为24小时制的格式。如果为hh:mm:ss，表示12小时制的格式。
间隔时间	设置组件时间变化的间隔时间，单位为ms。
停住时间	此配置项可以设置时间器的时间在什么时候停住，不再发生变化。需要与格式化配置项中配置的时间格式保持一致。
停住显示内容	设置时间器的时间停住后，显示的内容，只有配置了停住时间后才会生效。需要与格式化配置项中配置的时间格式保持一致。
水平对齐	日期时间在水平方向的对齐样式，可选左对齐、水平居中和右对齐。
垂直对齐	日期时间在垂直方向的对齐样式，可选顶对齐、垂直居中和底对齐。

回调配置

参数	说明
定时回调设置	每隔多久抛出一次回调值，单位为ms。
定点回调设置	回调值抛出的时间点，支持表示日期的字符串值。

数据

此组件不需要接入数据，默认使用系统当前时间。

交互

事件	说明
定时回调事件	当开启后，在当前时间发生指定时间段的变化时，系统会自动抛出回调值，默认抛出time（当前时间）字段值。
定点回调事件	当开启后，当时间到设置的时间时，系统会自动抛出回调值，默认抛出time（当前时间）字段值。
动作	说明
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

定时器

定时器没有内容，可以通过定时回调事件和定点回调事件和其他组件联动。

配置

数据

此组件不需要接入数据，默认使用系统当前时间。

交互

事件	说明
定时回调事件	当开启后，在当前时间发生指定时间段的变化时，系统会自动抛出回调值，默认抛出time（当前时间）字段值。
定点回调事件	当开启后，当时间到设置的时间时，系统会自动抛出回调值，默认抛出time（当前时间）字段值。
动作	说明
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

装饰

装饰

装饰支持为可视化应用或可视化应用的某个模块添加预设的装饰元素，使可视化应用展示更加美观。

预览：

配置

数据

此组件不需要接入数据。

交互

动作	说明
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

边框

边框支持为可视化应用或可视化应用的某个模块添加预设的边框，能够使可视化应用展示更加美观。

预览：

配置

数据

此组件不需要接入数据。

交互

动作	说明
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

背景

背景支持自定义背景块的颜色（支持渐变）、边框（支持渐变和动画）等，支持为可视化应用或可视化应用的某个模块添加自定义的背景块，能够使可视化应用展示更加美观。

预览：

配置

数据

此组件不需要接入数据。

交互

动作	说明
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

线条

线条支持自定义线条的颜色，样式（支持虚线），渐变等，支持为可视化应用或可视化应用的某个模块添加自定义的线条，能够使可视化应用展示更加美观。

预览：

配置

数据

此组件不需要接入数据。

交互

动作	说明
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

粒子装饰

粒子装饰支持对粒子颜色和大小进行配置，能够使可视化应用展示更加美观。

预览：

配置

数据

此组件不需要接入数据。

交互

动作	说明
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

光环

光环支持自定义光环的大小，颜色和样式等，能够使可视化应用展示更加美观。

预览：

配置

数据

此组件不需要接入数据。

交互

动作	说明
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

域力球

域力球可以自定义颜色，能够使可视化应用展示更加美观。

预览：

配置

数据

此组件不需要接入数据。

交互

动作	说明
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

圆环装饰

圆环装饰支持缩放和颜色配置，能够使可视化应用展示更加美观。

预览：

配置

数据

此组件不需要接入数据。

交互

动作	说明
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

地球装饰

地球装饰组件能够使可视化应用展示更加美观。

预览：

配置

此组件暂时没有配置。

数据

此组件不需要接入数据。

交互

动作	说明
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

3D地球

3D地球支持颜色配置，能够使可视化应用展示更加美观。

预览：

配置

数据

此组件不需要接入数据。

交互

动作	说明
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

3D地球2

3D地球2能够使可视化应用展示更加美观。

预览：

配置

此组件暂时没有配置。

数据

此组件不需要接入数据。

交互

动作	说明
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

3D地球3

3D地球3能够使可视化应用展示更加美观。

预览：

配置

此组件暂时没有配置。

数据

此组件不需要接入数据。

交互

动作	说明
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

媒体

图片

图片是媒体组件的一种，支持自定义图片的URL地址和跳转链接，能够为可视化应用和其他组件添加自定义的背景图。

预览：

配置

数据

字段	说明
img	（可选）设置展示的图片，会覆盖掉图片的配置。如果该字段为空，会使用配置中的图片进行展示。
url	（可选）设置单击后跳转页面的URL，会覆盖掉超链接中的配置。如果该字段为空，会读取配置中的超链接进行跳转。

交互

动作	说明
请求数据	重新请求服务端数据，上游组件抛出的config参数和options参数，其中config参数将作为请求参数，和当前请求参数项合并；options参数在导入数据之前会和当前options参数合并，达到动态更改请求参数和配置的效果。
导入数据	按组件接入数据格式处理数据后，导入组件，重新绘制。
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

视频

视频支持自定义视频的URL地址、视频播放属性等，支持mp4等格式的视频，能够在可视化应用中添加视频播放器来播放您的视频。

预览：

配置

数据

字段	说明
url	（可选）设置视频地址，会覆盖掉配置中的视频地址。如果该字段为空，会使用配置中的视频地址进行展示。

交互

动作	说明
请求数据	重新请求服务端数据，上游组件抛出的config参数和options参数，其中config参数将作为请求参数，和当前请求参数项合并；options参数在导入数据之前会和当前options参数合并，达到动态更改请求参数和配置的效果。
导入数据	按组件接入数据格式处理数据后，导入组件，重新绘制。
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

音频

音频是媒体组件的一种，支持自定义音频的URL地址、音频播放设置，音量设置等,能够在可视化应用中添加音频播放器来播放您的音频。

预览：

配置

数据

字段	说明
url	（可选）设置音频地址，会覆盖掉配置中的音频地址。如果该字段为空，会使用配置中的音频地址。

交互

动作	说明
请求数据	重新请求服务端数据，上游组件抛出的config参数和options参数，其中config参数将作为请求参数，和当前请求参数项合并；options参数在导入数据之前会和当前options参数合并，达到动态更改请求参数和配置的效果。
导入数据	按组件接入数据格式处理数据后，导入组件，重新绘制。
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

Iframe

Iframe支持自定义嵌入页面的URL地址、是否可关闭，关闭按钮样式等。

预览：

配置

数据

字段	说明
url	（可选）设置嵌入页面的链接，会覆盖掉配置中的链接。如果该字段为空，会使用配置中的链接。

交互

动作	说明
请求数据	重新请求服务端数据，上游组件抛出的config参数和options参数，其中config参数将作为请求参数，和当前请求参数项合并；options参数在导入数据之前会和当前options参数合并，达到动态更改请求参数和配置的效果。
导入数据	按组件接入数据格式处理数据后，导入组件，重新绘制。
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

轮播

轮播图片支持自定义轮播图片、轮播动画效果等，能够在可视化应用中展示多张图片轮流播放的效果。

预览：

配置

数据

字段	说明
url	设置图片的链接，会覆盖掉配置--图片--图片列表--图片地址。如果该字段为空，会使用配置中的链接。
description	（可选）图片的描述内容。

交互

动作	说明
请求数据	重新请求服务端数据，上游组件抛出的config参数和options参数，其中config参数将作为请求参数，和当前请求参数项合并；options参数在导入数据之前会和当前options参数合并，达到动态更改请求参数和配置的效果。
导入数据	按组件接入数据格式处理数据后，导入组件，重新绘制。
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

轮播大屏

轮播大屏支持自定义轮播大屏地址、轮播动画效果等，能够在可视化应用中展示多张大屏轮流播放的效果。

预览：

配置

数据

字段	说明
url	设置大屏地址，会覆盖掉配置--大屏--大屏列表--大屏地址。如果该字段为空，会使用配置中的大屏地址。
description	（可选）大屏的描述内容。

交互

动作	说明
请求数据	重新请求服务端数据，上游组件抛出的config参数和options参数，其中config参数将作为请求参数，和当前请求参数项合并；options参数在导入数据之前会和当前options参数合并，达到动态更改请求参数和配置的效果。
导入数据	按组件接入数据格式处理数据后，导入组件，重新绘制。
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

指标

指标

指标包括指标名称、前缀、数字（包含数字动画）、后缀，常用于表示业务指标。

预览：

配置

数据

字段	说明
name	（可选）设置指标名称，会覆盖掉配置--名称配置--名称。如果该字段为空，会使用配置中的名称。
value	设置指标数值。
prefix	（可选）设置指标前缀，会覆盖掉配置--翻牌器配置--前缀--内容。如果该字段为空，会使用配置中的内容。
suffix	（可选）设置指标后缀，会覆盖掉配置--翻牌器配置--前缀--内容。如果该字段为空，会使用配置中的内容。

交互

事件	说明
当值变更时	当指标组件中数值变化时，发送事件，将当前值value抛出。
动作	说明
请求数据	重新请求服务端数据，上游组件抛出的config参数和options参数，其中config参数将作为请求参数，和当前请求参数项合并；options参数在导入数据之前会和当前options参数合并，达到动态更改请求参数和配置的效果。
导入数据	按组件接入数据格式处理数据后，导入组件，重新绘制。
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

指标趋势

指标趋势包括指标趋势名称、图标、数字（包含数字动画）、数字后缀，常用于表示业务指标趋势的变化。

预览：

配置

数据

字段	说明
value	指标当前值。
base	指标需要对比的基础值。

交互

事件	说明
当值变更时	当指标趋势组件中趋势数值变化时，发送事件，将当前的指标值value和基础值base抛出。
动作	说明
请求数据	重新请求服务端数据，上游组件抛出的config参数和options参数，其中config参数将作为请求参数，和当前请求参数项合并；options参数在导入数据之前会和当前options参数合并，达到动态更改请求参数和配置的效果。
导入数据	按组件接入数据格式处理数据后，导入组件，重新绘制。
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

指标列表

指标列表是多个指标的列表，每个指标包括指标装饰柱子（可根据数值范围变色）、指标名称、数字（包含数字动画）、指标单位，常用于表示多个业务指标。

预览：

配置

数据

字段	说明
name	（可选）设置指标名称，会覆盖掉配置--指标配置--名称。如果该字段为空，会使用配置中的名称。
value	指标数值。

交互

事件	说明
当点击时	当点击某个指标时，发送事件，将当前的指标名称name和值value抛出。
当鼠标移入时	当鼠标移入某个指标时，发送事件，将当前的指标名称name和值value抛出。
当鼠标移出时	当鼠标移除某个指标时，发送事件，将当前的指标名称name和值value抛出。
当值变更时	当指标列表组件中的数值变化时，发送事件，将变化的指标名称name和值value抛出。
动作	说明
请求数据	重新请求服务端数据，上游组件抛出的config参数和options参数，其中config参数将作为请求参数，和当前请求参数项合并；options参数在导入数据之前会和当前options参数合并，达到动态更改请求参数和配置的效果。
导入数据	按组件接入数据格式处理数据后，导入组件，重新绘制。
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

ECharts

ECharts柱状图

ECharts柱状图支持全域配置，支持柱子渐变。

预览：

配置

数据

字段	说明
x	x轴坐标值
y	y轴坐标值
s	系列

交互

事件	说明
当点击柱子时	当点击柱子时，发送事件，将当前柱子的相关信息（如value）抛出。
当鼠标移入柱子时	当鼠标移入柱子时，发送事件，将当前柱子的相关信息（如value）抛出。
当鼠标移出柱子时	当鼠标移出柱子时，发送事件，将当前柱子的相关信息（如value）抛出。
动作	说明
请求数据	重新请求服务端数据，上游组件抛出的config参数和options参数，其中config参数将作为请求参数，和当前请求参数项合并；options参数在导入数据之前会和当前options参数合并，达到动态更改请求参数和配置的效果。
导入数据	按组件接入数据格式处理数据后，导入组件，重新绘制。
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

ECharts折线图

ECharts折线图支持全域配置，支持折线区域渐变。

预览：

配置

数据

字段	说明
x	x轴坐标值
y	y轴坐标值
s	系列

交互

事件	说明
当点击点时	当点击点时，发送事件，将当前点的相关信息（如value）抛出。
当鼠标移入点时	当鼠标移入点时，发送事件，将当前点的相关信息（如value）抛出。
当鼠标移出点时	当鼠标移出点时，发送事件，将当前点的相关信息（如value）抛出。
动作	说明
请求数据	重新请求服务端数据，上游组件抛出的config参数和options参数，其中config参数将作为请求参数，和当前请求参数项合并；options参数在导入数据之前会和当前options参数合并，达到动态更改请求参数和配置的效果。
导入数据	按组件接入数据格式处理数据后，导入组件，重新绘制。
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

ECharts条形图

ECharts条形图支持全域配置，支持柱子渐变。

预览：

配置

数据

字段	说明
x	x轴坐标值
y	y轴坐标值
s	系列

交互

事件	说明
当点击柱子时	当点击柱子时，发送事件，将当前柱子的相关信息（如value）抛出。
当鼠标移入柱子时	当鼠标移入柱子时，发送事件，将当前柱子的相关信息（如value）抛出。
当鼠标移出柱子时	当鼠标移出柱子时，发送事件，将当前柱子的相关信息（如value）抛出。
动作	说明
请求数据	重新请求服务端数据，上游组件抛出的config参数和options参数，其中config参数将作为请求参数，和当前请求参数项合并；options参数在导入数据之前会和当前options参数合并，达到动态更改请求参数和配置的效果。
导入数据	按组件接入数据格式处理数据后，导入组件，重新绘制。
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

ECharts 饼状图

ECharts饼图支持全域配置，支持渐变，支持定制的轮播高亮动画。

预览：

配置

数据

字段	说明
name	扇区名称
value	扇区值

交互

事件	说明
当点击块时	当点击块时，发送事件，将当前块的相关信息（如value）抛出。
当鼠标移入块时	当鼠标移入块时，发送事件，将当前块的相关信息（如value）抛出。
当鼠标移出块时	当鼠标移出块时，发送事件，将当前块的相关信息（如value）抛出。
动作	说明
请求数据	重新请求服务端数据，上游组件抛出的config参数和options参数，其中config参数将作为请求参数，和当前请求参数项合并；options参数在导入数据之前会和当前options参数合并，达到动态更改请求参数和配置的效果。
导入数据	按组件接入数据格式处理数据后，导入组件，重新绘制。
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

ECharts环形图

ECharts环形图支持全域配置，支持渐变，支持定制的轮播高亮动画。

预览：

配置

请参考ECharts饼状图。

数据

请参考ECharts饼状图。

交互

请参考ECharts饼状图。

ECharts 玫瑰图

ECharts玫瑰图支持全域配置，支持渐变，支持定制的轮播高亮动画。

预览：

配置

请参考ECharts饼状图。

数据

请参考ECharts饼状图。

交互

请参考ECharts饼状图。

ECharts 散点图

ECharts散点图支持全域配置，支持涟漪效果。

预览：

配置

数据

字段	说明
x	x轴坐标值
y	y轴坐标值
s	系列

交互

请参考ECharts折线图。

ECharts 气泡图

ECharts气泡图支持全域配置，支持涟漪效果。

预览：

配置

请参考ECharts散点图。

数据

请参考ECharts散点图。

交互

请参考ECharts散点图。

ECharts雷达图

ECharts雷达图支持全域配置，支持区域渐变。

预览：

配置

数据

字段	说明
x	维度名称
y	维度值
s	系列

交互

事件	说明
当点击时	当点击时，发送事件，将当前的相关信息（如value）抛出。
当鼠标移入时	当鼠标移入时，发送事件，将当前的相关信息（如value）抛出。
当鼠标移出时	当鼠标移出时，发送事件，将当前的相关信息（如value）抛出。
动作	说明
请求数据	重新请求服务端数据，上游组件抛出的config参数和options参数，其中config参数将作为请求参数，和当前请求参数项合并；options参数在导入数据之前会和当前options参数合并，达到动态更改请求参数和配置的效果。
导入数据	按组件接入数据格式处理数据后，导入组件，重新绘制。
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

ECharts漏斗图

ECharts漏斗图支持全域配置，支持渐变，支持定制的轮播高亮动画。

预览：

配置

数据

字段	说明
name	块名称
value	块值

交互

请参考ECharts饼状图。

ECharts 仪表盘

ECharts仪表盘支持全域配置。

预览：

配置

数据

字段	说明
name	指标名称
value	指标值

交互

请参考ECharts雷达图。

ECharts 等级仪表盘

ECharts等级仪表盘支持全域配置。

预览：

配置

请参考ECharts仪表盘。

数据

请参考ECharts仪表盘。

交互

请参考ECharts仪表盘。

ECharts 时钟仪表盘

ECharts时钟仪表盘支持全域配置，展示当前时间，不需要接入数据。

预览：

配置

数据

不需要接入数据。

交互

事件	说明
当点击时	当点击时，发送事件，将当前的相关信息（如value）抛出。
当鼠标移入时	当鼠标移入时，发送事件，将当前的相关信息（如value）抛出。
当鼠标移出时	当鼠标移出时，发送事件，将当前的相关信息（如value）抛出。
动作	说明
更新组件配置	动态更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	显示/隐藏组件切换。

ECharts 地图

ECharts地图支持全域配置。

预览：

配置

数据

字段	说明
name	地区名称
value	地区值

交互

请参考ECharts雷达图。

图标1

3D雷达图

3D雷达图仅支持6个维度的数据和一个中心值。

配置

配置项	说明
缩放	组件的缩放系数，缩放范围0.1-4。
中心值	中心值序列配置。
维度	每个序列对应的维度，该组件只支持6个维度。
系列	该组件仅支持一个系列。

数据

字段说明：

字段	说明
x	x轴坐标值
y	y轴坐标值
s	系列

示例：

[
  {
    "x": "白屏",
    "y": 84,
    "s": "系列1"
  },
  {
    "x": "慢页面占比",
    "y": 23,
    "s": "系列1"
  },
  {
    "x": "可交互",
    "y": 77,
    "s": "系列1"
  },
  {
    "x": "操作时间",
    "y": 65,
    "s": "系列1"
  },
  {
    "x": "操作可用性",
    "y": 62,
    "s": "系列1"
  },
  {
    "x": "首屏",
    "y": 97,
    "s": "系列1"
  },
  {
    "x": "平均值",
    "y": 85,
    "s": "系列2"
  }
]

交互

事件	说明
当点击时	向外发射点击事件
当鼠标移入时	向外发射鼠标移入事件
当鼠标移出时	向外发射鼠标移出事件

动作	说明
请求数据	重新请求服务端数据，并可以带上请求参数。
导入数据	不需要请求接口，直接使用回调的数据，导入到组件中，组件重新渲染。
更新组件配置	更新组件的配置。
显示	显示组件。
隐藏	隐藏组件。
切换显隐	切换组件的显示和隐藏。

3D柱状图

3D柱状，图适用于时间序列数据格式，只支持一组数据。数据每10个一组显示。比喻：有15条数据，第一次显示前面10条数据，第二次轮播后面10条数据。保证10个柱子的美观性，若数据不够十条，则后面的柱子高度为0。

配置

配置项	说明
缩放	缩放
柱子面的颜色	面的颜色

数据

字段说明：

字段	说明
x	x轴坐标值
y	y轴坐标值

示例：

[
  {
    "y": 4718,
    "x": 1642574940000
  },
  {
    "y": 2036,
    "x": 1642575000000
  }
]

交互

请参考3D雷达图。

3D饼图

配置

配置项	说明
缩放	缩放
饼图颜色	饼图颜色，共6个颜色循环使用

数据

字段说明：

字段	说明
name	名称
value	值

示例：

[
  {
“value”: 20,
“name”: “PC”
  },
  {
“value”: 30,
“name”: “移动端”
  }，
{
“value”: 30,
“name”: “微信”
  }
]

交互

请参考3D雷达图。

3D水柱图

配置

配置项	说明
缩放	缩放系数
合计	合计
信息	信息

数据

字段说明：

字段	说明
name	名称
value	值

示例：

[
  {
“value”: 600,
“name”: “Closed”
  },
  {
“value”: 400,
“name”: “Unclosed”
  }
]

交互

请参考3D雷达图。

堆叠柱状图

该组件是固定格式（高度定制）的样式，API要求严格，图例必须是4个，数据必须分组两组，且每组里面有两组数据。

配置

配置项	说明
缩放	缩放
自适应最大值	Y轴可以自适应最大值或者指定最大值
自定义最大值	自定义最大值
图例	图例颜色配置

数据

示例：

[
  {
“totalname”: “ICTSM Total”,
“total”: 81,
“relatedname”: “Related Project QTY”,
“related”: 45,
“series”: [
      {
        “name”: “L2”,
        “list”: [
          10,
          28,
          30,
          18
        ]
      },
      {
        “name”: “L3”,
        “list”: [
          38,
          38,
          44,
          34
        ]
      }
]
  },
  {
“totalname”: “ICTOM Total”,
“total”: 94,
“relatedname”: “Related Project QTY”,
“related”: 59,
“series”: [
      {
        “name”: “L2”,
        “list”: [
          25,
          31,
          19,
          48
        ]
      },
      {
        “name”: “L3”,
        “list”: [
          4,
          15,
          48,
          20
        ]
      }
]
  }
]

交互

请参考3D雷达图。

堆叠柱状图2

该样式数据配置比较灵活，图例和数据的序列都不固定。

配置

配置项	说明
缩放	缩放
自适应最大值	Y轴可以自适应最大值或者指定最大值
自定义最大值	自定义最大值
图例	图例颜色配置

数据

字段说明：

字段	说明
y	y轴坐标值
s	系列

示例：

[
  {
    "y": 20,
    "s": "L1"
  },
  {
    "y": 30,
    "s": "L1"
  },
  {
    "y": 40,
    "s": "L1"
  },
  {
    "y": 50,
    "s": "L1"
  },
  {
    "y": 30,
    "s": "L2"
  },
  {
    "y": 0,
    "s": "L2"
  },
  {
    "y": 50,
    "s": "L2"
  },
  {
    "y": 0,
    "s": "L2"
  },
  {
    "y": 30,
    "s": "L3"
  },
  {
    "y": 0,
    "s": "L3"
  },
  {
    "y": 50,
    "s": "L3"
  },
  {
    "y": 20,
    "s": "L3"
  },
  {
    "y": 30,
    "s": "L4"
  },
  {
    "y": 10,
    "s": "L4"
  },
  {
    "y": 50,
    "s": "L4"
  },
  {
    "y": 20,
    "s": "L4"
  }
]

交互

请参考3D雷达图。

占比图

配置

数据

字段说明：

字段	说明
name	名称
value	值，number类型

示例：

[
  {
    "value": 12872,
    "name": "A类"
  },
  {
    "value": 11220,
    "name": "B类"
  },
  {
    "value": 6410,
    "name": "C类"
  },
  {
    "value": 6060,
    "name": "D类"
  }
]

交互

请参考3D雷达图。

占比图2

组件有动态效果，每个饼状轮播缩放和显示名称和百分比。

配置

数据

字段说明：

字段	说明
name	名称
value	值

示例：

[
  {
    "value": 14299,
    "name": "个险"
  },
  {
    "value": 14093,
    "name": "团险"
  },
  {
    "value": 10297,
    "name": "银邮"
  },
  {
    "value": 9886,
    "name": "互动"
  },
  {
    "value": 6636,
    "name": "收展"
  },
  {
    "value": 6975,
    "name": "电销"
  }
]

交互

请参考3D雷达图。

占比图3

配置

配置项	说明
缩放	缩放
左侧中心显示值	左侧中心显示值/默认显示百分比
右侧列表显示值	右侧列表显示值/默认显示百分比
自定义行数	右侧行数
自定义间距	右侧间距
序列颜色(6个)	默认6个颜色序列

数据

字段说明：

字段	说明
name	名称
value	值

示例：

[
  {
    "value": 14299,
    "name": "个险"
  },
  {
    "value": 14093,
    "name": "团险"
  },
  {
    "value": 10297,
    "name": "银邮"
  },
  {
    "value": 9886,
    "name": "互动"
  },
  {
    "value": 6636,
    "name": "收展"
  },
  {
    "value": 6975,
    "name": "电销"
  }
]

交互

请参考3D雷达图。

占比图4

配置

数据

字段说明：

字段	说明
name	名称
value	值

示例：

[
  {
    "value": 85,
    "name": "慢页面占比"
  }
]

交互

请参考3D雷达图。

指标组件

配置

配置项	说明
缩放	缩放
是否显千分位	显示千分位
字体大小	字体大小
矩形圆角	矩形圆角
背景透明度	背景透明度
装饰透明度	装饰透明度
颜色配置	颜色配置，按照值域匹配颜色

数据

字段说明：

字段	说明
name	名称
value	值
unit	单位

示例：

[
  {
    "name": "首屏",
    "unit": "ms",
    "value": 70
  }
]

交互

请参考3D雷达图。

气泡图

配置

数据

字段说明：

字段	说明
name	名称
value	值
unit	单位

示例：

[
  {
    "name": "天津",
    "value": 73,
    "unit": "%"
  },
  {
    "name": "广东省",
    "value": 15,
    "unit": "%"
  }
]

交互

请参考3D雷达图。

3D仪表盘

配置

字段	说明
颜色配置	值域类型颜色配置

数据

字段说明：

字段	说明
name	名称
value	值
title	标题

示例：

[
  {
    "value": 85,
    "name": "用户体验评分",
    "title": "子域名"
  }
]

交互

请参考3D雷达图。

柱状折线图

配置

数据

字段说明：

字段	说明
x	时间戳
y	值
s	系列

示例：

[
  {
    "y": 259,
    "x": 1644480000000,
    "s": "a.com"
  },
  {
    "y": 2987,
    "x": 1644480060000,
    "s": "a.com"
  }
]

交互

请参考3D雷达图。

3D雷达图2

配置

数据

字段说明：

字段	说明
x	x轴坐标值
y	y轴坐标值
s	系列值

示例：

[
  {
    "x": "白屏",
    "y": 84,
    "s": "数据一"
  },
  {
    "x": "慢页面占比",
    "y": 23,
    "s": "数据一"
  },
  {
    "x": "可交互",
    "y": 77,
    "s": "数据一"
  },
  {
    "x": "操作时间",
    "y": 65,
    "s": "数据一"
  },
  {
    "x": "操作可用性",
    "y": 62,
    "s": "数据一"
  },
  {
    "x": "首屏",
    "y": 97,
    "s": "数据一"
  },
  {
    "x": "平均值",
    "y": 85,
    "s": "数据二"
  }
]

交互

请参考3D雷达图。

指标比例图

配置

数据

字段说明：

字段	说明
name	名称
value	值
percent	百分比

示例：

[
  {
    "name": "Pro Total Users",
    "value": 39000,
    "percent": 65
  }
]

交互

请参考3D雷达图。

3D桑基图

配置

数据

字段说明：

字段	说明
links	节点数组
nodes	链接数组

示例：

[
  {
    "nodes": [
      {
        "id": 0,
        "name": "node0"
      },
      {
        "node": 1,
        "name": "node1"
      },
      {
        "node": 2,
        "name": "node2"
      },
      {
        "node": 3,
        "name": "node3"
      },
      {
        "node": 4,
        "name": "node4"
      },
      {
        "node": 5,
        "name": "node5"
      },
      {
        "node": 6,
        "name": "node6"
      },
      {
        "node": 7,
        "name": "node7"
      },
      {
        "node": 8,
        "name": "node8"
      },
      {
        "node": 9,
        "name": "node9"
      },
      {
        "node": 10,
        "name": "node10"
      }
    ],
    "links": [
      {
        "source": 0,
        "target": 1,
        "value": 2
      },
      {
        "source": 0,
        "target": 2,
        "value": 3
      },
      {
        "source": 0,
        "target": 3,
        "value": 4
      },
      {
        "source": 0,
        "target": 4,
        "value": 2
      },
      {
        "source": 0,
        "target": 5,
        "value": 8
      },
      {
        "source": 1,
        "target": 6,
        "value": 5
      },
      {
        "source": 2,
        "target": 7,
        "value": 9
      },
      {
        "source": 3,
        "target": 7,
        "value": 1
      },
      {
        "source": 4,
        "target": 8,
        "value": 7
      },
      {
        "source": 5,
        "target": 9,
        "value": 2
      },
      {
        "source": 7,
        "target": 10,
        "value": 7
      },
      {
        "source": 8,
        "target": 10,
        "value": 8
      },
      {
        "source": 6,
        "target": 10,
        "value": 8
      }
    ]
  }
]

交互

请参考3D雷达图。

彩色柱状图

配置

数据

字段说明：

字段	说明
name	名称
value	值
color	颜色

示例：

[
  {
    "name": "营收一部",
    "value": 3938,
    "color": "#77E5FF"
  },
  {
    "name": "财务部门",
    "value": 56015,
    "color": "#EDFF77"
  },
  {
    "name": "运营二部",
    "value": 26046,
    "color": "#7639FF"
  },
  {
    "name": "订单提交",
    "value": 38072,
    "color": "#88FF77"
  },
  {
    "name": "销售部门",
    "value": 56359,
    "color": "#FF7042"
  }
]

交互

请参考3D雷达图。

图表2

渐变柱状图

这个组件是一个分组的数据。图例的数据决定每组数据的多少。图例的颜色可以通过接口来直接定义，也可以在组件中配置。

组件包含两个样式：

配置

数据

字段说明：

字段	说明
x	x轴坐标值
y	y轴坐标值
s	系列值

示例：

[
  {
    "x": "营收一部",
    "y": 146,
    "s": "成功"
  },
  {
    "x": "营收一部",
    "y": 886,
    "s": "失败"
  },
  {
    "x": "财务部门",
    "y": 913,
    "s": "成功"
  },
  {
    "x": "财务部门",
    "y": 826,
    "s": "失败"
  },
  {
    "x": "运营二部",
    "y": 220,
    "s": "成功"
  },
  {
    "x": "运营二部",
    "y": 950,
    "s": "失败"
  },
  {
    "x": "订单提交",
    "y": 832,
    "s": "成功"
  },
  {
    "x": "订单提交",
    "y": 183,
    "s": "失败"
  },
  {
    "x": "销售部门",
    "y": 767,
    "s": "成功"
  },
  {
    "x": "销售部门",
    "y": 190,
    "s": "失败"
  }
]

交互

请参考3D雷达图。

3D仪表盘2

配置

数据

字段说明：

字段	说明
value	值，number类型

示例：

[
  {
    "value": 86
  }
]

交互

请参考3D雷达图。

彩色进度条

环的多少通过数据的条数来决定。每个环的颜色可以通过接口来直接定义，也可以在组件中配置。值默认是百分比。

该组件有两个样式：

配置

数据

字段说明：

字段	说明
value	值。默认最大100
name	名称
unit	单位
color	颜色

示例：

[
  {
    "name": "营收一部",
    "unit": "%",
    "value": 59,
    "color": "#2BBBFF"
  },
  {
    "name": "财务部门",
    "unit": "%",
    "value": 23,
    "color": "#EDFF77"
  },
  {
    "name": "运营二部",
    "unit": "%",
    "value": 55,
    "color": "#7639FF"
  },
  {
    "name": "订单提交",
    "unit": "%",
    "value": 34,
    "color": "#88FF77"
  },
  {
    "name": "销售部门",
    "unit": "%",
    "value": 80,
    "color": "#DB5A5A"
  }
]

交互

请参考3D雷达图。

彩条指标

配置

数据

字段说明：

字段	说明
value	值
name	名称
unit	单位
color	颜色

示例：

[
  {
    "name": "完成业务数",
    "unit": "笔",
    "value": 1497614,
    "color": "#77E5FF"
  },
  {
    "name": "报错业务数",
    "unit": "笔",
    "value": 184,
    "color": "#F30B49"
  },
  {
    "name": "错误影响用户数",
    "unit": "个",
    "value": 200,
    "color": "#FF3B3B"
  },
  {
    "name": "平均响应时间",
    "unit": "ms",
    "value": 7850,
    "color": "#15F4D1"
  }
]

交互

请参考3D雷达图。

立体占比图

配置

数据

字段说明：

字段	说明
name	名称
value	值
color	颜色

示例：

[
  {
    "name": "营收一部",
    "value": 4146,
    "color": "#23C8F0"
  },
  {
    "name": "财务部门",
    "value": 1292,
    "color": "#FFDB48"
  },
  {
    "name": "运营二部",
    "value": 735,
    "color": "#02F0F1",
  },
  {
    "name": "订单提交",
    "value": 2764,
    "color": "#17CDF9"
  },
  {
    "name": "销售部门",
    "value": 3065,
    "color": "#14AFD5"
  }
]

交互

请参考3D雷达图。

核心指标

配置

数据

字段说明：

字段	说明
value	值
name	名称
unit	单位
color	颜色

示例：

[
  {
    "name": "营收一部",
    "unit": "",
    "value": 5259,
    "color": "#2BBBFF"
  },
  {
    "name": "财务部门",
    "unit": "",
    "value": 4323,
    "color": "#EDFF77"
  },
  {
    "name": "运营二部",
    "unit": "",
    "value": 4155,
    "color": "#7639FF"
  },
  {
    "name": "订单提交",
    "unit": "",
    "value": 2934,
    "color": "#88FF77"
  },
  {
    "name": "销售部门",
    "unit": "",
    "value": 1980,
    "color": "#DB5A5A"
  }
]

交互

请参考3D雷达图。

3D柱状折线图

配置

数据

示例：

[
  {
    "overview": {
      "tick": 1
    },
    "yAxis": [
      {
        "tickUnit": "次"
      },
      {
        "tickUnit": "ms",
        "opposite": true
      }
    ],
    "series": [
      {
        "name": "DNS",
        "type": "column",
        "yAxis": 0,
        "data": [
          {
            "y": 4182,
            "x": 1646644920000
          },
          {
            "y": 1178,
            "x": 1646644980000
          }
        ]
      },
      {
        "name": "UV",
        "type": "column",
        "yAxis": 0,
        "data": [
          {
            "y": 375,
            "x": 1646644920000
          },
          {
            "y": 2760,
            "x": 1646644980000
          }
        ]
      },
      {
        "name": "首包",
        "type": "line",
        "yAxis": 1,
        "data": [
          {
            "y": 3274,
            "x": 1646644920000
          },
          {
            "y": 2410,
            "x": 1646644980000
          }
        ]
      },
      {
        "name": "白屏",
        "type": "line",
        "yAxis": 1,
        "data": [
          {
            "y": 4228,
            "x": 1646644920000
          },
          {
            "y": 3014,
            "x": 1646644980000
          }
         ]
      }
    ]
  }
]

交互

请参考3D雷达图。

3D拓扑

配置

配置项	说明
缩放	组件整体缩放
连线长度	连线长度
连接名称透明度	连接名称透明度
连接线透明度	连接线透明度
连接线宽度	连接线宽度
连接线颜色	连接线颜色
连接线高亮色	连接线高亮色
节点缩放比例	节点的缩放整体比例
自动旋转	是否开启自动旋转
自动旋转速度	自动旋转速度

数据

字段说明：

字段	说明
links	节点数组
nodes	链接数组

示例：

[
  {
    "nodes": [
      {
        "id": 1,
        "health": -1,
        "name": "A",
        "type": 12,
        "subType": 1,
        "fx": null,
        "fy": null,
        "fz": null,
        "scale": 1
      },
      {
        "id": 2,
        "health": 0,
        "name": "B",
        "type": 11,
        "subType": 5,
        "fx": null,
        "fy": null,
        "fz": null,
        "scale": 1
      },
      {
        "id": 3,
        "health": 1,
        "name": "C",
        "type": 14,
        "subType": 2,
        "fx": null,
        "fy": null,
        "fz": null,
        "scale": 1
      },
      {
        "id": 4,
        "health": 2,
        "name": "D",
        "type": 17,
        "subType": 45,
        "fx": null,
        "fy": null,
        "fz": null,
        "scale": 1
      },
      {
        "id": 5,
        "health": 3,
        "name": "E",
        "type": 16,
        "subType": 0,
        "fx": null,
        "fy": null,
        "fz": null,
        "scale": 1
      },
      {
        "id": 6,
        "health": 4,
        "name": "F",
        "type": 15,
        "subType": 1,
        "fx": null,
        "fy": null,
        "fz": null,
        "scale": 1
      }
    ],
    "links": [
      {
        "source": 2,
        "target": 1,
        "info": "B--A"
      },
      {
        "source": 1,
        "target": 5,
        "info": "A--E"
      },
      {
        "source": 1,
        "target": 3,
        "info": "A--C"
      },
      {
        "source": 1,
        "target": 4,
        "info": "A--D"
      },
      {
        "source": 1,
        "target": 6,
        "info": "A--F"
      }
    ]
  }
]

交互

请参考3D雷达图。

星空环布图

该组件包含两套图例和逻辑关系。

配置

数据

字段说明：

字段	说明
name	名称
value	值
groupld	分组id
data	数据

示例：

[
  {
    "name": "G1-base-000",
    "groupId": 1,
    "value": 69,
    "data": [
      46,
      58,
      17
    ]
  },
  {
    "name": "G1-base-001",
    "groupId": 1,
    "value": 22,
    "data": [
      25,
      72,
      40
    ]
  }
]

交互

请参考3D雷达图。

告警故障列表

配置

数据

字段说明：

字段	说明
series	左侧数据
group	右侧分组
infolist	中间信息

示例：

详见网页案例

交互

请参考3D雷达图。

中国地图1

配置

数据

字段说明：

字段	说明
name	名称
value	值

示例：

[
  {
    "name": "青海",
    "value": 1.387,
    "left": 465.68310736145577,
    "top": 334.7239534601599
  },
  {
    "name": "新疆",
    "value": 0.878,
    "left": 305.83848602150533,
    "top": 227.72608899917293
  }
]

交互

请参考3D雷达图。

中国地图2

配置

数据

字段说明：

字段	说明
name	名称
value	值
list	数据

示例：

[
  {
    "name": "青海",
    "value": 1.728,
    "list": [
      {
        "key": "电子社保卡签发数",
        "value": "1,170,000"
      },
      {
        "key": "就业服务注册数",
        "value": "223,111,022"
      }
    ]
  }
]

交互

请参考3D雷达图。

滚动列表

配置

数据

示例：

[
  {
    "health": "一般",
    "business": 39,
    "resTime": "卡顿",
    "throughput": "24%",
    "peakThroughput": "11%"
  },
  {
    "health": "良好",
    "business": 41,
    "resTime": "崩溃",
    "throughput": "19%",
    "peakThroughput": "14%"
  }
]

交互

请参考3D雷达图。

轮播列表

配置

数据

示例：

[
  {
"id": 1,
……//详见在线示例

交互

请参考3D雷达图。

告警列表2

配置

数据

字段说明：

字段	说明
name	名称
value	值

示例：

[
  {
    "name": "发生警报数",
    "value": 52019
  },
  {
    "name": "影响应用数",
    "value": 13885
  },
  {
    "name": "影响事务数",
    "value": 47478
  },
  {
    "name": "待处理告警数",
    "value": 6534
  }
]

交互

请参考3D雷达图。

翻页列表

配置

数据

示例：

[
  {
    "id": 1,
    "name": "网易Al体验中心-首页",
    "pv": 24.24,
    "onready": 150,
    "loadtime": 286,
    "score": 98
  },
  {
    "id": 2,
    "name": "wangyiai/my/cherry",
    "pv": 11.5,
    "onready": 432,
    "loadtime": 989,
    "score": 92
  },
  {
    "id": 3,
    "name": "wangyiai/card",
    "pv": 10.89,
    "onready": 167,
    "loadtime": 176,
    "score": 89
  },
  {
    "id": 4,
    "name": "wangyiai/loopart",
    "pv": 83.12,
    "onready": 289,
    "loadtime": 327,
    "score": 72
  },
  {
    "id": 5,
    "name": "网易Al体验中心-订单",
    "pv": 8.36,
    "onready": 150,
    "loadtime": 286,
    "score": 71
  },
  {
    "id": 6,
    "name": "wangyiai/about",
    "pv": 21.5,
    "onready": 132,
    "loadtime": 234,
    "score": 97
  }
]

交互

请参考3D雷达图。