一种数据可视化方法、装置、设备及可读存储介质与流程

1.本技术涉及数据可视化技术领域，更具体地说，涉及一种数据可视化方法、装置、设备及可读存储介质。


背景技术：

2.数据可视化是利用图形化的方式将数据呈现给用户的技术，是一种数据的表达方式，其把复杂的数据信息，以合适的视觉元素进行展示，方便用户理解、记忆、传递，帮助人们让数据“说话”，让用户直观、快速地了解数据。
3.目前，在利用数据可视化工具进行数据可视化时，大多是使用单一的图形化组件库，所提供的图形化方式大多是单一来源，因此，造成数据可视化的效果比较单一，难以满足用户对一些特殊业务的需求。
4.综上所述，如何提高数据可视化的效果，是目前本领域技术人员亟待解决的技术问题。


技术实现要素：

5.有鉴于此，本技术的目的是提供一种数据可视化方法、装置、设备及可读存储介质，用于提高数据可视化的效果。
6.为了实现上述目的，本技术提供如下技术方案：
7.一种数据可视化方法，包括：
8.预先引入不同的图形组件库，并对各所述图形组件库中的图形化组件进行显示；
9.接收用户输入的目标图形化组件的组件属性，利用预先构造的公共方法调用所述目标图形化组件对应的属性设置方法，根据所述组件属性，利用所述属性设置方法对所述目标图形化组件的属性进行设置；
10.根据设置后的属性，利用所述目标图形化组件对获取到的待可视化数据进行可视化展示。
11.优选的，接收用户对目标图形化组件设置的组件属性，包括：
12.接收所述用户对所述目标图形化组件设置的数据属性和显示属性；其中，所述数据属性包括待可视化数据的访问途径。
13.优选的，根据设置后的属性，利用所述目标图形化组件对获取到的待可视化数据进行可视化展示，包括：
14.根据所述目标图形化组件的来源和类型，利用所述公共方法调用与所述目标图形化组件对应的dom生成方法，利用所述dom生成方法生成与所述目标图形化组件对应的dom对象；
15.根据设置后的数据属性获取所述待可视化数据，并根据所述待可视化数据及设置后的显示属性设置所述dom对象的css属性，且对设置所述css属性的dom对象进行渲染，以对所述待可视化数据进行可视化展示。
16.优选的，根据所述组件属性，利用所述属性设置方法对所述目标图形化组件的属性进行设置，包括：
17.利用所述属性设置方法对所述用户输入的组件属性进行格式转换及编码转换。
18.优选的，在利用所述属性设置方法对所述用户输入的组件属性进行格式转换及编码转换之后，还包括：
19.对转换得到的属性进行校验。
20.优选的，还包括：
21.若转换得到的属性通过校验，则对转换得到的属性进行持久化处理。
22.优选的，还包括：
23.若转换得到的属性未通过校验，则进行提示。
24.一种数据可视化装置，包括：
25.显示模块，用于预先引入不同的图形组件库，并对各所述图形组件库中的图形化组件进行显示；
26.设置模块，用于接收用户输入的目标图形化组件的组件属性，利用预先构造的公共方法调用所述目标图形化组件对应的属性设置方法，根据所述组件属性，利用所述属性设置方法对所述目标图形化组件的属性进行设置；
27.可视化展示模块，用于根据设置后的属性，利用所述目标图形化组件对获取到的待可视化数据进行可视化展示。
28.一种数据可视化设备，包括：
29.存储器，用于存储计算机程序；
30.处理器，用于执行所述计算机程序时实现如上述任一项所述的数据可视化方法的步骤。
31.一种可读存储介质，所述可读存储介质中存储有计算机程序，所述计算机程序被处理器执行时实现如上述任一项所述的数据可视化方法的步骤。
32.本技术提供了一种数据可视化方法、装置、设备及可读存储介质，其中，该方法包括：预先引入不同的图形组件库，并对各图形组件库中的图形化组件进行显示；接收用户输入的目标图形化组件的组件属性，利用预先构造的公共方法调用目标图形化组件对应的属性设置方法，根据组件属性，利用属性设置方法对目标图形化组件的属性进行设置；根据设置后的属性，利用目标图形化组件对获取到的待可视化数据进行可视化展示。
33.本技术公开的上述技术方案，预先在系统中引入不同的图形组件库，以在系统中集成多源图形化组件，并对各图形组件库中的图形化组件进行显示，以供用户对来自各种图形组件库的图形化组件进行选择而用于数据可视化，以便于提高数据可视化效果。在用户根据显示输入目标图形化组件的组件属性后，利用预先构建的公共方法调用目标图形化组件对应的属性设置方法，并根据组件属性利用属性设置方法在后台对目标图形化组件进行属性设置，以使得用户在前端所输入的组件属性能够生效，之后，则根据设置后的属性利用目标图形化组件对获取到的待可视化数据进行可视化展示，以实现根据业务需要而能够在系统集成的多个图形组件库中选择不同来源的图形化组件来对数据进行可视化展示，以提高数据可视化的多样性和效果，从而便于用户更加直观、快速地了解数据，而且通过本技术可以屏蔽不同图形组件库在逻辑、数据等方面的差异，以统一、易读的方式对图形化组件
进行属性设置，从而减少图形化处理的难度，提高用户的体验度。
附图说明
34.为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
35.图1为本技术实施例提供的一种数据可视化方法的流程图；
36.图2为本技术实施例提供的另一种数据可视化方法的流程图；
37.图3为本技术实施例提供的一种数据可视化装置的结构示意图；
38.图4为本技术实施例提供的一种数据可视化设备的结构示意图。
具体实施方式
39.目前，现有的数据可视化工具大多是使用单一的图形化组件库，采用固定图形化组件库提供的方式进行图形化处理，导致支持的图形化组件类型的数量受到限制，因此，造成数据可视化的效果比较单一，难以满足用户对一些特殊业务的需求。需要说明的是，图形化组件具体为柱状图、直线图、饼图等用于对数据以图形方式进行展示的组件。
40.为此，本技术提供一种数据可视化方法、装置、设备及可读存储介质，用于提高数据可视化的效果。
41.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
42.参见图1，其示出了本技术实施例提供的一种数据可视化方法的流程图，本技术实施例提供的一种数据可视化方法，可以包括：
43.s11：预先引入不同的图形组件库，并对各图形组件库中的图形化组件进行显示。
44.在数据可视化之前，可以预先在系统中引入不同的图形组件库，例如可以引入vue组件库、自写组件库、echarts组件库等图形组件库。具体地，可以通过在软件中加入不同的图形组件库的包，并在代码中进行图形组件库的引入，让软件支持在javascript对相应的图形组件库所包含的图形化组件的实例化，从而可以对图形化组件的组件属性进行设置。其中，每个图形组件库中均包含多种图形化组件。
45.在引入不同的组件库中之后，可以将所引入的各图形化组件库所包含的图形化组件在用户界面中进行展示，以供用户从中选择用于进行数据可视化的图形化组件。与此同时，还可以在用户界面上提供对应的属性及事件设置页面，以供用户可以在页面上对图形化组件自身的显示、与其他组件的交互逻辑进行设置等，具体地，系统可以根据各图形化组件的api接口，向用户提供可操作的设置页面。
46.通过在系统中引入不同的图形化组件库而使得系统中集成不同来源的图形化组件，增加图形化组件类型的多样性，从而使得在进行数据可视化显示时能够从所多类型的图形化组件中进行选择，即实现不同来源的图形化组件的组合使用，以实现利用不同来源
的图形化组件进行数据可视化展示，从而提高数据可视化的多样性、丰富性和灵活性，进而使得数据更加客观，更具有说服力。另外，后续还可以根据需要而继续在系统中引入新的图形组件库，并对新引入的图形组件库所包含的图形化组件进行显示，以提高系统的可扩展性和多样性。
47.s12：接收用户输入的目标图形化组件的组件属性，利用预先构造的公共方法调用目标图形化组件对应的属性设置方法，根据组件属性，利用属性设置方法对目标图形化组件的属性进行设置。
48.在步骤s11的基础上，系统可以接收用户输入的目标图形化组件的组件属性，其中，这里提及的目标图形化组件即为用户选择用于作为数据可视化的图形化组件，用户所输入的组件属性即为用户在页面上所设置的组件。
49.系统在接收到用户所输入的目标图形化组件的组件属性之后，可以利用预先构建的公共方法(具体为公共javascript方法)调用目标图形化组件对应的属性设置方法，也即针对不同的图形化组件，可以设置不同的set方法来分别设置对应的组件属性，其中，预先构造的公共方法，在javascript中支持对不同的图形化组件调用该图形化组件对应的属性设置方法。另外，针对不同的图形化组件，可以设置不同的get方法来分别获取对应的组件属性。
50.在调用目标图形化组件对应的属性设置方法之后，系统可以根据用户所输入的目标图形化组件的组件属性来在后台对目标图形化的属性进行设置，以得到设置后的属性，从而使用户在前端设置的目标图形化组件的组件属性能够生效。
51.通过上述可知，对于用户而言，其可以以统一、易读的方式(即在用户界面上直接进行操作)来设置不同图形组件库中的图形化组件的组件属性(而后端实现则由预先构造的公共方法来调用图形化组件对应的属性设置方法进行实现)，从而可以提高用户体验度，减少用户对数据进行图形化处理的难度。
52.s13：根据设置后的属性，利用目标图形化组件对获取到的待可视化数据进行可视化展示。
53.在步骤s12的基础上，则可以根据步骤s12所得到的设置后的属性来利用属性设置后的目标图形化组件对获取到的待可视化数据进行可视化展示，以方便用户基于可视化展示结来理解、记忆、传递相关信息。
54.通过在系统中集成不同的图形组件库而使得在数据可视化展示时，能够从所集成的不同的图形组件库所包含的图形化组件中选择合适的图形化组件直观地对数据进行展示，从而提高数据可视化展示效果，使得数据更加客观、更具有说服力，并使得该系统可以适应更多的应用场景，满足用户的个性化需求，提高产品竞争力。
55.本技术公开的上述技术方案，预先在系统中引入不同的图形组件库，以在系统中集成多源图形化组件，并对各图形组件库中的图形化组件进行显示，以供用户对来自各种图形组件库的图形化组件进行选择而用于数据可视化，以便于提高数据可视化效果。在用户根据显示输入目标图形化组件的组件属性后，利用预先构建的公共方法调用目标图形化组件对应的属性设置方法，并根据组件属性利用属性设置方法在后台对目标图形化组件进行属性设置，以使得用户在前端所输入的组件属性能够生效，之后，则根据设置后的属性利用目标图形化组件对获取到的待可视化数据进行可视化展示，以实现根据业务需要而能够
在系统集成的多个图形组件库中选择不同来源的图形化组件来对数据进行可视化展示，以提高数据可视化的多样性和效果，从而便于用户更加直观、快速地了解数据，而且通过本技术可以屏蔽不同图形组件库在逻辑、数据等方面的差异，以统一、易读的方式对图形化组件进行属性设置，从而减少图形化处理的难度，提高用户的体验度。
56.参见图2，其示出了本技术实施例提供的另一种数据可视化方法的流程图。本技术实施例提供的一种数据可视化方法，接收用户对目标图形化组件设置的组件属性，可以包括：
57.接收用户对目标图形化组件设置的数据属性和显示属性；其中，数据属性包括待可视化数据的访问途径。
58.在本技术中，用户对目标图形化组件所设置的组件属性具体可以包含数据属性和显示属性。其中，数据属性包括待可视化数据的访问途径，以便于无论待可视化数据的数据内容如何变化只要设置好目标图形化组件的组件属性，系统都能根据该数据属性来获取待可视化数据，并利用目标图形化组件对其进行可视化展示，而无需待可视化数据变化一次就需要重新进行目标图形化组件属性的设置，从而提高数据可视化展示的便利性。显示属性包括目标图形化组件的颜色、形状等于显示相关的具体属性。
59.当然，用户所设置的组件属性中也可以仅包含显示属性，此时，则需要用户输入待可视化数据，以使得目标图形化组件可以根据显示属性来对获取到的待可视化数据进行展示。
60.本技术实施例提供的一种数据可视化方法，根据设置后的属性，利用目标图形化组件对获取到的待可视化数据进行可视化展示，可以包括：
61.根据目标图形化组件的来源和类型，利用公共方法调用与目标图形化组件对应的dom生成方法，利用dom生成方法生成与目标图形化组件对应的dom对象；
62.根据设置后的数据属性获取待可视化数据，并根据待可视化数据及设置后的显示属性设置dom对象的css属性，且对设置css属性的dom对象进行渲染，以对待可视化数据进行可视化展示。
63.在本技术中，在根据设置后的属性，利用目标图形化组件对获取到的待可视化数据进行可视化展示时，首先，可以根据目标图形化组件的来源和类型，利用预先构造的公共方法调用与目标图形化组件对应的dom(document object model，文档对象模型)生成方法，并可以利用所调用的dom生成方法生成与目标图形化组件对应的dom对象。然后，可以根据设置后的数据属性获取待可视化数据，并根据待可视化数据及设置后的显示属性设置dom对象的css(cascading style sheets，层叠样式表)属性，具体即为将待可视化数据及设置后的显示属性来与css属性进行匹配。之后，对设置所述css属性的dom对象进行渲染，以对待可视化数据进行展示。其中，在进行可视化展示时具体可以在浏览器页面中进行可视化展示。
64.通过上述实现通过生成对应的dom对象来并操作dom对象的css属性来进行不同的图形化处理，从而实现不同形式的呈现，以提高数据可视化的展示效果。
65.本技术实施例提供的一种数据可视化方法，根据组件属性，利用属性设置方法对目标图形化组件的属性进行设置，可以包括：
66.利用属性设置方法对用户输入的组件属性进行格式转换及编码转换。
67.在本技术中，在根据组件属性，利用属性设置方法对目标图形化组件的属性进行设置时，具体可以利用目标图形化组件对应的属性设置来对用户输入的组件属性进行格式转换及编码转换，以转换为后台能够识别和利用的形式，也即使得用户在前端设置的目标图形化组件的组件属性能够生效，从而便于更好地进行数据可视化展示。
68.本技术实施例提供的一种数据可视化方法，在利用属性设置方法对用户输入的组件属性进行格式转换及编码转换之后，还可以包括：
69.对转换得到的属性进行校验。
70.在本技术中，在利用属性设置方法对用户输入的组件属性进行格式转换及编码转换之后，可以对转换得到的属性进行校验，以校验转换得到的属性的形式等是否正确，从而保证数据可视化展示的可靠性。
71.本技术实施例提供的一种数据可视化方法，还可以包括：
72.若转换得到的属性通过校验，则对转换得到的属性进行持久化处理。
73.在本技术中，在对转换得到的属性进行校验时，若转换得到的属性通过校验，则对转换得到的属性进行持久化处理，以便于后续可以重复使用转换得到的属性，而不受时间等因素的影响，从而提高数据可视化展示的便利性。
74.本技术实施例提供的一种数据可视化方法，还可以包括：
75.若转换得到的属性未通过校验，则进行提示。
76.在本技术中，在对转换得到的属性进行校验时，若转换得到的属性未通过校验，则可以进行提示(具体如报警、语音播放等)，以便于相关人员可以及时获知转换得到的属性未通过校验，从而便于相关人员及时采取应对措施，以提高数据可视化展示的性能。
77.需要说明的是，当其他平台或者系统需要使用本技术的功能时，则可以在html(hyper text markup language，超文本标记语言)文件使用import方式引入本发明方法公用类中的资源(即本技术的技术方案)，用于生成图形化组件。其中，其他平台或者系统展示图形化组件需要进行以下步骤的操作：
78.1)引入本技术方法的公用类(即本技术的技术方案)；
79.2)从数据库获取图形化组件的显示属性及交互属性相关参数；
80.3)利用本技术方法的公用类调用组件类型所对应的方法，以利用该方法解析3)中的参数；
81.4)在javascript中接收解析得到的对应参数，并根据图形化组件的类型，调用对应的方法生成图形化组件。
82.当其他平台或者系统保存图形化组件参数时，则需要执行以下步骤：
83.1)从图形化组件的公用属性展示面板获取配置的组件参数
84.2)根据图形化组件的类型对上述步骤获取到的参数的格式进行校验；
85.3)校验通过后，调用公用方法将参数值转换为统一规范的格式；
86.4)将可视化组件类型、参数等信息保存到数据库，做持久化处理。
87.本技术实施例还提供了一种数据可视化装置，参见图3，其示出了本技术实施例提供的一种数据可视化装置的结构示意图，可以包括：
88.显示模块31，用于预先引入不同的图形组件库，并对各图形组件库中的图形化组件进行显示；
89.设置模块32，用于接收用户输入的目标图形化组件的组件属性，利用预先构造的公共方法调用目标图形化组件对应的属性设置方法，根据组件属性，利用属性设置方法对目标图形化组件的属性进行设置；
90.可视化展示模块33，用于根据设置后的属性，利用目标图形化组件对获取到的待可视化数据进行可视化展示。
91.本技术实施例提供的一种数据可视化装置，设置模块32可以包括：
92.接收单元，用于接收用户对目标图形化组件设置的数据属性和显示属性；其中，数据属性包括待可视化数据的访问途径。
93.本技术实施例提供的一种数据可视化装置，可视化展示模块33可以包括：
94.生成单元，用于根据目标图形化组件的来源和类型，利用公共方法调用与目标图形化组件对应的dom生成方法，利用dom生成方法生成与目标图形化组件对应的dom对象；
95.渲染单元，用于根据设置后的数据属性获取待可视化数据，并根据待可视化数据及设置后的显示属性设置dom对象的css属性，且对设置css属性的dom对象进行渲染，以对待可视化数据进行可视化展示。
96.本技术实施例提供的一种数据可视化装置，设置模块32可以包括：
97.转换单元，用于利用属性设置方法对用户输入的组件属性进行格式转换及编码转换。
98.本技术实施例提供的一种数据可视化装置，设置模块32还可以包括：
99.检验单元，用于在利用属性设置方法对用户输入的组件属性进行格式转换及编码转换之后，对转换得到的属性进行校验。
100.本技术实施例提供的一种数据可视化装置，设置模块32还可以包括：
101.处理单元，用于若转换得到的属性通过校验，则对转换得到的属性进行持久化处理。
102.本技术实施例提供的一种数据可视化装置，设置模块32还可以包括：
103.提示单元，用于若转换得到的属性未通过校验，则进行提示。
104.本技术实施例还提供了一种数据可视化设备，参见图4，其示出了本技术实施例提供的一种数据可视化设备的结构示意图，可以包括：
105.存储器41，用于存储计算机程序；
106.处理器42，用于执行存储器41存储的计算机程序时可实现如下步骤：
107.预先引入不同的图形组件库，并对各图形组件库中的图形化组件进行显示；接收用户输入的目标图形化组件的组件属性，利用预先构造的公共方法调用目标图形化组件对应的属性设置方法，根据组件属性，利用属性设置方法对目标图形化组件的属性进行设置；根据设置后的属性，利用目标图形化组件对获取到的待可视化数据进行可视化展示。
108.本技术实施例还提供了一种可读存储介质，其特征在于，可读存储介质中存储有计算机程序，计算机程序被处理器执行时可实现如下步骤：
109.预先引入不同的图形组件库，并对各图形组件库中的图形化组件进行显示；接收用户输入的目标图形化组件的组件属性，利用预先构造的公共方法调用目标图形化组件对应的属性设置方法，根据组件属性，利用属性设置方法对目标图形化组件的属性进行设置；根据设置后的属性，利用目标图形化组件对获取到的待可视化数据进行可视化展示。
110.该计算机可读存储介质可以包括：u盘、移动硬盘、只读存储器(read-only memory，rom)、随机存取存储器(randomaccess memory，ram)、磁碟或者光盘等各种可以存储程序代码的介质。
111.本技术提供的一种数据可视化装置、设备及可读存储介质中相关部分的说明可以参见本技术实施例提供的一种数据可视化方法中对应部分的详细说明，在此不再赘述。
112.需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。另外，本技术实施例提供的上述技术方案中与现有技术中对应技术方案实现原理一致的部分并未详细说明，以免过多赘述。
113.对所公开的实施例的上述说明，使本领域技术人员能够实现或使用本技术。对这些实施例的多种修改对本领域技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本技术的精神或范围的情况下，在其它实施例中实现。因此，本技术将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。