- 产品与解决方案
- 行业解决方案
- 服务
- 支持
- 合作伙伴
- 关于我们
02-统一数字底盘可视化大屏配置举例
本章节下载： 02-统一数字底盘可视化大屏配置举例 (2.54 MB)
配置举例
资料版本：5W101-20250814
Copyright © 2025 新华三技术有限公司 版权所有，保留一切权利。
非经本公司书面许可，任何单位和个人不得擅自摘抄、复制本文档内容的部分或全部，并不得以任何形式传播。
除新华三技术有限公司的商标外，本手册中出现的其它公司的商标、产品标识及商品名称，由各自权利人拥有。
本文档中的信息可能变动，恕不另行通知。
目 录
伴随着IT运维管理目标、管理范围、管理对象、管理深度的转变，业务可视化已成为IT运维平台建设的关键趋势之一。业务应用系统在运行过程中会产生大量的业务数据，这些数据或用于监控业务，或用于展示成果。可视化大屏就是一款提供业务数据定制展示的产品。
本案例主要介绍如何通过可视化大屏中的图表和编排特性，实现业务数据定制展示。
· 图表数据源的配置要求大屏绘制人员必须熟悉基本的API调用知识和JavaScript语言知识。
· 需要保证调用的接口与当前大屏的网络连接环境是互通的。
· 默认大屏和区域大屏的编辑权限仅admin账号拥有。
数据中心A需通过大屏功能显示网络概览，包括资源统计、资源历史统计、站点告警等。
图1 多数据中心网络概览
(1) 进入自定义大屏页面，新增可视化。
(2) 对可视化大屏进行编辑。
(3) 保存并预览配置完成的可视化大屏。
(4) 自定义大屏页面还可进行轮播大屏配置。
适用于统一数字底盘E71xx版本。
(1) 登录系统全域环境，单击左上角
图标 ，在菜单中选择[首页 > 可视化大屏]菜单项。
(2) 单击可视化大屏链接，进入可视化大屏编辑器页面，如下图所示。
(3) 在全部大屏页面，单击<新建可视化>图标，弹出创建大屏窗口，如下图所示。参数说明如下：
¡ 大屏名称：必填项，此处以test1为例。
¡ 自定义URL：
URL：选填项，此处保持默认设置。大屏创建成功后将随机生成一个映射地址。
映射地址：即可直接寻址的物理地址。大屏的映射地址具有唯一性。统一数字底盘中若需要将大屏配置到首页展示建议配置自定义映射地址，方便内部跳转。
(4) 单击<确定>按钮，创建大屏成功。大屏创建成功后将会自动跳转至大屏编辑页面，如下图所示。
· 创建大屏后自动跳转。
· 在全部大屏页面选择已有大屏，单击<编辑>按钮，如下图所示。
大屏编辑页面包含了快捷工具栏和多个可设置区域，如下图所示。单击工具栏里的图标可以快速打开或关闭相应功能面板。
表1 常用图标与区域说明
|
位置 |
图标 |
名称 |
说明 |
备注 |
|
左上方工具栏 |
|
图层 |
每个组件对应一个图层。图层列表中的从上到下的顺序就是组件在大屏中的摆放层次。选择左侧的图层可以精确定位画布上的组件。辅助类组件通过图层控制，可在大屏中达到更好的绘制效果。例如：大屏的边框效果是边框组件和业务组件叠加图层形成的展示效果。 |
|
|
|
组件列表 |
使用组件列表中的多种组件编排画布。 |
|
|
|
|
页面配置 |
设置当前大屏的整体属性和组件的属性。 页面设置只是页面配置功能的一部分。打开页面配置面板后，单击画布即可切换到页面设置面板；单击画布上的组件将切换到组件设置面板，并且不同组件可设置的内容也有区别。 |
|
|
|
|
全局数据配置 |
定义全局变量的缺省值，用于通过路径的方式动态控制Widget中的API请求参数。 |
|
|
|
|
可视化大屏编辑器 |
单击退出大屏编辑页面。 |
- |
|
|
页面中央 |
- |
画布 |
展示用户正在编辑的大屏。 |
|
|
右上方工具栏 |
|
保存 |
单击保存当前大屏编辑内容。 |
- |
|
|
预览 |
用于大屏编辑调试，预查看大屏最终的呈现效果，不会影响已经保存或发布的大屏。 |
- |
|
|
画布右上方 |
|
缩放工具 |
修改框内数字或者拖动滑块均可改变当前画布的预览比例。 |
- |
|
|
快捷键提示 |
鼠标移动到图标上即可显示出图层相关的快捷键操作信息。 |
- |
在大屏编辑页面，用户可以使用组件列表中的多种组件编排画布。组件列表面板默认在大屏编辑页面左侧打开，包含了图表组件、业务组件、图片组件、文字组件、时间组件、辅助组件和地图组件多个组件类型，以及收藏组件功能。
(1) 单击<组件列表>图标
，打开组件列表。
(2) 单击组件列表左侧页签，可切换选择不同类型的组件，如下图所示。
(3) 单击组件或者拖拽组件到画布上，完成组件的增加。
用户可以在[页面配置>组件设置]中修改组件样式，样式包括基础样式和定制样式。
· 基础样式为所有组件都可配置的样式，具体为图表尺寸、图表位置、透明度、图表背景、标题、标题显示、标题对齐方式、标题背景颜色、标题字体样式、标题字体粗细、标题字号、标题颜色、图表边框。
· 定制样式为每个组件独有的样式配置，支持用户对组件样式进行更加细致化的配置。
详细操作步骤如下：
(1) 单击<页面配置>图标
，打开页面设置面板。
(2) 单击画布上的组件，面板将自动切换为组件设置面板，如下图所示。
图9 组件设置-样式设置
组件的数据源支持配置静态数据及API数据。静态数据是JSON格式。
(1) 单击<页面配置>图标
，打开页面设置面板。
(2) 单击画布上的组件，面板将自动切换为组件设置面板，如下图所示。
图10 组件设置-样式设置
(3) 单击<数据>图标
，切换到数据设置面板，如下图所示。不同的组件需配置的数据是有区别的。
图11 组件设置-数据设置
(4) 单击<配置数据源>按钮，进入配置数据源面板。
(5) 数据源类型选择“静态数据”，如下图所示。在输入框中编辑组件需要的JSON数据。
(6) 在响应框中查看静态数据，如下图所示。
(1) 单击<页面配置>图标
，打开页面设置面板。
(1) 单击画布上的组件，面板将自动切换为组件设置面板。
(2) 单击<数据>图标
，切换到数据设置面板。不同的组件需配置的数据是有区别的。
(3) 单击<配置数据源>按钮，进入配置数据源面板。数据源类型选择“API”，如下图所示。
(4) 单击API源序号下的<+>或<->按钮可以新增或删除API源，组件会依次调用API源，将所有返回数据合并成数组返回。除地图组件以外的组件，API数据源最多可以配置5个。
图14 配置API数据源
(5) 请求方式可选择GET或者POST。
¡ 选择GET时，需配置请求的URL和Headers。
¡ URL的格式为：http://ip:port/dashboard/getData。如果URL的协议、IP、端口和当前大屏的地址完全相同，可以只填写路径部分。
¡ 选择POST时，可以填写Body中携带的参数，如下图所示。
图15 配置API数据源-POST方式
(6) 在响应框中查看请求返回的数据，如下图所示。
所有组件在渲染数据时，数据必须满足静态数据的格式，且数据中要有组件能解析获取的字段名称，但对于除静态数据以外的数据源类型，很难保证其数据响应结果能同时满足以上两个要求，因此页面上提供用户输入JavaScript脚本语言来对数据源的响应结果解析过滤成能够使用的数据格式，用户也可以利用该特性对数据进行二次加工。
数据过滤器的配置处在组件配置的数据配置区，所有类型的数据源都支持启用/禁用数据过滤器。当组件启用数据过滤器后，就可以为组件配置一段数据过滤器的脚本代码。
详细操作步骤如下：
(1) 单击<页面配置>图标
，打开页面设置面板。
(2) 单击画布上的组件，面板将自动切换为组件设置面板。
(3) 单击<数据>图标
，切换到数据设置面板。
(4) 单击<配置数据源>按钮，进入配置数据源面板。数据源类型选择“静态数据”或“API”。
(5) 勾选开启数据过滤器，并选择开启过滤器调试，如下图所示。
(6) 单击编辑过滤器链接，可以进入数据过滤器编辑区域。使用JavaScript脚本语言编辑完过滤器后，单击<预览>按钮，对数据过滤器过滤前后的数据进行查看，如下图所示。数据过滤器对原始的静态数据进行了过滤，把静态数据加工成了只有一个JSON元素的数组。
过滤器的脚本是针对所有数据源最终合并返回的结果使用的，因此编写时需要注意脚本逻辑。
(7) 单击<保存>按钮，完成对该组件的数据过滤器编辑。同时在画布上的图层应用数据已受过滤器影响。
以基本饼图为例，对API数据源、多数据源、数据过滤器的联合使用进行说明。
(1) 单击<组件列表>图标
，打开组件列表。
(2) 单击组件列表左侧页签，在图表组件分组中拖拽出基本饼图组件放在画布上。
(3) 单击<页面配置>图标
，打开页面设置面板。
(4) 单击画布上的组件，面板将自动切换为组件设置面板。
(5) 单击<数据>图标
，切换到数据设置面板。
(6) 单击<配置数据源>按钮，进入配置数据源面板。数据源类型选择“静态数据”。
(7) 查看组件的静态数据源结构，如下图所示。通过修改静态数据源里的数值，确认参数与图表的对应关系。例如，静态数据源是一个数组，里面的每一个元素都代表了一个系列在饼状图中的占比，元素中的“name”属性对应系列的名字，“value”对应系列数值大小，用于计算饼状图占比。
(8) 掌握图表与静态数据的关系后，就可以尝试使用API数据源绑定了。数据源类型选择“API”，请求方式选择“GET”，使用自定义大屏内置GET测试接口进行测试，URL填写为：/dashboard/getData，如下图所示。
(9) 接口返回了一个数组，数组中每一个元素，都有“x”、“y”、“z”三个属性，属性的值为随机生成的整数，如下图所示。
(10) 配置多数据源。例如，将数据源增加到2个，继续选择GET请求，仍然请求该接口数据，此时数据源的返回结构将两个接口的返回结果组合成了一个数组，里面有两个元素，分别为前后两次调用接口返回的数组，如下图所示。
(11) 无论是步骤(8)请求的单数据源，还是步骤(10)请求的2个数据源，观察返回的数据结构，可以发现都不满足静态数据的格式，此时的图表是无法正常渲染出数据的。为了解决这个问题，需要使用数据过滤器来对返回的数据结果进行二次加工处理。例如，假设/dashboard/getData两次请求的分别是厂商A和厂商B第一季度“x”，“y”，“z”三个产品每个月的销售数量，需要绘制一个对比两个厂商第一季度总销量的占比饼状图，就可以使用JavaScript脚本进行加工。
(12) 数据过滤器保存后，就可看到此时饼状图已经可以正常渲染这份数据了。因本例中API返回的数值是随机生成的，所以结果会与图例有些差异。
页面设置上可以自定义画布的宽和高，默认为1920*1080，建议设置为适配显示器的分辨率。
(1) 单击<页面配置>图标
，打开页面设置面板。
(2) 在屏幕大小设置框中输入宽和高。
背景颜色默认为RGBA(20,40,74,1)。用户可以单击选择背景颜色，或输入颜色编码修改背景颜色，支持同时修改透明度。
默认情况下大屏没有背景图片。系统提供了多个背景图片选择，支持上传自定义背景图。
自定义背景图设置方法：
(1) 单击选中画布。
(2) 选择[页面设置面板 > 大屏背景栏]中的自定义项。
(3) 单击上传链接，选择一张图片进行上传。
(4) 图片上传成功后，可直接在画布上预览效果。
大屏在首页卡片上显示的封面图，默认封面如下图所示。支持自定义大屏封面图片。
自定义设置封面方法：
(1) 单击选中画布。
(2) 选择[页面设置面板 > 大屏封面]，单击封面图片的上传链接，选择一张图片进行上传。
(3) 图片上传成功后，单击<保存>图标
，保存修改。
(4) 单击<可视化大屏编辑器>图标
，返回首页，查看封面。
默认为全屏铺满，支持选择等比例缩放高度铺满、等比例缩放宽度铺满、自适应缩放。
用户可以开启栅格布局进行大屏编排。
(1) 单击选中画布。
(2) 选择[页面设置面板 > 大屏布局]，开启栅格布局。
(3) 单击开启显示栅格线（可选）。
(4) 设置栅格距离。设置栅格距离后，组件在画布上拖动时，横纵坐标为该数值的倍数。
使用区块布局可以快速编排大屏。先增加区块给大屏进行位置排版，再往区块中增加组件，组件会被自动缩放填充整个区块，减少调整组件位置的工作量。
· 一个区块中只能使用一个组件进行填充，但支持区块外的图层覆盖在区块上。
· 无法将已经生成的图层拖拽进区块中，但可以借助收藏功能将配置保存，使用收藏组件填充。
· 区块布局不如自由布局精确。
(1) 选择[页面设置面板 > 大屏布局]，开启显示区块边框。
(2) 在画布上方，单击工具栏上的<添加区块>按钮。每单击一次，就会在画布上增加一个区块。
(3) 调整区块参数。
¡ 高度缩放基数：组件在高度上每次变化的基准数值。
¡ 顶部边距：最上方的区块距离画布顶边的边距。
¡ 区块间距：区块之间竖直、水平间距。
(4) 编排区块位置，选择大屏标题样式。
(5) 使用组件填充区块，设置大屏标题内容等相关参数，完成编排。
在全局数据配置中定义全局变量的缺省值，用于通过路径的方式动态控制Widget中的API请求参数，将获取到的参数传到Widget，通过Widget展示数据。每个大屏最多可以定义5个全局变量的缺省值。
此处以创建一个用于展示各地区产品(A、B、C)销售额占比的大屏为例。本例中配置的API可用于获取一个地区的销售额，API中有个key参数，传入地区名称就可以返回地区的销售数据。数据源中包含了beijing，shanghai等地区的数据。
(1) 创建大屏步骤可参考6 创建大屏配置举例。创建大屏时，配置自定义URL为productsale。
(2) 在大屏编辑页面选择基本饼图来展示数据，并对基本饼图的样式和数据源进行配置。
(3) 单击<组件列表>图标
，打开组件列表。
单击组件列表左侧页签，在图表组件分组中拖拽出基本饼图组件放在画布上。
(4) 单击<页面配置>图标
，打开页面设置面板。
单击画布上的组件，面板将自动切换为组件设置面板。
(5) 在样式配置面板
，选择系列设置栏，根据展示的产品数量，单击<增加>图标
来增加系列的数量，并配置系列的颜色。
(6) 在样式配置面板
，选择标题配置栏，开启显示标题，修改组件标题为“销售额占比”。
(7) 单击<数据>图标
，切换到数据设置面板。
(8) 单击<配置数据源>按钮，进入配置数据源面板。数据源类型选择“API”，组件请求方式为GET。此处传入一个key参数，通过冒号引用param1全局参数的值。
所用接口为内部临时测试接口，实际使用时请填写实际存在的API接口。
(9) 单击<全局数据配置>图标
，打开全局数据配置面板。
(10) 定义全局变量缺省值。例如，param1定义为beijing。
(11) 查看图层访问API的数据响应结果。
(13) 单击<保存>图标
，保存大屏。通过大屏URL访问大屏，大屏URL获取方式请参考10 引用大屏。
a. 使用不带param1参数的URL访问，饼图默认展示beijing的数据。
图44 不带param1参数的饼图
b. 使用带param1参数，且参数值为beijing的路径访问。
图45 带param1参数的饼图
c. 使用带param1参数，且参数值为shanghai的路径访问。
图46 带param1参数，且参数值为shanghai
地图组件相较其他组件使用相对复杂，因此本节单独介绍。
与其他组件一样，地图拥有基础样式与定制样式。基础样式配置主要为：图标尺寸位置、透明度、图表背景、标题配置和边框配置。
(1) 单击<页面配置>图标
，打开页面设置面板。
(2) 选择“地图组件”页签
，拖拽组件至画布上。
(3) 单击画布上的地图组件，面板将自动切换为组件设置面板。
图47 样式设置-基础样式
地图定制样式包括全局配置、区域层、气泡层、飞线层以及提示框。
主要配置地图整体的展示内容和效果，包括地图初始展示的范围、地图在图层区域内部的位置、地图在图层内的大小、地图上各区域的显示效果。
在组件设置面板，选择全局配置栏。本节以中国-全国地图为例进行配置。
参数说明如下：
· 地图范围：设置地图组件显示的国家，目前支持世界地图，中国地图以及多个国家地图。其中，中国地图支持显示省、市、区/县级别。
· 地图中心：切换地图后，自动显示地图中心的经纬度数据。
· 区域颜色：填充区域默认颜色、区域边界颜色、鼠标悬浮在区域上时的区域填充颜色
· 区域标签：开启区域标签后，将自动在地图上显示各区域的名称。支持设置标签的字体样式。
· 地图缩放：支持调整地图的大小比例，显示用户关注的区域。
用于配置地图中各个区域的样式。本节以全国地图为例，而中国地方最大的一级行政区域是省，因此在区域处可设置各省的区域样式。
个性化设置地图上光点的样式效果。
图51 气泡层
图52 气泡层文本标注
开启气泡层数据映射，获得的源数据若能匹配数据映射设置中的最值变化，气泡颜色将会对应改变。
图53 气泡层数据映射
飞线层、气泡层跳转设置可参见跳转设置。
图54 气泡层跳转设置
配置气泡之间个性化的连线样式。
图55 飞线样式设置
开启飞线层数据映射，获得的源数据若能匹配数据映射设置中的最值变化，线条颜色将会对应改变。
图56 飞线层数据映射
飞线层、气泡层跳转设置可参见跳转设置。
图57 飞线层跳转设置
在大屏展示时，当鼠标悬浮在气泡/飞线上时，配置是否显示提示框。
在气泡层、飞线层的样式中都可以配置跳转设置，用途为单击气泡或者飞线时进行页面跳转。
其中跳转方式包括：原页面跳转、新窗口打开以及弹窗。
跳转设置中的“是否iframe嵌入”配置，是专用于系统环境菜单内部跳转。以统一数字底盘为例，当大屏以iframe的形式被统一数字底盘的某个页面引用，用户单击大屏上的气泡或飞线时，需要跳转到统一数字底盘的某个菜单下。当开启该配置时，用户需要配置一个跳转页面ID。
此处以单击气泡后跳转到“告警”页面为例，介绍跳转页面ID获取和使用。
(1) 登录统一数字底盘，按F12开启开发者工具，打开Console工具，输入global.navMenu，如下图所示。
(2) 找到告警页面的“id”属性：“ucenter-kernel.alarm”即为要跳转的页面ID。
(3) 进入待编辑的可视化大屏页面（详细步骤请参考7 编辑大屏），在组件设置面板，对应气泡层的跳转设置中，开启iframe嵌入，将“ucenter-kernel.alarm”配置为跳转页面ID。若同时开启跳转和iframe嵌入，将优先以iframe嵌入方式跳转。
(4) 单击<保存>图标
，保存大屏。
(5) 退出可视化编辑器页面，单击页面右上角设置按钮，选择“首页配置”，在弹出窗口中将此大屏配置为首页，并退出当前用户重新登录系统。此时，在首页单击大屏上的气泡就能跳转到“告警”页面。
图64 首页配置-1
图65 首页配置-2
地图的数据源分为气泡层、飞线层、气泡提示层、飞线提示层，每个层次的数据源配置相互独立。
每个层次中数据源返回的数据若满足格式，其中的属性都可在样式设置中的跳转设置内引用。
此处以地图组件中“北京市”和“黑龙江省”两个气泡点配置为例。
(1) 在地图组件的组件设置面板，单击<数据>图标
，切换至数据配置面板。
(2) 选择气泡层栏，单击<配置数据源>按钮，进入数据源配置栏。在数据源类型选择“静态数据”，配置静态数据源。
(3) 单击<配置>图标
，切换至页面配置面板。选择气泡层，配置跳转设置。
¡ 跳转方式：支持原页面跳转、新窗口打开以及弹窗。此处以新窗口打开为例。
¡ 配置跳转页面路径为http://test.com，通过冒号的方式引用静态数据源中的属性“devSN”作为传递参数value的值。
(4) 单击<保存>图标
，保存大屏。单击<预览>图标
，预览已配置的大屏，在地图组件中分别单击“北京市”和“黑龙江省”的气泡，会弹出如下图所示的页面地址。
地图独有的交互配置，用于将气泡层和飞线层中的数据传递到一个变量中，再将该变量用于地图组件的其他数据层或者其他组件的数据源的API接口中使用。
此处以地图组件中“北京市”和“黑龙江省”两个气泡点配置为例。
(1) 在地图组件的组件设置面板，单击<数据>图标
，切换至数据配置面板。
(1) 选择气泡层栏，单击<配置数据源>按钮，进入数据源配置栏。数据源类型选择“静态数据”，配置静态数据源。
(2) 单击<交互>图标
，切换至交互配置面板。选择气泡层交互栏，启用悬浮事件，配置“name”字段绑定到变量“test”。
(3) 增加一个基本柱状图组件，操作可参考7.2 增加组件。
(4) 组件数据设置为API数据，请求方式为GET。操作可参考7.3.2 数据设置API数据。配置URL：http://api?value=:test，在输入冒号时会提示当前可用的交互变量。
(5) 单击<保存>图标
，保存大屏。单击<预览>图标
，将鼠标悬浮在“北京市”的气泡上时，test的值将会被替换成了气泡的名称。
克隆一个已有的大屏，将会得到一个和原大屏配置相同的大屏。
(1) 选择大屏，单击大屏卡片上的<克隆>图标
。
(2) 弹出克隆大屏信息设置窗口，可修改大屏名称、URL相对路径、分组选择。需修改URL中的相对路径才能成功保存新克隆的大屏，否则会提示“大屏路径已存在”，无法克隆成功。
(3) 单击<确定>按钮，克隆大屏与原大屏如下图所示。
获取大屏URL，获取后可使用浏览器访问或嵌入iframe组件。
(1) 进入可视化大屏编辑器页面。
(2) 选择需引用的大屏，单击大屏卡片上的“编辑链接”。
(3) 弹出编辑大屏URL窗口，单击图标
，复制完整链接。
(4) 复制的链接可以在浏览器上直接访问大屏，如下图所示，也可以嵌入到iframe中。
本节介绍普通轮播大屏的创建。轮播大屏是选择若干已创建好的大屏进行组合式滚动播放，最多可选择五个大屏。
(1) 进入可视化大屏编辑器页面，单击[大屏列表 > 全部大屏]菜单项，进入全部大屏页面。可预览已有大屏的展示内容与效果，或新建若干个大屏。
(2) 单击[轮播大屏列表 > 全部轮播大屏]菜单项，进入全部轮播大屏页面。单击新建轮播大屏链接，弹出新增轮播窗口。
(3) 轮播设置如下图所示，参数说明如下：
¡ 轮播大屏名称；轮播大屏命名。
¡ 轮播大屏路径：大屏的唯一访问路径，不可重复。
¡ 动画效果：大屏的转场动画，转场动画的持续时间。
¡ 是否自动轮播：轮播分为鼠标单击切换显示的大屏和自动切换显示的大屏，自动切换需配置大屏停留时长。
¡ 勾选用于轮播的大屏：支持将多个普通大屏增加至轮播队列，最多增加5个大屏。
(4) 可以通过拖拽大屏表格，调整大屏的轮播顺序，如下图所示。
(5) 单击<确定>按钮，完成轮播大屏的创建，如下图所示。
(6) 若需要查看创建后的轮播大屏，单击卡片右下角的编辑链接，复制自定义大屏的URL，粘贴至浏览器中刷新查看。
大屏提供iframe组件，用于嵌套其他页面。
(1) 单击<组件列表>图标
，打开组件列表。
(2) 单击组件列表左侧页签，选择“辅助组件”页签，选择iframe组件，如下图所示。
(3) 在组件设置中配置嵌套页面的地址：协议默认为HTTP协议，可以省略，域名必须填写完整。如果URL的协议、IP、端口和当前大屏的地址完全相同，可以只填写路径部分。
不同款型规格的资料略有差异, 详细信息请向具体销售和400咨询。H3C保留在没有任何通知或提示的情况下对资料内容进行修改的权利!
支持
