一种多分支漏斗数据展示的方法及系统技术方案

本发明专利技术公开了一种多分支漏斗数据展示的方法及系统，该方法包括如下步骤：S1：父组件获取服务器数据，并传递至子组件；S2：子组件将传递过来的数据作为漏斗组件的数据源，并完成漏斗图的绘制；S3：子组件通过颜色色系数组对绘制后的漏斗图进行渲染；S4：子组件将绘制以及渲染完成的漏斗图回传至父组件进行数据展示。本发明专利技术能高效的对数据进行处理和渲染，实现了在同一个漏斗图表中展示多步骤多分支达到目标行为的全貌展示，并可以根据模型数据的变化进行灵活展示，为相关分析人员进行数据洞察提供了高效支持。供了高效支持。供了高效支持。

【技术实现步骤摘要】
一种多分支漏斗数据展示的方法及系统


[0001]本专利技术涉及图表绘制
，尤其涉及一种多分支漏斗数据展示的方法及系统。

技术介绍

[0002]数据分析漏斗图表能够直观的体现业务流程中存在的问题，能够为数据分析、运营等相关人员分析数据提供高效的支持。而目前图表的前端绘制方法大多是基于Echarts框架进行属性配置以及组合实现的，在一个漏斗中只能显示单一的操作步骤及其转化率，无法直观的展示多流程，随着目前数据分析需求的增多以及细化，已无法满足数据展现的复杂需求。如用户行为会从多条业务路径转化到目标行为，急需一种可以同时呈现全路径数据全貌的漏斗转化图表。

技术实现思路

[0003]本专利技术的目的是提供一种多分支漏斗数据展示的方法及系统，以解决如何实现在同一个漏斗图表中展示多步骤多分支达到目标行为的全貌展示，并根据模型数据的变化进行灵活展示的技术问题。
[0004]本专利技术是采用以下技术方案实现的：一种多分支漏斗数据展示的方法，包括如下步骤：S1：父组件获取服务器数据，并传递至子组件；S2：子组件将传递过来的数据作为漏斗组件的数据源，并完成漏斗图的绘制；S3：子组件通过颜色色系数组对绘制后的漏斗图进行渲染；S4：子组件将绘制以及渲染完成的漏斗图回传至父组件进行数据展示。
[0005]进一步的，步骤S1具体为：父组件通过网络请求获取json返回数据，并通过父子组件通信的方法传递至子组件。
[0006]进一步的，步骤S2具体为：子组件将传递过来的json字符串作为漏斗组件的数据源，并完成图表的装配、初始化、监听以及重绘，生成目标漏斗图。
[0007]进一步的，采用watch方法监听父组件中数据源的变化并重绘图表。
[0008]进一步的，步骤S2包括如下子步骤：获取用户行为序列的总数据以及各个行为内子步骤数据；根据总数据和目标转化率，确定第一初始坐标，绘制第一初始图形；根据第二行为转化率确定第二图形宽度，结合第一图形转化率确定第二图形的目标偏移量；根据当前行为下子步骤数量以及百分比，绘制当前内图形；根据第一图形以及第二图形边界，绘制左右过渡三角形；基于已绘制的图形，生成目标漏斗图。
[0009]进一步的，所述目标偏移量的计算规则为：
P=（A（percent）
‑
B（percent））/2其中，P为目标偏移量，A（percent）为第一图形转化率，B（percent）第二行为转化率。
[0010]进一步的，利用CSS样式中的clip
‑
path: polygon()方法进行过渡三角形的绘制。
[0011]进一步的，所述总数据包括漏斗标题、步骤数组、子步骤数组、子步骤标题、子步骤占比和步骤占比。
[0012]进一步的，每一个步骤数组下所有子步骤数组的子步骤占比相加等于100，或者通过每一个子步骤数组的数量和确定总数量，再通过每一个子步骤数组的数量占比确定子步骤占比。
[0013]一种多分支漏斗数据展示的系统，包括父组件和子组件，所述父组件获取服务器数据，并传递至子组件，所述子组件用以将传递过来的数据作为漏斗组件的数据源，完成漏斗图的绘制，并通过颜色色系数组对绘制后的漏斗图进行渲染，子组件还用以将绘制以及渲染完成的漏斗图回传至父组件进行数据展示。
[0014]本专利技术的有益效果在于：本专利技术能高效的对数据进行处理和渲染，实现了在同一个漏斗图表中展示多步骤多分支达到目标行为的全貌展示，并可以根据模型数据的变化进行灵活展示，为相关分析人员进行数据洞察提供了高效支持。
附图说明
[0015]为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图示出的结构获得其他的附图。
[0016]图1为本专利技术流程图；图2为漏斗图绘制流程图；图3为坐标及偏移量原理图；图4为多分支漏斗三角形绘制图；图5为多分支漏斗原型图；图6为漏斗模型数据格式图。
具体实施方式
[0017]为使本专利技术实施例的目的、技术方案和优点更加清楚，下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本专利技术一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本专利技术实施例的组件可以以各种不同的配置来布置和设计。
[0018]应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。
[0019]下面结合附图，对本专利技术的一些实施方式作详细说明。在不冲突的情况下，下述的实施例及实施例中的特征可以相互组合。
[0020]实施例1
参见图1，一种多分支漏斗数据展示的方法，包括如下步骤：S1：父组件获取服务器数据，并传递至子组件；S2：子组件将传递过来的数据作为漏斗组件的数据源，并完成漏斗图的绘制；S3：子组件通过颜色色系数组对绘制后的漏斗图进行渲染；具体为：子组件通过组件内规定的默认颜色色系数组，对绘制的漏斗图进行上色，根据数据源的数据进行总步骤名、步骤转化率、子步骤名、子步骤转化率进行标注显示；S4：子组件将绘制以及渲染完成的漏斗图回传至父组件进行数据展示。
[0021]在本实施例当中，步骤S1具体为：在父组件中通过网络请求获取到规定好格式的json返回数据（参见图6），通过父子组件通信的方法（父组件通过props向下传递数据给子组件）传递给子组件做进一步处理。
[0022]在本实施例当中，步骤S2具体为：子组件通过传递过来的标准格式的json字符串作为漏斗组件的数据源、并完成图表的装配、图表的初始化、图表监听以及图表的重绘，用watch方法监听父组件中数据源的变化并重绘图表。
[0023]进一步的，参见图2，子组件内多分支漏斗的绘制流程具体为：S201：获取用户行为序列的总数据（数据标准格式为图6），根据图6中“步骤数组”的总数量确定Y轴漏斗图形总数（关于图形绘制的X轴、Y轴确定，参见图3），根据步骤占比计算每一个步骤占总容器的宽度。
[0024]S202：遍历步骤数组，开始绘制第一个步骤图形，根据第一个步骤占比，从坐标轴X向右绘制，宽度占图形容器比值为步骤占比，因为示例数据第一步骤无多个子步骤，所以完成第一个步骤图的绘制，从预设颜色中依次选取填充，标注步骤标题、步骤占比，完成第一个步骤，接下来根据A步骤的左起始点以及步骤B的percent字段占比计算步骤二的左起始点偏移量P以达到居中的效果（见图3），计算规则如下：P=（A（percent）
‑
B（percent））/2。
[0025]S204：由步骤A的左边距为基准，向右偏移P%以此作为步骤B的起始x坐标，由步骤A的y轴最大值作为步骤B的起始y坐标，B
‑
percen本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种多分支漏斗数据展示的方法，其特征在于，包括如下步骤：S1：父组件获取服务器数据，并传递至子组件；S2：子组件将传递过来的数据作为漏斗组件的数据源，并完成漏斗图的绘制；S3：子组件通过颜色色系数组对绘制后的漏斗图进行渲染；S4：子组件将绘制以及渲染完成的漏斗图回传至父组件进行数据展示。2.如权利要求1所述的一种多分支漏斗数据展示的方法，其特征在于，步骤S1具体为：父组件通过网络请求获取json返回数据，并通过父子组件通信的方法传递至子组件。3.如权利要求2所述的一种多分支漏斗数据展示的方法，其特征在于，步骤S2具体为：子组件将传递过来的json字符串作为漏斗组件的数据源，并完成图表的装配、初始化、监听以及重绘，生成目标漏斗图。4.如权利要求3所述的一种多分支漏斗数据展示的方法，其特征在于，采用watch方法监听父组件中数据源的变化并重绘图表。5.如权利要求3所述的一种多分支漏斗数据展示的方法，其特征在于，步骤S2包括如下子步骤：获取用户行为序列的总数据以及各个行为内子步骤数据；根据总数据和目标转化率，确定第一初始坐标，绘制第一初始图形；根据第二行为转化率确定第二图形宽度，结合第一图形转化率确定第二图形的目标偏移量；根据当前行为下子步骤数量以及百分比，绘制当前内图形；根据第一图形以及第二图形边界，绘制左右过渡三角形；基于已绘制的图形，生成目标漏斗图。...

【专利技术属性】
技术研发人员：张翼飞，张洪梅，
申请(专利权)人：启明信息技术股份有限公司，
类型：发明
国别省市：