折柱图生成方法、装置、计算机设备和存储介质与流程

1.本技术涉及计算机技术领域，特别是涉及一种折柱图生成方法、装置、计算机设备、存储介质和计算机程序产品。


背景技术：

2.在运营管理系统中，前端需要对平台使用的运营数据按照时间或者不同子应用的维度进行可视化图表展示，其中常常会使用折线图和柱状图的混合图展示每个月的数据量情况和数据增长率等变化。
3.目前的折柱图在开发过程中存在以下问题：不同的开发人员重复开发折柱图表，每个人都需要学习echarts配置文档，不仅会造成大量的冗余代码，而且会降低开发效率。


技术实现要素：

4.基于此，有必要针对上述技术问题，提供一种可减少折柱图组件的学习成本，减少工程中的冗余代码，提高前端开发人员的开发效率的折柱图生成方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。
5.第一方面，本技术提供了一种折柱图生成方法。所述方法包括：
6.接收待展示数据和所述待展示数据所需的折柱图样式参数；
7.通过预先配置的折柱图组件，对所述待展示数据进行标准化处理，得到标准化数据；
8.基于所述折柱图样式参数和所述标准化数据，渲染得到折柱图；所述折柱图为按照所述折柱图样式参数绘制的与所述待展示数据对应的折柱图。
9.在其中一个实施例中，所述待展示数据携带有数据源地址；所述对所述待展示数据进行标准化处理，得到标准化数据，包括：
10.获取所述数据源地址对应的字段映射信息；
11.根据所述字段映射信息，对所述待展示数据进行标准化处理，得到x轴对应的字符串数组和包含多个y轴数据的对象数组，均作为标准化数据。
12.在其中一个实施例中，所述基于所述折柱图样式参数和所述标准化数据，渲染得到折柱图，包括：
13.对所述折柱图样式参数进行解析，得到不同y轴数据的对象数组对应的样式参数；
14.将每个y轴数据的对象数组对应的样式参数和所述每个y轴数据的对象数组组成对象，将得到的各个对象赋值给所述折柱图组件中定义的响应式数据的预设属性；
15.基于赋值后的响应式数据和所述x轴对应的字符串数组，渲染得到所述折柱图。
16.在其中一个实施例中，所述基于所述折柱图样式参数和所述标准化数据，渲染得到折柱图之后，还包括：
17.在所述折柱图组件上渲染出导出控件，并展示所述导出控件；
18.响应于针对所述导出控件的触发操作，展示多个导出类型选择入口；
19.响应于针对所述多个导出类型选择入口中目标导出类型选择入口的选中操作，导出所述目标导出类型选择入口对应的文件。
20.在其中一个实施例中，所述响应于针对所述多个导出类型选择入口中目标导出类型选择入口的选中操作，导出所述目标导出类型选择入口对应的文件，包括：
21.当所述目标导出类型选择入口为图片时，将所述折柱图以图片形式导出；
22.当所述目标导出类型选择入口为当前表格时，将所述折柱图的数据以表格形式导出；
23.当所述目标导出类型选择入口为完整表格，且具有数据源地址时，从所述数据源地址导出完整的数据表格。
24.在其中一个实施例中，所述折柱图组件中还配置有插槽；所述方法还包括：
25.接收通过所述插槽传入的非图表内容；
26.所述基于所述折柱图样式参数和所述标准化数据，渲染得到折柱图，包括：
27.基于所述折柱图样式参数、所述标准化数据和所述非图表内容，渲染得到所述折柱图。
28.在其中一个实施例中，所述折柱图组件通过下述方式配置得到：
29.创建vue组件；所述vue组件包括组件模板和组件脚本；
30.在所述vue组件的组件模板中添加用于图表渲染的元素和插槽，以及在所述vue组件的组件脚本中引入echarts图形库、echarts折线图和echarts柱状图，得到初始vue组件；
31.在所述初始vue组件中，定义用于处理待展示数据的响应式变量和用于解析折柱图样式参数的响应式数据，得到目标组件，将所述目标组件作为折柱图组件。
32.在其中一个实施例中，所述在所述vue组件的组件模板中添加用于图表渲染的元素和插槽，以及在所述vue组件的组件脚本中引入echarts图形库、echarts折线图和echarts柱状图，得到初始vue组件之后，还包括：
33.在所述vue组件的生命周期函数mounted中，通过echarts将所述用于图表渲染的元素初始化为echarts实例对象，以及定义用于解析props特性传入的配置对象的函数。
34.在其中一个实施例中，在基于所述折柱图样式参数和所述标准化数据，渲染得到折柱图之后，还包括：
35.在所述vue组件的生命周期函数destroyed中销毁所述echarts实例对象。
36.第二方面，本技术还提供了一种折柱图生成装置。所述装置包括：
37.接收模块，用于接收待展示数据和所述待展示数据所需的折柱图样式参数；
38.标准化模块，用于通过预先配置的折柱图组件，对所述待展示数据进行标准化处理，得到标准化数据；
39.渲染模块，用于基于所述折柱图样式参数和所述标准化数据，渲染得到折柱图；所述折柱图为按照所述折柱图样式参数绘制的与所述待展示数据对应的折柱图。
40.第三方面，本技术还提供了一种计算机设备。所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：
41.接收待展示数据和所述待展示数据所需的折柱图样式参数；
42.通过预先配置的折柱图组件，对所述待展示数据进行标准化处理，得到标准化数据；
43.基于所述折柱图样式参数和所述标准化数据，渲染得到折柱图；所述折柱图为按照所述折柱图样式参数绘制的与所述待展示数据对应的折柱图。
44.第四方面，本技术还提供了一种计算机可读存储介质。所述计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：
45.接收待展示数据和所述待展示数据所需的折柱图样式参数；
46.通过预先配置的折柱图组件，对所述待展示数据进行标准化处理，得到标准化数据；
47.基于所述折柱图样式参数和所述标准化数据，渲染得到折柱图；所述折柱图为按照所述折柱图样式参数绘制的与所述待展示数据对应的折柱图。
48.第五方面，本技术还提供了一种计算机程序产品。所述计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现以下步骤：
49.接收待展示数据和所述待展示数据所需的折柱图样式参数；
50.通过预先配置的折柱图组件，对所述待展示数据进行标准化处理，得到标准化数据；
51.基于所述折柱图样式参数和所述标准化数据，渲染得到折柱图；所述折柱图为按照所述折柱图样式参数绘制的与所述待展示数据对应的折柱图。
52.上述折柱图生成方法、装置、计算机设备、存储介质和计算机程序产品，在接收待展示数据和待展示数据所需的折柱图样式参数后，通过预先配置的折柱图组件，对待展示数据进行标准化处理，得到标准化数据，基于折柱图样式参数和标准化数据，渲染得到折柱图。该方法通过预先配置折柱图组件，开发人员可利用折柱图组件进行不同数据的标准化处理和渲染来得到折柱图，从而可减少折柱图组件的学习成本，减少工程中的冗余代码，使得开发人员可聚焦编写业务逻辑，而无需关注折柱图功能实现，从而可提高前端开发人员的开发效率。
附图说明
53.图1为一个实施例中构成折柱图组件的各个模块之间的关系示意图；
54.图2为一个实施例中折柱图生成方法的流程示意图；
55.图3为一个实施例中折柱图渲染步骤的流程示意图；
56.图4为一个实施例中折柱图组件配置方法的流程示意图；
57.图5为一个实施例中折柱图生成装置的结构框图；
58.图6为一个实施例中计算机设备的内部结构图。
具体实施方式
59.为了使本技术的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本技术进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本技术，并不用于限定本技术。
60.为便于本领域技术人员更好地理解以下实施例，先对本技术提供的折柱图生成方法所用到的折柱图组件进行以下说明。本技术提供的折柱图组件为基于echarts和vue的可配置化折柱图组件，主要包括组件模块，props参数模块，抽象组件模块和业务折柱图模块
四个模块，参考图1，为各个模块之间的关系示意图，组件模块、props参数模块作为抽象组件模块的输入，最终生成满足业务需求的折柱图表模块。下面对各个模块进行说明：
61.组件模块，用于接入echarts图表组件库，同时提供slot插槽，支持自定义拓展非图表的内容。
62.props参数模块，使用props参数，是为了把实际的业务数据、定制样式和自定义功能传给图表组件，最终生成适合业务需要的业务模块。如传入图表的ui参数、对接的数据url、导出功能的相关配置等。
63.抽象逻辑模块，即解析props参数生成业务组件的核心逻辑模块，生成图表所需的数据数组和图表渲染最终需要的配置对象，并且实现数据导出功能。
64.业务折柱图模块，通过参数配置而不是代码编写的方式生成最终组件。
65.现有技术中往往是把echarts整个插件作为组件导出或是导出其他单个图表组件，这种方法只针对图表展示，功能单一，并且没有聚焦的折柱图组件，而本技术基于vue和echarts，通过props参数生成带插槽的折柱图组件，聚焦在折柱图本身，使用时不需要额外学习echarts的其他图表配置项，且支持拓展导出功能和自定义插槽，可在组件中插入其他需要展示的内容，如插入筛选框、说明文段等非图表内容，具有更高的灵活性和实用性。
66.在一个实施例中，如图2所示，提供了一种折柱图生成方法，本实施例以该方法应用于终端进行举例说明，可以理解的是，该方法也可以应用于服务器，还可以应用于包括终端和服务器的系统，并通过终端和服务器的交互实现。其中，终端可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑、物联网设备和便携式可穿戴设备，物联网设备可为智能音箱、智能电视、智能空调、智能车载设备等。便携式可穿戴设备可为智能手表、智能手环、头戴设备等。服务器可以用独立的服务器或者是多个服务器组成的服务器集群来实现。本实施例中，该方法包括以下步骤：
67.步骤s210，接收待展示数据和待展示数据所需的折柱图样式参数。
68.其中，折柱图样式参数表示折柱图的图表样式，可包括颜色、线型、图例和图表类型等等。
69.具体实现中，用户可通过pros特性将待处理数据和待展示数据所需的折柱图样式参数，作为待展示对象传入终端中，以进行后续的渲染处理。
70.步骤s220，通过预先配置的折柱图组件，对待展示数据进行标准化处理，得到标准化数据。
71.其中，折柱图组件基于vue组件对echarts图表库进行封装得到。
72.可以理解的是，由于不同数据的数据形式不同，因此，在对待展示数据进行渲染前，需先对待展示数据进行标准化处理，以将待展示数据转换为图表所需的标准化格式。
73.具体实现中，在配置折柱图组件时，将定义响应式变量chartdata，用于处理props传入的待展示数据，更具体地，不同的数据源对应的标准化方式不同，因此，在对待展示数据进行标准化处理前，还需要先确定待展示数据对应的数据源，获取该数据源对应的标准化方式，采用该数据源对应的标准化方式对待展示数据进行标准化处理，得到标准化数据。
74.步骤s230，基于折柱图样式参数和标准化数据，渲染得到折柱图；折柱图为按照折柱图样式参数绘制的与待展示数据对应的折柱图。
75.具体实现中，在配置折柱图组件时，还将定义响应式数据chartseries，用于解析
props传入的折柱图样式参数。更具体地，在得到标准化数据后，折柱图组件可按照该折柱图样式参数中的具体参数值，对标准化数据进行渲染处理，得到与待展示数据对应的折柱图。
76.上述折柱图生成方法中，在接收待展示数据和待展示数据所需的折柱图样式参数后，通过预先配置的折柱图组件，对待展示数据进行标准化处理，得到标准化数据，基于折柱图样式参数和标准化数据，渲染得到折柱图。该方法通过预先配置折柱图组件，开发人员可利用折柱图组件进行不同数据的标准化处理和渲染来得到折柱图，从而可减少折柱图组件的学习成本，减少工程中的冗余代码，使得开发人员可聚焦编写业务逻辑，而无需关注折柱图功能实现，从而可提高前端开发人员的开发效率。
77.在一示例性实施例中，待展示数据携带有数据源地址；上述步骤s220中对待展示数据进行标准化处理，得到标准化数据，包括：获取数据源地址对应的字段映射信息；根据字段映射信息，对待展示数据进行标准化处理，得到x轴对应的字符串数组和包含多个y轴数据的对象数组，均作为标准化数据。
78.具体实现中，待展示数据携带有数据源地址，因此，可根据该数据源地址向后端发起获取请求，获取该数据源地址对应的字段映射信息，作为对待展示数据进行标准化的依据。进一步根据该字段映射信息，对待展示数据进行标准化处理，得到x轴对应的字符串数组和包含多个y轴数据的对象数组，将得到的x轴对应的字符串数组和包含多个y轴数据的对象数组，均作为标准化数据。
79.更具体地，字段映射信息包括key-value键值对数组和映射关系，根据映射关系区分x轴、y轴和类型type字段，遍历数组，提取x轴字段并去重组成新的x轴数组，根据不同的类型字段，提取y轴为多个y轴数组，由此得到x轴对应的字符串数组和包含多个y轴数据的对象数组。
80.本实施例中，通过待展示数据携带的数据源地址对应的字段映射信息，对待展示数据进行标准化处理，能够保证标准化结果的准确性。
81.在一示例性实施例中，如图3所示，上述步骤s230中基于折柱图样式参数和标准化数据，渲染得到折柱图，包括：
82.步骤s231，对折柱图样式参数进行解析，得到不同y轴数据的对象数组对应的样式参数；
83.步骤s232，将每个y轴数据的对象数组对应的样式参数和每个y轴数据的对象数组组成对象，将得到的各个对象赋值给折柱图组件中定义的响应式数据的预设属性；
84.步骤s233，基于赋值后的响应式数据和x轴对应的字符串数组，渲染得到折柱图。
85.其中，响应式数据为chartseries，预设属性可以为响应式数据chartseries的serises属性。
86.具体实现中，可通过折柱图组件中定义的响应式数据chartseries，对折柱图样式参数进行解析，把颜色主题color，图例tooltip，图例legend等参数值赋值给chartseries。读取不同y轴对应的图表类型type(其中，图表类型包括折线和柱状)，分别和标准化处理得到的不同的y轴数据数组组成对象，将多个对象塞进一个空数组中，赋值给chartseries的serises属性，区分不同字段数据为折线图或柱状，最后调用echarts的setoption函数，渲染得到最终的折柱图效果。
87.本实施例中，通过对折柱图样式参数进行解析，得到不同y轴数据的对象数组对应的样式参数，进一步将每个y轴数据的对象数组对应的样式参数和每个y轴数据的对象数组组成对象，基于赋值后的响应式数据和x轴对应的字符串数组，渲染得到折柱图，该方法区分不同y轴数据和各y轴数据的样式参数进行折柱图渲染，使得得到的折柱图可以准确反映待展示数据的变化规律。
88.在一示例性实施例中，上述步骤s230中基于折柱图样式参数和标准化数据，渲染得到折柱图之后，还包括：在折柱图组件上渲染出导出控件，并展示导出控件；响应于针对导出控件的触发操作，展示多个导出类型选择入口；响应于针对多个导出类型选择入口中目标导出类型选择入口的选中操作，导出目标导出类型选择入口对应的文件。
89.具体实现中，折柱图组件中还定义有导出函数，用于提供表格导出功能。当基于折柱图样式参数和标准化数据，成功渲染出折柱图后，可在折柱图组件上渲染出导出控件，并展示导出控件。其中，当未成功渲染出折柱图时，则不进行导出控件的渲染和展示。当接收到用户针对导出控件的触发操作时，触发导出函数，并展示多个导出类型选择入口。其中，导出类型选择入口可包括图片、当前表格和完整表格。接收到针对不同的导出类型选择入口的触发操作，将导出不同的内容。
90.进一步地，在一示例性实施例中，响应于针对多个导出类型选择入口中目标导出类型选择入口的选中操作，导出目标导出类型选择入口对应的文件的步骤，具体包括：当目标导出类型选择入口为图片时，将折柱图以图片形式导出；当目标导出类型选择入口为当前表格时，将折柱图的数据以表格形式导出；当目标导出类型选择入口为完整表格，且具有数据源地址时，从数据源地址导出完整的数据表格。
91.具体实现中，当用户选择的目标导出类型选择入口为图片
‘
image’时，调用echarts自带的导出函数，导出当前图表为图片并保存该图片；当用户选择的目标导出类型选择入口为当前表格
‘
current’时，创建原始数据类文件对象blob，并采用url.createobjecturl()与url.revokeobjecturl()方法，导出当前图表的数据为excel表格；当用户选择的目标导出类型选择入口为完整表格
‘
online’，且url(uniform resource locator，统一资源定位器)参数具有数据源地址时，根据url参数的数据源地址向后端发起获取请求，下载完整的数据表格。
92.上述实施例中，对折柱图组件进行了功能拓展，在折柱图组件中提供了excel表格和图片等的导出功能，可以增强折柱图组件的实用性和灵活性，克服只进行图表展示的单一性。
93.在一示例性实施例中，折柱图组件中还配置有插槽；上述折柱图生成方法还包括：接收通过插槽传入的非图表内容；
94.上述步骤s230中，基于折柱图样式参数和标准化数据，渲染得到折柱图，还包括：基于折柱图样式参数、标准化数据和非图表内容，渲染得到折柱图。
95.具体实现中，本技术提供的折柱图组件中还预先配置有自定义插槽，用于插入筛选框、说明文段等非图表内容。因此，在进行折柱图渲染前，用户还可通过该插槽传入非图表内容，在最后进行图表渲染时，除了基于折柱图样式参数和标准化数据外，还基于通过插槽传入的非图表内容进行渲染，得到包含待展示数据以及非图表内容的折柱图。
96.本实施例对折柱图组件进行了进一步的功能拓展，在折柱图组件中提供了自定义
插槽，使得可以在折柱图组件中插入其他需要展示的内容，具有较高的灵活性和实用性。
97.在一示例性实施例中，如图4所示，为折柱图组件配置方法的流程示意图，包括以下步骤：
98.步骤s410，创建vue组件；vue组件包括组件模板和组件脚本。
99.其中，vue组件包括三部分：1、组件模板(template)，即template标签包裹的界面展示代码(html代码)；2、组件脚本，为script标签包裹的业务实现代码(即js脚本代码)；3、style标签包裹的界面样式代码(css样式代码)。
100.步骤s420，在vue组件的组件模板中添加用于图表渲染的元素和插槽，以及在vue组件的组件脚本中引入echarts图形库、echarts折线图和echarts柱状图，得到初始vue组件。
101.具体实现中，在vue组件的组件模板(即html)中加入两个div(html中的元素)，一个作为图表渲染的dom，一个作为导出控件；以及加入一个slot，作为自定义插槽，用于插入非图表内容。
102.同时，在vue组件的组件脚本(script)中引入echarts.js(即echarts图形库)、echarts折线图和echarts柱状图。
103.本步骤中，在引入图形库后，还分别引入对应的echarts折线图和echarts柱状图，是为了以此调用对应的样式文件和方法，才能进行后续的渲染图表。
104.步骤s430，在初始vue组件中，定义用于处理待展示数据的响应式变量和用于解析折柱图样式参数的响应式数据，得到目标组件，将目标组件作为折柱图组件。
105.具体实现中，定义响应式变量chartdata，用于接收数据源返回的待展示数据，以及对待展示数据进行处理。在应用时，通过该响应式变量将props传入的配置对象cardoption中的dataoption对象(即待展示数据)进行处理，根据url参数的数据源地址向后端发起请求，得到字段映射信息，根据该字段映射信息对待展示数据进行标准化处理，最终处理为x轴对应的字符串数组和包含多个y轴数据的对象数组。
106.定义响应式数据，用于解析props传入的图表样式参数。在应用时，通过该响应式数据将props传入的cardoption中的chartoption对象进行处理，把颜色主题color，图例tooltip，图例legend等参数值赋值给chartseries。读取不同y轴对应的图表类型type，分别一一和标准化后的不同的y轴数据数组组成对象，把多个对象塞进一个空数组中，赋值给chartseries的serises属性，区分不同字段数据为折线图或柱状，最后调用echarts的setoption函数，渲染得到最终的折柱图效果。
107.本实施例中，基于vue和echarts通过props参数生成带插槽的折柱图，聚焦在折柱图本身，使用时不需要额外学习echarts的其他图表配置项，支持拓展导出功能和自定义插槽，可在组件中插入其他需要展示的内容，如插入筛选框、说明文段等非图表内容，具有较高的灵活性和实用性。
108.在一示例性实施例中，在步骤s420之后，还包括：在vue组件的生命周期函数mounted中，通过echarts将用于图表渲染的元素初始化为echarts实例对象，以及定义用于解析props特性传入的配置对象的函数。
109.具体实现中，在vue的生命周期函数mounted中，通过echarts将用于图表渲染的元素dom初始化为echarts实例对象，并定义setoption函数，以解析props特性传入的配置对
象cardoption。
110.本实施例中，用于图表渲染的元素的初始化可以理解为将用于图表渲染的元素和图表绑定，指定图表渲染在这个节点/区域上，使得后续调用渲染函数setoption后，折柱图会在这个dom(或者说这个实例上)渲染。
111.进一步地，在一示例性实施例中，在基于所述折柱图样式参数和所述标准化数据，渲染得到折柱图之后，还包括：在vue组件的生命周期函数destroyed中销毁echarts实例对象。
112.本实施例中，在完成折柱图的渲染后，在vue组件的生命周期函数destroyed中销毁echarts实例对象，能够防止内存泄露。
113.应该理解的是，虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。
114.基于同样的发明构思，本技术实施例还提供了一种用于实现上述所涉及的折柱图生成方法的折柱图生成装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似，故下面所提供的一个或多个折柱图生成装置实施例中的具体限定可以参见上文中对于折柱图生成方法的限定，在此不再赘述。
115.在一个实施例中，如图5所示，提供了一种折柱图生成装置，包括：接收模块510、标准化模块520和渲染模块530，其中：
116.接收模块510，用于接收待展示数据和待展示数据所需的折柱图样式参数；
117.标准化模块520，用于通过预先配置的折柱图组件，对待展示数据进行标准化处理，得到标准化数据；
118.渲染模块530，用于基于折柱图样式参数和标准化数据，渲染得到折柱图；折柱图为按照折柱图样式参数绘制的与待展示数据对应的折柱图。
119.在其中一个实施例中，待展示数据携带有数据源地址；标准化模块520，还用于获取数据源地址对应的字段映射信息；根据字段映射信息，对待展示数据进行标准化处理，得到x轴对应的字符串数组和包含多个y轴数据的对象数组，均作为标准化数据。
120.在其中一个实施例中，渲染模块530，还用于对折柱图样式参数进行解析，得到不同y轴数据的对象数组对应的样式参数；将每个y轴数据的对象数组对应的样式参数和每个y轴数据的对象数组组成对象，将得到的各个对象赋值给折柱图组件中定义的响应式数据的预设属性；基于赋值后的响应式数据和x轴对应的字符串数组，渲染得到折柱图。
121.在其中一个实施例中，折柱图生成装置还包括导出模块，用于在折柱图组件上渲染出导出控件，并展示导出控件；响应于针对导出控件的触发操作，展示多个导出类型选择入口；响应于针对多个导出类型选择入口中目标导出类型选择入口的选中操作，导出目标导出类型选择入口对应的文件。
122.在其中一个实施例中，导出模块，还用于当目标导出类型选择入口为图片时，将折
柱图以图片形式导出；当目标导出类型选择入口为当前表格时，将折柱图的数据以表格形式导出；当目标导出类型选择入口为完整表格，且具有数据源地址时，从数据源地址导出完整的数据表格。
123.在其中一个实施例中，折柱图组件中还配置有插槽；折柱图生成装置还包括非图表内容接收模块，用于接收通过插槽传入的非图表内容；
124.渲染模块530，还用于基于折柱图样式参数、标准化数据和非图表内容，渲染得到折柱图。
125.在其中一个实施例中，折柱图生成装置还包括组件配置模块，用于创建vue组件；vue组件包括组件模板和组件脚本；在vue组件的组件模板中添加用于图表渲染的元素和插槽，以及在vue组件的组件脚本中引入echarts图形库、echarts折线图和echarts柱状图，得到初始vue组件；在初始vue组件中，定义用于处理待展示数据的响应式变量和用于解析折柱图样式参数的响应式数据，得到目标组件，将目标组件作为折柱图组件。
126.在其中一个实施例中，组件配置模块，还用于在vue组件的生命周期函数mounted中，通过echarts将用于图表渲染的元素初始化为echarts实例对象，以及定义用于解析props特性传入的配置对象的函数。
127.在其中一个实施例中，折柱图生成装置还包括销毁模块，用于在vue组件的生命周期函数destroyed中销毁echarts实例对象。
128.上述折柱图生成装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
129.在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图6所示。该计算机设备包括通过系统总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过wifi、移动蜂窝网络、nfc(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种折柱图生成方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。
130.本领域技术人员可以理解，图6中示出的结构，仅仅是与本技术方案相关的部分结构的框图，并不构成对本技术方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。
131.在一个实施例中，还提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述各方法实施例中的步骤。
132.在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。
133.在一个实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。
134.需要说明的是，本技术所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)，均为经用户授权或者经过各方充分授权的信息和数据，且相关数据的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准。
135.本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本技术所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(read-only memory，rom)、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器(reram)、磁变存储器(magnetoresistive random access memory，mram)、铁电存储器(ferroelectric random access memory，fram)、相变存储器(phase change memory，pcm)、石墨烯存储器等。易失性存储器可包括随机存取存储器(random access memory，ram)或外部高速缓冲存储器等。作为说明而非局限，ram可以是多种形式，比如静态随机存取存储器(static random access memory，sram)或动态随机存取存储器(dynamic random access memory，dram)等。本技术所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本技术所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等，不限于此。
136.以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
137.以上所述实施例仅表达了本技术的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本技术专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本技术构思的前提下，还可以做出若干变形和改进，这些都属于本技术的保护范围。因此，本技术的保护范围应以所附权利要求为准。

技术特征：
1.一种折柱图生成方法，其特征在于，所述方法包括：接收待展示数据和所述待展示数据所需的折柱图样式参数；通过预先配置的折柱图组件，对所述待展示数据进行标准化处理，得到标准化数据；基于所述折柱图样式参数和所述标准化数据，渲染得到折柱图；所述折柱图为按照所述折柱图样式参数绘制的与所述待展示数据对应的折柱图。2.根据权利要求1所述的方法，其特征在于，所述待展示数据携带有数据源地址；所述对所述待展示数据进行标准化处理，得到标准化数据，包括：获取所述数据源地址对应的字段映射信息；根据所述字段映射信息，对所述待展示数据进行标准化处理，得到x轴对应的字符串数组和包含多个y轴数据的对象数组，均作为标准化数据。3.根据权利要求2所述的方法，其特征在于，所述基于所述折柱图样式参数和所述标准化数据，渲染得到折柱图，包括：对所述折柱图样式参数进行解析，得到不同y轴数据的对象数组对应的样式参数；将每个y轴数据的对象数组对应的样式参数和所述每个y轴数据的对象数组组成对象，将得到的各个对象赋值给所述折柱图组件中定义的响应式数据的预设属性；基于赋值后的响应式数据和所述x轴对应的字符串数组，渲染得到所述折柱图。4.根据权利要求1所述的方法，其特征在于，所述基于所述折柱图样式参数和所述标准化数据，渲染得到折柱图之后，还包括：在所述折柱图组件上渲染出导出控件，并展示所述导出控件；响应于针对所述导出控件的触发操作，展示多个导出类型选择入口；响应于针对所述多个导出类型选择入口中目标导出类型选择入口的选中操作，导出所述目标导出类型选择入口对应的文件。5.根据权利要求4所述的方法，其特征在于，所述响应于针对所述多个导出类型选择入口中目标导出类型选择入口的选中操作，导出所述目标导出类型选择入口对应的文件，包括：当所述目标导出类型选择入口为图片时，将所述折柱图以图片形式导出；当所述目标导出类型选择入口为当前表格时，将所述折柱图的数据以表格形式导出；当所述目标导出类型选择入口为完整表格，且具有数据源地址时，从所述数据源地址导出完整的数据表格。6.根据权利要求1所述的方法，其特征在于，所述折柱图组件中还配置有插槽；所述方法还包括：接收通过所述插槽传入的非图表内容；所述基于所述折柱图样式参数和所述标准化数据，渲染得到折柱图，包括：基于所述折柱图样式参数、所述标准化数据和所述非图表内容，渲染得到所述折柱图。7.根据权利要求1所述的方法，其特征在于，所述折柱图组件通过下述方式配置得到：创建vue组件；所述vue组件包括组件模板和组件脚本；在所述vue组件的组件模板中添加用于图表渲染的元素和插槽，以及在所述vue组件的组件脚本中引入echarts图形库、echarts折线图和echarts柱状图，得到初始vue组件；在所述初始vue组件中，定义用于处理待展示数据的响应式变量和用于解析折柱图样
式参数的响应式数据，得到目标组件，将所述目标组件作为折柱图组件。8.根据权利要求7所述的方法，其特征在于，所述在所述vue组件的组件模板中添加用于图表渲染的元素和插槽，以及在所述vue组件的组件脚本中引入echarts图形库、echarts折线图和echarts柱状图，得到初始vue组件之后，还包括：在所述vue组件的生命周期函数mounted中，通过echarts将所述用于图表渲染的元素初始化为echarts实例对象，以及定义用于解析props特性传入的配置对象的函数。9.根据权利要求8所述的方法，其特征在于，在基于所述折柱图样式参数和所述标准化数据，渲染得到折柱图之后，还包括：在所述vue组件的生命周期函数destroyed中销毁所述echarts实例对象。10.一种折柱图生成装置，其特征在于，所述装置包括：接收模块，用于接收待展示数据和所述待展示数据所需的折柱图样式参数；标准化模块，用于通过预先配置的折柱图组件，对所述待展示数据进行标准化处理，得到标准化数据；渲染模块，用于基于所述折柱图样式参数和所述标准化数据，渲染得到折柱图；所述折柱图为按照所述折柱图样式参数绘制的与所述待展示数据对应的折柱图。11.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至9中任一项所述的折柱图生成方法的步骤。12.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至9中任一项所述的折柱图生成方法的步骤。13.一种计算机程序产品，包括计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1至9中任一项所述的折柱图生成方法的步骤。

技术总结
本申请涉及一种折柱图生成方法、装置、计算机设备和存储介质，应用于计算机领域，所述方法包括：接收待展示数据和所述待展示数据所需的折柱图样式参数；通过预先配置的折柱图组件，对所述待展示数据进行标准化处理，得到标准化数据；基于所述折柱图样式参数和所述标准化数据，渲染得到折柱图；所述折柱图为按照所述折柱图样式参数绘制的与所述待展示数据对应的折柱图。采用本方法能够减少折柱图组件的学习成本，减少工程中的冗余代码，使得开发人员可聚焦编写业务逻辑，而无需关注折柱图功能实现，从而可提高前端开发人员的开发效率。从而可提高前端开发人员的开发效率。从而可提高前端开发人员的开发效率。


技术研发人员：杨晓虹 郭捷捷 龙显军
受保护的技术使用者：中国电信股份有限公司
技术研发日：2023.05.24
技术公布日：2023/10/6