一种定制监控可视化方法及装置制造方法及图纸

本发明专利技术涉及互联网监控技术领域，具体涉及一种定制监控可视化方法及装置，该方法包括：获取待生成可视化界面的定制图标信息和界面设计图；根据定制图标信息，使用可缩放矢量图形技术绘制矢量图标；对矢量图标的源码进行封装，生成矢量图标相对应的原子组件；根据界面设计图的可视化布局，计算所有原子组件的位置信息，配置原子组件参数渲染出整体网络架构的可视化界面；通过网络协议获取实时监控数据，并依次配置到原子组件，持续更新可视化界面。本发明专利技术提供的技术方案采用SVG图形作为底层技术，能够针对定制化的实际业务生成相应的，能够持续更新的可视化界面，用户体验度好，满意度高。度高。度高。

【技术实现步骤摘要】
一种定制监控可视化方法及装置


[0001]本专利技术涉及互联网监控
，具体涉及一种定制监控可视化方法及装置。

技术介绍

[0002]云时代各大公司都纷纷将技术转向云架构，落地云原生技术，然而技术迁移通常是渐进式的，这样一来就会有一段时期，整个技术架构是新旧并存的，对于监控领域也是增加了复杂度。公司需要关注当前架构下的实时网络流量与服务器的CPU、内存的使用率等性能指标来调整优化架构升级的优先级，因此，就需要一个相对直观的可视化监控大屏来满足需求。
[0003]现有可视化技术表现形式主要为折线图、饼图、柱状图、图表，或者表现形式为树形结构、关系图。这些具备相对成熟的原子图表组件与配置化的图表，能够应对基本业务，但是应对可视化监控领域一些需要深度结合公司实际业务，页面布局定制化较高的需求场景就显得比较棘手，如公司内部需要根据云原生技术架构监控可视化展示各个环节的网络流量。因此，现有的可视化技术表现形式无法应对需要定制化的实际业务。

技术实现思路

[0004]有鉴于此，本专利技术的目的在于提供一种定制监控可视化方法及装置，以解决现有技术中的可视化技术表现形式无法应对需要定制化的实际业务的问题。
[0005]根据本专利技术实施例的第一方面，提供一种定制监控可视化方法，包括：
[0006]获取待生成可视化界面的定制图标信息和界面设计图；
[0007]根据所述定制图标信息，使用可缩放矢量图形技术绘制矢量图标；
[0008]对所述矢量图标的源码进行封装，生成所述矢量图标相对应的原子组件；
[0009]根据所述界面设计图的可视化布局，计算所有原子组件的位置信息，配置原子组件参数渲染出整体网络架构的可视化界面；
[0010]通过网络协议获取实时监控数据，并依次配置到所述原子组件，持续更新所述可视化界面。
[0011]优选的，所述对所述矢量图标的源码进行封装，包括：
[0012]基于vue框架提供的组件化与视图模型双向绑定的能力，对所述矢量图标的源码进行封装。
[0013]优选的，所述配置原子组件参数渲染出整体网络架构的可视化界面，包括：
[0014]根据所述原子组件的位置信息在可视化界面中生成原子组件；
[0015]根据原子组件的位置间隔及参数生成连接线和方向箭头；
[0016]根据预设动画效果及原子组件参数渲染相应的原子组件正常状态。
[0017]优选的，所述根据原子组件的位置间隔及参数生成连接线和方向箭头，包括：
[0018]根据原子组件的位置间隔分别计算连线和方向箭头的坐标，使用D3来动态绘制连线和方向箭头；
[0019]利用可缩放矢量图形的蒙版标签绘制模拟流量数据包，利用动画标签定义路径动画为所述连线和方向箭头，模拟实现数据流动效果。
[0020]优选的，在所述通过网络协议获取实时监控数据，并依次配置到所述原子组件之后，还包括：
[0021]对每个原子组件配置告警阈值；
[0022]对所述监控数据进行加工处理，计算出每个原子组件当前的数据状态，根据所述告警阈值和所述数据状态判断是否需要告警；
[0023]若是，则将相应原子组件切换为预设的告警主题效果。
[0024]根据本专利技术实施例的第二方面，提供一种定制监控可视化装置，包括：
[0025]定制信息获取模块，用于获取待生成可视化界面的定制图标信息和界面设计图；
[0026]图标绘制模块，用于根据所述定制图标信息，使用可缩放矢量图形技术绘制矢量图标；
[0027]组件生成模块，用于对所述矢量图标的源码进行封装，生成所述矢量图标相对应的原子组件；
[0028]界面渲染模块，用于根据所述界面设计图的可视化布局，计算所有原子组件的位置信息，配置原子组件参数渲染出整体网络架构的可视化界面；
[0029]数据导入模块，用于通过网络协议获取实时监控数据，并依次配置到所述原子组件，持续更新所述可视化界面。
[0030]本专利技术的实施例提供的技术方案可以包括以下有益效果：
[0031]可以理解的是，本专利技术提供的技术方案，能够获取待生成可视化界面的定制图标信息和界面设计图；根据定制图标信息，使用可缩放矢量图形技术绘制矢量图标；对矢量图标的源码进行封装，生成矢量图标相对应的原子组件；根据界面设计图的可视化布局，计算所有原子组件的位置信息，配置原子组件参数渲染出整体网络架构的可视化界面；通过网络协议获取实时监控数据，并依次配置到原子组件，持续更新可视化界面。本专利技术提供的技术方案采用SVG图形作为底层技术，能够针对定制化的实际业务生成相应的，能够持续更新的可视化界面，用户体验度好，满意度高。
[0032]应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本专利技术。
附图说明
[0033]此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本专利技术的实施例，并与说明书一起用于解释本专利技术的原理。
[0034]图1是根据一示例性实施例示出的一种定制监控可视化方法的步骤示意图；
[0035]图2是根据一示例性实施例示出的可视化方案整体设计示意图；
[0036]图3是根据一示例性实施例示出的技术示意框图；
[0037]图4是根据一示例性实施例示出的一种定制监控可视化装置的示意框图。
具体实施方式
[0038]这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及
附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本专利技术相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本专利技术的一些方面相一致的装置和方法的例子。
[0039]现有如Echarts、HighCharts、antV G6等图形库多以折线图、柱状图、饼图、热力图、关系图等原子组件来实现数据可视化，这些库面对通用维度的需求是可以足够优秀的应对的。但是面对特定业务需要高度定制化的可视化界面就难以下手了。需要定制化开发原子组件，开发者往往会采用原始的html+css+image技术来开发，这种方式往往存在开发效率低且存在性能问题，image图片是位图在缩放操作后会有模糊不清的问题，一旦生成图片，内容细节无法在开发中及时修改的问题。使用canvas图形引擎也可能实现本方案提及的定制化元素绘制，但是canvas图形的可控性相比SVG有限制，生成后难以直接修改，不容易深度结合vue的响应式组件，只能重新渲染。
[0040]实施例一
[0041]图1是根据一示例性实施例示出的一种定制监控可视化方法的步骤示意图，参见图1，提供一种定制监控可视化方法，包括：
[0042]步骤S11、获取待生成可视化界面的定制图标信息和界面设计图；
[0043]步骤S12、根据所述定制图标信息，使用可缩放矢量图形技术绘制矢量图标；
[0044]步骤S13本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种定制监控可视化方法，其特征在于，包括：获取待生成可视化界面的定制图标信息和界面设计图；根据所述定制图标信息，使用可缩放矢量图形技术绘制矢量图标；对所述矢量图标的源码进行封装，生成所述矢量图标相对应的原子组件；根据所述界面设计图的可视化布局，计算所有原子组件的位置信息，配置原子组件参数渲染出整体网络架构的可视化界面；通过网络协议获取实时监控数据，并依次配置到所述原子组件，持续更新所述可视化界面。2.根据权利要求1所述的方法，其特征在于，所述对所述矢量图标的源码进行封装，包括：基于vue框架提供的组件化与视图模型双向绑定的能力，对所述矢量图标的源码进行封装。3.根据权利要求1所述的方法，其特征在于，所述配置原子组件参数渲染出整体网络架构的可视化界面，包括：根据所述原子组件的位置信息在可视化界面中生成原子组件；根据原子组件的位置间隔及参数生成连接线和方向箭头；根据预设动画效果及原子组件参数渲染相应的原子组件正常状态。4.根据权利要求3所述的方法，其特征在于，所述根据原子组件的位置间隔及参数生成连接线和方向箭头，包括：根据原子组件的位置间隔分别计算连线和方向箭...

【专利技术属性】
技术研发人员：赵镇，
申请(专利权)人：上海中通吉网络技术有限公司，
类型：发明
国别省市：