CN115857906A - 低代码图表生成的方法、系统、电子设备及介质 - Google Patents

Abstract

本发明提供了一种低代码图表生成的方法、系统、电子设备及介质，包括：获取图表的图片；如果图表的类型属于预先封装好的echarts组件的类型中的一种，则基于图片获取图表的配置参数；基于配置参数和图表的类型对应的echarts组件生成图表代码。本发明可以提高图表的定制化程度，满足用户对不同样式的图表的需求。

Description

低代码图表生成的方法、系统、电子设备及介质

技术领域

本发明涉及程序开发技术领域，尤其是涉及一种低代码图表生成的方法、系统、电子设备及介质。

背景技术

在B端管理后台的页面开发过程中，前端开发人员经常使用图表来统计数据并将数据进行可视化展示。现有的低代码开发平台大多都是对整个页面的快速搭建，对于图表的生成主要是在固定的图表组件中挑选，直接拖拽生成，定制化程度不够高，无法满足用户对不同样式的图表的需求。

发明内容

有鉴于此，本发明的目的在于提供一种低代码图表生成的方法、系统、电子设备及介质，以提高图表的定制化程度，满足用户对不同样式的图表的需求。

为了实现上述目的，本发明实施例采用的技术方案如下：

第一方面，本发明实施例提供了一种低代码图表生成的方法，包括：获取图表的图片；如果图表的类型属于预先封装好的echarts组件的类型中的一种，则基于图片获取图表的配置参数；基于配置参数和图表的类型对应的echarts组件生成图表代码。

在一种实施方式中，基于图片获取图表的配置参数，包括：将图片进行图像分割得到坐标区域和数据展示区域；分别对坐标区域和数据展示区域进行图像识别得到配置参数；其中，配置参数至少包括：坐标轴参数和图表选项参数。

在一种实施方式中，基于配置参数和图表的类型对应的echarts组件生成图表代码，包括：将配置参数转换成目标格式的配置参数；将目标格式的配置参数传入图表的类型对应的echarts组件中生成图表代码。

在一种实施方式中，将目标格式的配置参数传入图表的类型对应的echarts组件中生成图表代码，包括：判断配置参数是否为echarts原生参数格式；如果否，则对配置参数进行解析得到echarts原生参数格式的配置参数，并将echarts原生参数格式的配置参数传入图表的类型对应的echarts组件中生成图表代码。

在一种实施方式中，基于配置参数和图表的类型对应的echarts组件生成图表代码之后，该方法还包括：响应用户的输入操作对图表代码进行修改，得到目标图表代码。

在一种实施方式中，获取图表的图片之前，该方法还包括：基于图表的类型封装得到每种类型对应的echarts组件。

第二方面，本发明实施例提供了一种低代码图表生成的系统，包括：图片获取模块，用于获取图表的图片；参数获取模块，用于如果图表的类型属于预先封装好的echarts组件的类型中的一种，则基于图片获取图表的配置参数；生成模块，用于基于配置参数和图表的类型对应的echarts组件生成图表代码。

在一种实施方式中，参数获取模块还用于：将图片进行图像分割得到坐标区域和数据展示区域；分别对坐标区域和数据展示区域进行图像识别得到配置参数；其中，配置参数至少包括：坐标轴参数和图表选项参数。

第三方面，本发明实施例提供了一种电子设备，包括处理器和存储器，存储器存储有能够被处理器执行的计算机可执行指令，处理器执行计算机可执行指令以实现上述第一方面提供的任一项的方法的步骤。

第四方面，本发明实施例提供了一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，计算机程序被处理器运行时执行上述第一方面提供的任一项的方法的步骤。

本发明实施例带来了以下有益效果：

本发明实施例提供低代码图表生成的方法、系统、电子设备及介质，首先获取图表的图片；然后如果图表的类型属于预先封装好的echarts组件的类型中的一种，则基于图片获取图表的配置参数；最后基于配置参数和图表的类型对应的echarts组件生成图表代码。上述方法提取图片中的配置参数，将配置参数传入到封装好的echarts组件中结合echarts组件中的默认参数生成图表代码，从而可以定制化生成各种图表，满足用户对不同样式的图表的需求。

本发明的其他特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种低代码图表生成的方法的流程图；

图2为本发明实施例提供的一种配置参数的生成方法的示意图；

图3为本发明实施例提供的一种具体的低代码图表生成的方法的流程图；

图4为本发明实施例提供的一种低代码图表生成的系统的结构示意图；

图5为本发明实施例提供的一种电子设备的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合附图对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

目前，现有的低代码主要分为页面驱动和模型驱动两种方式。页面驱动是指使用者直接设计页面、表单、规则，不考虑数据模型，用户根据提供的UI控件实现布局、表单、页面、单据设计，页面显示就是把设计进行还原呈现，最后直接供使用者使用。模型驱动是指先规划并设计好要表示的对象模型及模型关系，然后根据模型设计页面、表单、单据等等，页面上能呈现的数据来源于提前设计好的数据模型，页面显示的时候与页面驱动相同，都是根据表单设计器设计去还原页面，供使用者使用。但是，现有的大部分低代码开发平台都有现成的完整的图表组件，直接拖拽生成图表，无法实现高定制性的要求。

基于此，本发明实施例提供的一种低代码图表生成的方法、系统、电子设备及介质，可以提高图表的定制化程度，满足用户对不同样式的图表的需求。

为便于对本实施例进行理解，首先对本发明实施例所公开的一种低代码图表生成的方法进行详细介绍，该方法可以由电子设备执行，诸如：电脑、智能手机、平板电脑等，电子设备中安装有低代码系统。参见图1所示的一种低代码图表生成的方法的流程图，示意出该方法主要包括以下步骤S101至步骤S103：

步骤S101：获取图表的图片。

在一种实施方式中，开发人员可以将图表的图片上传至低代码系统中。

步骤S102：如果图表的类型属于预先封装好的echarts组件的类型中的一种，则基于图片获取图表的配置参数。

在一种实施方式中，低代码系统接收到上传的图片后，可以首先判断图表的类型是否属于预先封装好的echarts组件的类型中的一种，如果是，则可以采用图像分割、图像识别技术提取图片中的有用信息，得到图表的多组配置参数。

具体的，echarts是使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。在具体实施时，可以预先根据图表类型封装echarts组件，每个echarts组件中有各自的defaultOption（默认选项）和option（选项）配置参数，传入option配置参数进行实时计算，即可实现echarts的绘制和数据更新。具体的，配置参数包括：dataSource（数据源）和chartOption（图表选项），dataSource为传进echarts组件的数据，包括横纵坐标的数值和配置参数；chartOption是用户自定义的参数，可以根据当前图表的风格对进行参数调整。

步骤S103：基于配置参数和图表的类型对应的echarts组件生成图表代码。

在一种实施方式中，低代码系统可以将所属同一组的配置参数进行合并并解析成echarts原生参数格式传入到对应的echarts组件中，echarts组件可以根据传入的配置参数结合echarts组件中的默认参数生成图表代码。

本发明实施例提供低代码图表生成的方法，提取图片中的配置参数，将配置参数传入到封装好的echarts组件中结合echarts组件中的默认参数生成图表代码，从而可以定制化生成各种图表，满足用户对不同样式的图表的需求。

在一种实施方式中，对于前述步骤S102，即在基于图片获取图表的配置参数时，可以采用包括但不限于以下方式：首先，将图片进行图像分割得到坐标区域和数据展示区域；然后，分别对坐标区域和数据展示区域进行图像识别得到配置参数；其中，配置参数至少包括：坐标轴参数和图表选项参数。

在具体实施时，可以采用人工智能（ArtificialIntelligence，AI）技术识别图表的不同区域。具体的，采用人工智能的图像分割技术将获取到的图片骗分割为坐标区域和数据展示区域等不同的区域；然后对分割得到的坐标区域进行字符检测与识别，对数据展示区域进行取现的分离与提取，并将分离剩下的元素再次进行字符的检测与识别，从而得到多组配置参数，包括坐标轴参数和图表选项参数等。

在一种实施方式中，对于前述步骤S103，即在基于配置参数和图表的类型对应的echarts组件生成图表代码时，可以采用包括但不限于以下方式：时，可以采用包括但不限于以下方式：

首先，将配置参数转换成目标格式的配置参数。

在具体实施时，根据AI识别获取到的多组配置参数不能直接传入已经封装好的echarts组件中，需要将所属同一组的配置参数进行合并，并将合并后的配置参数解析成echarts原生参数格式才能将其传入echarts组件并进行图表更新。基于此，本发明实施例中在将通过AI识别得到的配置参数传入到echarts组件之前，需要先将得到的配置参数转换成json格式的配置参数。

然后，将目标格式的配置参数传入图表的类型对应的echarts组件中生成图表代码。

具体的，首先判断配置参数是否为echarts原生参数格式；如果否，则对配置参数进行解析得到echarts原生参数格式的配置参数，并将echarts原生参数格式的配置参数传入图表的类型对应的echarts组件中生成图表代码。

在具体实施时，将配置参数传入echarts组件中后还需要再次判断配置参数是否为echarts原生参数格式，首先进行函数判断确定当前配置参数的类型，如果当前配置参数不是echarts原生参数格式，则调用解析逻辑将传入的配置参数解析成echarts原生的json配置参数，之后再将解析后的echarts原生的json配置参数传入echarts组件中生成图表代码。

为了便于理解，本发明实实施例还提供了一种配置参数的生成方法的示意图，参见图2所示，首先上传图片；然后根据上传的图片采用AI图像识别并训练处两部分json参数，具体的，将图片分割成坐标区域、数据展示区域等，并提取每个区域的有用信息得到dataSource参数（即坐标轴参数）和chartOption参数（即图表选项参数），其中，dataSource参数主要包括坐标轴上的参数等，chartOption参数主要包括图表样式等参数（其中包含默认值）；最后合并参数并处理，形成echarts原生参数，具体的，将所属同一组的配置参数进行合并，判断配置参数的类型，如果配置参数不是echarts原生参数格式，则调用解析逻辑将传入的配置参数解析成echarts原生的json配置参数。

为了进一步提升图表的定制化程度，减少图表代码的偏差，使用户得到符合预期的代码，本发明实施例中在生成图表代码后，还可以为用户提供在线编辑功能，以对代码进行修改。基于此，本发明实施例中，在基于配置参数和图表的类型对应的echarts组件生成图表代码之后，上述方法还包括：响应用户的输入操作对图表代码进行修改，得到目标图表代码。

在具体实施时，echarts组件可以根据传入的配置参数配合组件中的默认参数生成视图，生成视图后，用户可以根据自己的需求在线修改图表代码，修改后可以直接将配置参数传入echarts组件中，驱动视图变化，得到目标图表代码。

现有的技术中前端开发人员需要在echarts社区中找到需要图表的雏形，然后再经过对一些API的修改，得到前端开发人员想要的图表，因此前端开发人员对echarts的API熟稔于心。但是echarts的API众多且不容易记忆，从而导致开发效率明显下降。为了快速得到大量echarts组件，节省开发人员到echarts社区查找相似图表并修改的时间，提高开发效率。本发明实施例中，在获取图表的图片之前，还包括：基于图表的类型封装得到每种类型对应的echarts组件。

在具体实施时，可以根据图表的类型封装为line（折线图）、bar（条形）、pie（饼图）、scatter（散点图）、map（分布图）、candlestick（k线图）、radar（雷达图）、boxplot（箱形图）、heatmap（热力图）等类型的echarts组件。每个echarts组件有各自的defaultOption和option参数，传入option配置即可进行图表更新，配合vue的computed，可以根据props（props主要用于组件的传值，接收外面传过来的数据）进来的数据进行实时计算，从而实现echarts的绘制和数据更新。配置参数包括：dataSource为传进来echarts组件的数据，包括横纵坐标的数值和配置参数；chartOption是一些用户自定义的参数，可以根据当前图表的风格对echarts组件进行参数调整；height（高度）控制图表的高度。Option参数的title（标题）、tooltip（提示）、grid（网格）、legend（说明）、xAxis（X坐标轴）、yAxis（Y坐标轴）、series（系列）几个重要参数，可以使用assign函数进行整合，如果chartOption有自定义的配置参数，则生效自定义配置参数，如果没有，则使用组件中的默认配置参数。此外可以通过在组件中设置autoresize函数使图表自适应。

为了便于理解，本发明实施例还提供了一种具体的低代码图表生成的方法，参见图3所示，主要包括以下步骤S301至步骤S306：

步骤S301：上传echarts图片。

步骤S302：判断echarts图片是否属于echarts类型；如果是，则执行步骤S303，否则执行步骤S306。

步骤S303：根据echarts类型生成对应的图表代码。

具体的，用户上传echarts的图片，低代码系统判断属于echarts类型后利用图像分割、图像识别技术将图片中的有用信息提取出来，并转换成echarts原生参数json格式的信息传入封装后的echarts组件中；在组件中再次判断传入的格式是否为echarts原生参数格式，如不是，则先将配置参数整理合并调用解析逻辑将传入的参数解析成echarts原生的json配置参数，再将整理后的参数传入echarts组件，echarts组件可以根据传入的参数配合默认参数生成视图。

步骤S304：在代码修改区对图表代码进行修改。

具体的，在生成视图后，用户根据自己的需求在代码修改区在线修改代码，以使echarts图更加贴近上传的图片。

步骤S305：修改完成，复制生成图表代码。

具体的，修改后，直接将参数传入echarts组件中，驱动视图变化得到目标图表代码。

步骤S306：重新上传图片。

本发明实施例提供的上述方法，可以定制化的实现各种图表的生成，满足用户对不同样式的图表的需求；此外，可以快速得到大量echarts组件，节省到echarts社区查找相似图表并修改的时间，提高开发效率；同时，可以为用于提供在线编辑的功能，对生成的代码进行修改，使得使用者最后得到的代码更加符合预期。

对于前述实施例提供的低代码图表生成的方法，本发明实施例还提供了一种低代码图表生成的系统，参见图4所示的一种低代码图表生成的系统的结构示意图，该系统可以包括以下部分：

图片获取模块401，用于获取图表的图片；

参数获取模块402，用于如果图表的类型属于预先封装好的echarts组件的类型中的一种，则基于图片获取图表的配置参数；

生成模块403，用于基于配置参数和图表的类型对应的echarts组件生成图表代码。

本发明实施例提供低代码图表生成的系统，提取图片中的配置参数，将配置参数传入到封装好的echarts组件中结合echarts组件中的默认参数生成图表代码，从而可以定制化生成各种图表，满足用户对不同样式的图表的需求。

在一种实施方式中，上述参数获取模块402还用于：将图片进行图像分割得到坐标区域和数据展示区域；分别对坐标区域和数据展示区域进行图像识别得到配置参数；其中，配置参数至少包括：坐标轴参数和图表选项参数。

在一种实施方式中，上述生成模块403还用于：将配置参数转换成目标格式的配置参数；将目标格式的配置参数传入图表的类型对应的echarts组件中生成图表代码。

在一种实施方式中，上述生成模块403还用于：判断配置参数是否为echarts原生参数格式；如果否，则对配置参数进行解析得到echarts原生参数格式的配置参数，并将echarts原生参数格式的配置参数传入图表的类型对应的echarts组件中生成图表代码。

在一种实施方式中，上述系统还包括修改模块，用于：响应用户的输入操作对图表代码进行修改，得到目标图表代码。

在一种实施方式中，上述系统还包括封装模块，用于：基于图表的类型封装得到每种类型对应的echarts组件。

本发明实施例所提供的系统，其实现原理及产生的技术效果和前述方法实施例相同，为简要描述，系统实施例部分未提及之处，可参考前述方法实施例中相应内容。

本发明实施例还提供了一种电子设备，具体的，该电子设备包括处理器和存储装置；存储装置上存储有计算机程序，计算机程序在被处理器运行时执行如上实施方式的任一项所述的方法。

图5为本发明实施例提供的一种电子设备的结构示意图，该电子设备100包括：处理器50，存储器51，总线52和通信接口53，所述处理器50、通信接口53和存储器51通过总线52连接；处理器50用于执行存储器51中存储的可执行模块，例如计算机程序。

其中，存储器51可能包含高速随机存取存储器（RAM，Random Access Memory），也可能还包括非不稳定的存储器（non-volatile memory），例如至少一个磁盘存储器。通过至少一个通信接口53（可以是有线或者无线）实现该系统网元与至少一个其他网元之间的通信连接，可以使用互联网，广域网，本地网，城域网等。

总线52可以是ISA总线、PCI总线或EISA总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图5中仅用一个双向箭头表示，但并不表示仅有一根总线或一种类型的总线。

其中，存储器51用于存储程序，所述处理器50在接收到执行指令后，执行所述程序，前述本发明实施例任一实施例揭示的流过程定义的装置所执行的方法可以应用于处理器50中，或者由处理器50实现。

处理器50可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器50中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器50可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(Digital SignalProcessing，简称DSP)、专用集成电路(Application Specific Integrated Circuit，简称ASIC)、现成可编程门阵列(Field-ProgrammableGate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本发明实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器51，处理器50读取存储器51中的信息，结合其硬件完成上述方法的步骤。

本发明实施例所提供的可读存储介质的计算机程序产品，包括存储了程序代码的计算机可读存储介质，所述程序代码包括的指令可用于执行前面方法实施例中所述的方法，具体实现可参见前述方法实施例，在此不再赘述。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备（可以是个人计算机，服务器，或者网络设备等）执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器（ROM，Read-OnlyMemory）、随机存取存储器（RAM，Random Access Memory）、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上所述实施例，仅为本发明的具体实施方式，用以说明本发明的技术方案，而非对其限制，本发明的保护范围并不局限于此，尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。

Claims (10)

1.一种低代码图表生成的方法，其特征在于，包括：

获取图表的图片；

如果所述图表的类型属于预先封装好的echarts组件的类型中的一种，则基于所述图片获取所述图表的配置参数；

基于所述配置参数和所述图表的类型对应的echarts组件生成图表代码。

2.根据权利要求1所述的方法，其特征在于，基于所述图片获取所述图表的配置参数，包括：

将所述图片进行图像分割得到坐标区域和数据展示区域；

分别对所述坐标区域和所述数据展示区域进行图像识别得到配置参数；其中，所述配置参数至少包括：坐标轴参数和图表选项参数。

3.根据权利要求1所述的方法，其特征在于，基于所述配置参数和所述图表的类型对应的echarts组件生成图表代码，包括：

将所述配置参数转换成目标格式的配置参数；

将所述目标格式的配置参数传入所述图表的类型对应的echarts组件中生成图表代码。

4.根据权利要求3所述的方法，其特征在于，将所述目标格式的配置参数传入所述图表的类型对应的echarts组件中生成图表代码，包括：

判断所述配置参数是否为echarts原生参数格式；

如果否，则对所述配置参数进行解析得到echarts原生参数格式的配置参数，并将所述echarts原生参数格式的配置参数传入所述图表的类型对应的echarts组件中生成图表代码。

5.根据权利要求1所述的方法，其特征在于，基于所述配置参数和所述图表的类型对应的echarts组件生成图表代码之后，所述方法还包括：

响应用户的输入操作对所述图表代码进行修改，得到目标图表代码。

6.根据权利要求1所述的方法，其特征在于，获取图表的图片之前，所述方法还包括：

基于图表的类型封装得到每种类型对应的echarts组件。

7.一种低代码图表生成的系统，其特征在于，包括：

图片获取模块，用于获取图表的图片；

参数获取模块，用于如果所述图表的类型属于预先封装好的echarts组件的类型中的一种，则基于所述图片获取所述图表的配置参数；

生成模块，用于基于所述配置参数和所述图表的类型对应的echarts组件生成图表代码。

8.根据权利要求7所述的系统，其特征在于，所述参数获取模块还用于：

将所述图片进行图像分割得到坐标区域和数据展示区域；

分别对所述坐标区域和所述数据展示区域进行图像识别得到配置参数；其中，所述配置参数至少包括：坐标轴参数和图表选项参数。

9.一种电子设备，其特征在于，包括处理器和存储器，所述存储器存储有能够被所述处理器执行的计算机可执行指令，所述处理器执行所述计算机可执行指令以实现权利要求1至6任一项所述的方法的步骤。

10.一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，其特征在于，所述计算机程序被处理器运行时执行上述权利要求1至6任一项所述的方法的步骤。

Images