CN109840929A - 一种基于Echarts实现动态基线图绘制的方法和装置 - Google Patents

Abstract

本发明公开了一种基于Echarts实现动态基线图绘制的方法和装置。所述方法包括：对接收到的基线基础数据进行处理，根据处理后的基线基础数据生成Echarts的折叠面积图的参数；根据接收到的基线动态数据生成Echarts的折线图的参数；根据所述折叠面积图的参数和所述折线图的参数进行图形绘制，得到动态基线图。该技术方案巧妙地利用了Echarts中已有的图例，通过对数据进行合理的处理实现了动态基线图的绘制，拓展了Echarts的功能，实现了产品开发人员需要的数据分析图形，对产品的开发有着良好的帮助。

Description

一种基于Echarts实现动态基线图绘制的方法和装置

技术领域

本发明涉及计算机技术领域，具体涉及一种基于Echarts实现动态基线图绘制的方法和装置。

背景技术

如何能做到既保证产品功能的完整和专业性，又满足用户的各种需求，在各种不同用户场景都能发现未知的风险，已经成为急需解决的问题。因此，开发者通常将产品相关数据绘制成图表，数据的可视化展现对于开发工作有着很大的帮助。在图形绘制方面，开发者通常使用图像工具软件进行实现，例如开源软件Echarts。

而在数据分析图形的选择上，动态基线图是开发者在产品开发中会优先考虑的一种，它在数据分析，产品性能监控等方面提供了直观的展现。然而Echarts并不支持动态基线图这样一种图例，因此如何利用Echarts实现动态基线图的绘制是需要解决的问题。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的基于Echarts实现动态基线图绘制的方法和装置。

依据本发明的一个方面，提供了一种基于Echarts实现动态基线图绘制的方法，包括：

对接收到的基线基础数据进行处理，根据处理后的基线基础数据生成Echarts的折叠面积图的参数；

根据接收到的基线动态数据生成Echarts的折线图的参数；

根据所述折叠面积图的参数和所述折线图的参数进行图形绘制，得到动态基线图。

可选地，所述基线基础数据包括上基准值、下基准值、上容忍度、下容忍度中的一种或多种；

所述对接收到的基线基础数据进行处理，根据处理后的基线基础数据生成Echarts的折叠面积图的参数包括如下的一种或多种：

直接以所述下容忍度填充Echarts的下容忍线序列中的数据数组；

用所述下基准值减去所述下容忍度，以得到的第一结果填充Echarts的下基线序列的数据数组；

用所述上基准值减去所述下基准值，以得到的第二结果填充Echarts的上基线序列的数据数组；

用所述上容忍度减去所述上基准值，以得到的第三结果填充Echarts的上容忍线序列的数据数组。

可选地，生成的参数配置均为json格式的数据，所述参数包括如下的一种或多种：

标题组件属性，图例组件属性，直角坐标系中的x轴属性，直角坐标系中的y轴属性，序列名称属性，序列类型属性，线条样式属性，线条颜色属性，区域填充样式属性，区域颜色属性，数据堆叠属性，线两端的标记类型属性，线两端的标记的显示样式属性。

可选地，所述参数还包括：提示框组件属性；

该方法还包括：

根据所述基线基础数据和/或基线动态数据生成所述提示框组件属性，在所述动态基线图中显示数据提示框。

可选地，所述根据所述基线基础数据和/或基线动态数据生成所述提示框组件属性包括：

调用所述提示框组件中的回调函数formatter对所述基线基础数据进行格式化处理，以使处理后的基线基础数据以预设顺序在所述数据提示框中展示。

依据本发明的另一方面，提供了一种基于Echarts实现动态基线图绘制的装置，包括：

折叠面积图单元，用于对接收到的基线基础数据进行处理，根据处理后的基线基础数据生成Echarts的折叠面积图的参数；

折线图单元，用于根据接收到的基线动态数据生成Echarts的折线图的参数；

绘制单元，用于根据所述折叠面积图的参数和所述折线图的参数进行图形绘制，得到动态基线图。

可选地，所述基线基础数据包括上基准值、下基准值、上容忍度、下容忍度中的一种或多种；

所述折叠面积图单元，用于以如下的一种或多种方式对接收到的基线基础数据进行处理，根据处理后的基线基础数据生成Echarts的折叠面积图：直接以所述下容忍度填充Echarts的下容忍线序列中的数据数组；用所述下基准值减去所述下容忍度，以得到的第一结果填充Echarts的下基线序列的数据数组；用所述上基准值减去所述下基准值，以得到的第二结果填充Echarts的上基线序列的数据数组；用所述上容忍度减去所述上基准值，以得到的第三结果填充Echarts的上容忍线序列的数据数组。

可选地，生成的参数配置均为json格式的数据，所述参数包括如下的一种或多种：

标题组件属性，图例组件属性，直角坐标系中的x轴属性，直角坐标系中的y轴属性，序列名称属性，序列类型属性，线条样式属性，线条颜色属性，区域填充样式属性，区域颜色属性，数据堆叠属性，线两端的标记类型属性，线两端的标记的显示样式属性。

可选地，所述参数还包括：提示框组件属性；

该装置还包括：

数据提示框单元，用于根据所述基线基础数据和/或基线动态数据生成所述提示框组件属性，在所述动态基线图中显示数据提示框。

可选地，所述数据提示框单元，用于调用所述提示框组件中的回调函数formatter对所述基线基础数据进行格式化处理，以使处理后的基线基础数据以预设顺序在所述数据提示框中展示。

由上述可知，本发明的技术方案，利用Echarts的折叠面积图和折线图这两种图例，在对基线基础数据进行处理后生成Echarts的折叠面积图的参数，以及根据基线动态数据生成Echarts的折线图的参数，基于得到的参数，将两种图例进行组合最终绘制出动态基线图。该技术方案巧妙地利用了Echarts中已有的图例，通过对数据进行合理的处理实现了动态基线图的绘制，拓展了Echarts的功能，实现了产品开发人员需要的数据分析图形，对产品的开发有着良好的帮助。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了根据本发明一个实施例的一种基于Echarts实现动态基线图绘制的方法的流程示意图；

图2示出了根据本发明一个实施例绘制的动态基线图；

图3示出了根据本发明一个实施例的一种基于Echarts实现动态基线图绘制的装置的结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

图1示出了根据本发明一个实施例的一种基于Echarts实现动态基线图绘制的方法的流程示意图，如图1所示，该方法包括：

步骤S110，对接收到的基线基础数据进行处理，根据处理后的基线基础数据生成Echarts的折叠面积图的参数。

步骤S120，根据接收到的基线动态数据生成Echarts的折线图的参数。

在IT监控领域，使用者经常根据过去一段时间内的数据进行采样分析，根据分析的结果按照一定的算法，计算出未来一段时间内的做为参考的数据，对这种参考数据，我们又称之为基线。在本发明的实施例中希望实现的动态基线图的示例可以参照图2。如图2所示，带有灰度的部分是用折叠面积图实现的，其参数来自于对基线基础数据的处理，中间黑色的折线是利用折线图实现的，其参数来自于对基线动态数据的处理。

步骤S130，根据折叠面积图的参数和折线图的参数进行图形绘制，得到动态基线图。

可见，图1所示的方法，利用Echarts的折叠面积图和折线图这两种图例，在对基线基础数据进行处理后生成Echarts的折叠面积图的参数，以及根据基线动态数据生成Echarts的折线图的参数，基于得到的参数，将两种图例进行组合最终绘制出动态基线图。该技术方案巧妙地利用了Echarts中已有的图例，通过对数据进行合理的处理实现了动态基线图的绘制，拓展了Echarts的功能，实现了产品开发人员需要的数据分析图形，对产品的开发有着良好的帮助。

在本发明的一个实施例中，基线基础数据包括上基准值、下基准值、上容忍度、下容忍度中的一种或多种；对接收到的基线基础数据进行处理，根据处理后的基线基础数据生成Echarts的折叠面积图的参数包括如下的一种或多种：直接以下容忍度填充Echarts的下容忍线序列中的数据数组；用下基准值减去下容忍度，以得到的第一结果填充Echarts的下基线序列的数据数组；用上基准值减去下基准值，以得到的第二结果填充Echarts的上基线序列的数据数组；用上容忍度减去上基准值，以得到的第三结果填充Echarts的上容忍线序列的数据数组。

以图2为例，其中带有不同灰度的三个灰色区域实际上是由四条线分割成的，即上容忍线、上基线、下基线和下容忍线。图2中y轴为APM(Application PerformanceManagement，应用性能管理)数据中的访问时长，x轴为宏观时间线。图2中选中的点的访问时长为535ms，在该时间点的上容忍度为540ms，上基准值为520ms，下基准值为320ms，下容忍度为300ms。将各时间点上的上容忍度、上基准值、下基准值和下容忍度分别连结成曲线，就得到了上容忍线、上基线、下基线和下容忍线。具体地，上容忍度、上基准值、下基准值和下容忍度是可以通过分析监控数据并预估得到的，具体的实现方法本发明对此不做限制，在本发明的实施例中仅需要获取到这些数据并形成数据分析图形即可。

而在参数的生成过程中，需要考虑到Echarts折叠面积图的特点。例如，下容忍度为300ms，可以直接将其作为Echarts的下容忍线序列中的数据，但是其上的下基准值为320ms，此时却不能直接将其作为Echarts的下基线序列的数据。这是因为Echarts的折叠面积图中数据存在累加关系。举例来说，由于320ms比300ms高20ms，则直接将20作为Echarts的下基线序列的数据即可，这样在显示时，会自动将20加上300得到320并在图中显示，得到了我们想要的展示效果。进行类似的计算后，会得到多个时间点下的上容忍度、上基准值、下基准值和下容忍度，则把它们分别填充到相应序列的数据数组中即可。

在本发明的一个实施例中，上述方法中，生成的参数配置均为json格式的数据，参数包括如下的一种或多种：标题组件属性，图例组件属性，直角坐标系中的x轴属性，直角坐标系中的y轴属性，序列名称属性，序列类型属性，线条样式属性，线条颜色属性，区域填充样式属性，区域颜色属性，数据堆叠属性，线两端的标记类型属性，线两端的标记的显示样式属性。

下面给出了示例：

Title：标题组件，包含主标题与附标题；

Legend：图例组件；

xAxis：直角坐标系grid中的x轴；

yAxis：直角坐标系grid中的y轴；

Series：序列列表,通过name定义名称，通过type定义类型；

LineStyle：线条样式；

Normal：线的颜色；

AreaStyle：区域填充样式；

Normal：区域的颜色；

Stack：数据堆叠；

Symbol：线两端的标记类型；

ShowSymbol：是否显示symbol。

利用这些参数形成的json结构如下所示，其中包括了利用一周和二周的上容忍度、上基准值、下基准值和下容忍度，以及基线值得到的上容忍线序列、上基线序列、下基线序列、下容忍线序列、基线序列中的数据数组：

{

title:{...}，

legend:{...},

xAxis:{...}，

yAxis:{...}，

series:[

{name:下容忍线,type:line,data:[280,300],

lineStyle:{normal:{opacity:0}},areaStyle:{normal:{color:xx}},stack:confidence-band,symbol:none},

{name:下基线,type:'line,data:[20,30],

lineStyle:{normal:{opacity:0}},areaStyle:{normal:{color:xx}},stack:confidence-band,symbol:none},

{name:上基线,type:line,data:[200,190],

lineStyle:{normal:{opacity:0}},areaStyle:{normal:{color:xx}},stack:confidence-band,symbol:none},

{name:上容忍线,type:line,data:[20,25],

lineStyle:{normal:{opacity:0}},areaStyle:{normal:{color:xx}},stack:confidence-band,symbol:none},

{name:基线,type:line,data:[470,535],

itemStyle:{normal:{color:xx}},showSymbol:true}

]

}

其中，由于上容忍线序列、上基线序列、下基线序列、下容忍线序列中的opacity属性为0，因此图2中上容忍线、上基线、下基线、下容忍线均为完全透明，不可见；而基线序列中的opacity属性为1，也就是完全不透明，因此图2中的基线是黑色的。

在本发明的一个实施例中，上述方法中，参数还包括：提示框组件属性；该方法还包括：根据基线基础数据和/或基线动态数据生成提示框组件属性，在动态基线图中显示数据提示框。

例如参数包括Tooltip：提示框组件。利用该组件形成图2中显示二周数据的数据提示框。

我们注意到，在上述json结构中，序列名称的定义顺序是下容忍线、下基线、上基线和上容忍线，与图2中示出的可读性更好的顺序完全相反。为了实现图2中的效果，在本发明的一个实施例中，上述方法中，根据基线基础数据和/或基线动态数据生成提示框组件属性包括：调用提示框组件中的回调函数formatter对基线基础数据进行格式化处理，以使处理后的基线基础数据以预设顺序在数据提示框中展示。

图2中就是将序列名称的定义顺序完全颠倒过来，在实际应用中可以根据需求选择合适的展示顺序。

图3示出了根据本发明一个实施例的一种基于Echarts实现动态基线图绘制的装置的结构示意图，如图3所示，基于Echarts实现动态基线图绘制的装置300包括：

折叠面积图单元310，用于对接收到的基线基础数据进行处理，根据处理后的基线基础数据生成Echarts的折叠面积图的参数。

折线图单元320，用于根据接收到的基线动态数据生成Echarts的折线图的参数。

绘制单元330，用于根据折叠面积图的参数和折线图的参数进行图形绘制，得到动态基线图。

可见，图3所示的装置，通过各单元的相互配合，利用Echarts的折叠面积图和折线图这两种图例，在对基线基础数据进行处理后生成Echarts的折叠面积图的参数，以及根据基线动态数据生成Echarts的折线图的参数，基于得到的参数，将两种图例进行组合最终绘制出动态基线图。该技术方案巧妙地利用了Echarts中已有的图例，通过对数据进行合理的处理实现了动态基线图的绘制，拓展了Echarts的功能，实现了产品开发人员需要的数据分析图形，对产品的开发有着良好的帮助。

在本发明的一个实施例中，上述装置中，基线基础数据包括上基准值、下基准值、上容忍度、下容忍度中的一种或多种；折叠面积图单元，用于以如下的一种或多种方式对接收到的基线基础数据进行处理，根据处理后的基线基础数据生成Echarts的折叠面积图：直接以下容忍度填充Echarts的下容忍线序列中的数据数组；用下基准值减去下容忍度，以得到的第一结果填充Echarts的下基线序列的数据数组；用上基准值减去下基准值，以得到的第二结果填充Echarts的上基线序列的数据数组；用上容忍度减去上基准值，以得到的第三结果填充Echarts的上容忍线序列的数据数组。

在本发明的一个实施例中，上述装置中，生成的参数配置均为json格式的数据，参数包括如下的一种或多种：标题组件属性，图例组件属性，直角坐标系中的x轴属性，直角坐标系中的y轴属性，序列名称属性，序列类型属性，线条样式属性，线条颜色属性，区域填充样式属性，区域颜色属性，数据堆叠属性，线两端的标记类型属性，线两端的标记的显示样式属性。

在本发明的一个实施例中，上述装置中，参数还包括：提示框组件属性；该装置还包括：数据提示框单元(图未示)，用于根据基线基础数据和/或基线动态数据生成提示框组件属性，在动态基线图中显示数据提示框。

在本发明的一个实施例中，上述装置中，数据提示框单元，用于调用提示框组件中的回调函数formatter对基线基础数据进行格式化处理，以使处理后的基线基础数据以预设顺序在数据提示框中展示。

需要说明的是，上述各装置实施例的具体实施方式可以参照前述对应方法实施例，在此不再赘述。

综上所述，本发明的技术方案，利用Echarts的折叠面积图和折线图这两种图例，在对基线基础数据进行处理后生成Echarts的折叠面积图的参数，以及根据基线动态数据生成Echarts的折线图的参数，基于得到的参数，将两种图例进行组合最终绘制出动态基线图。该技术方案巧妙地利用了Echarts中已有的图例，通过对数据进行合理的处理实现了动态基线图的绘制，拓展了Echarts的功能，实现了产品开发人员需要的数据分析图形，对产品的开发有着良好的帮助。

以上所述，仅为本发明的具体实施方式，在本发明的上述教导下，本领域技术人员可以在上述实施例的基础上进行其他的改进或变形。本领域技术人员应该明白，上述的具体描述只是更好的解释本发明的目的，本发明的保护范围应以权利要求的保护范围为准。

Claims (10)

1.一种基于Echarts实现动态基线图绘制的方法，其特征在于，该方法包括：

对接收到的基线基础数据进行处理，根据处理后的基线基础数据生成Echarts的折叠面积图的参数；

根据接收到的基线动态数据生成Echarts的折线图的参数；

根据所述折叠面积图的参数和所述折线图的参数进行图形绘制，得到动态基线图。

2.如权利要求1所述的方法，其特征在于，所述基线基础数据包括上基准值、下基准值、上容忍度、下容忍度中的一种或多种；

所述对接收到的基线基础数据进行处理，根据处理后的基线基础数据生成Echarts的折叠面积图的参数包括如下的一种或多种：

直接以所述下容忍度填充Echarts的下容忍线序列中的数据数组；

用所述下基准值减去所述下容忍度，以得到的第一结果填充Echarts的下基线序列的数据数组；

用所述上基准值减去所述下基准值，以得到的第二结果填充Echarts的上基线序列的数据数组；

用所述上容忍度减去所述上基准值，以得到的第三结果填充Echarts的上容忍线序列的数据数组。

3.如权利要求1所述的方法，其特征在于，生成的参数配置均为json格式的数据，所述参数包括如下的一种或多种：

标题组件属性，图例组件属性，直角坐标系中的x轴属性，直角坐标系中的y轴属性，序列名称属性，序列类型属性，线条样式属性，线条颜色属性，区域填充样式属性，区域颜色属性，数据堆叠属性，线两端的标记类型属性，线两端的标记的显示样式属性。

4.如权利要求3所述的方法，其特征在于，所述参数还包括：提示框组件属性；

该方法还包括：

根据所述基线基础数据和/或基线动态数据生成所述提示框组件属性，在所述动态基线图中显示数据提示框。

5.如权利要求4所述的方法，其特征在于，所述根据所述基线基础数据和/或基线动态数据生成所述提示框组件属性包括：

调用所述提示框组件中的回调函数formatter对所述基线基础数据进行格式化处理，以使处理后的基线基础数据以预设顺序在所述数据提示框中展示。

6.一种基于Echarts实现动态基线图绘制的装置，其特征在于，该装置包括：

折叠面积图单元，用于对接收到的基线基础数据进行处理，根据处理后的基线基础数据生成Echarts的折叠面积图的参数；

折线图单元，用于根据接收到的基线动态数据生成Echarts的折线图的参数；

绘制单元，用于根据所述折叠面积图的参数和所述折线图的参数进行图形绘制，得到动态基线图。

7.如权利要求6所述的装置，其特征在于，所述基线基础数据包括上基准值、下基准值、上容忍度、下容忍度中的一种或多种；

所述折叠面积图单元，用于以如下的一种或多种方式对接收到的基线基础数据进行处理，根据处理后的基线基础数据生成Echarts的折叠面积图：直接以所述下容忍度填充Echarts的下容忍线序列中的数据数组；用所述下基准值减去所述下容忍度，以得到的第一结果填充Echarts的下基线序列的数据数组；用所述上基准值减去所述下基准值，以得到的第二结果填充Echarts的上基线序列的数据数组；用所述上容忍度减去所述上基准值，以得到的第三结果填充Echarts的上容忍线序列的数据数组。

8.如权利要求6所述的装置，其特征在于，生成的参数配置均为json格式的数据，所述参数包括如下的一种或多种：

标题组件属性，图例组件属性，直角坐标系中的x轴属性，直角坐标系中的y轴属性，序列名称属性，序列类型属性，线条样式属性，线条颜色属性，区域填充样式属性，区域颜色属性，数据堆叠属性，线两端的标记类型属性，线两端的标记的显示样式属性。

9.如权利要求8所述的装置，其特征在于，所述参数还包括：提示框组件属性；

该装置还包括：

数据提示框单元，用于根据所述基线基础数据和/或基线动态数据生成所述提示框组件属性，在所述动态基线图中显示数据提示框。

10.如权利要求9所述的装置，其特征在于，

所述数据提示框单元，用于调用所述提示框组件中的回调函数formatter对所述基线基础数据进行格式化处理，以使处理后的基线基础数据以预设顺序在所述数据提示框中展示。