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

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

【技术实现步骤摘要】
低代码图表生成的方法、系统、电子设备及介质


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

技术介绍

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

技术实现思路

[0003]有鉴于此，本专利技术的目的在于提供一种低代码图表生成的方法、系统、电子设备及介质，以提高图表的定制化程度，满足用户对不同样式的图表的需求。
[0004]为了实现上述目的，本专利技术实施例采用的技术方案如下：第一方面，本专利技术实施例提供了一种低代码图表生成的方法，包括：获取图表的图片；如果图表的类型属于预先封装好的echarts组件的类型中的一种，则基于图片获取图表的配置参数；基于配置参数和图表的类型对应的echarts组件生成图表代码。
[0005]在一种实施方式中，基于图片获取图表的配置参数，包括：将图片进行图像分割得到坐标区域和数据展示区域；分别对坐标区域和数据展示区域进行图像识别得到配置参数；其中，配置参数至少包括：坐标轴参数和图表选项参数。
[0006]在一种实施方式中，基于配置参数和图表的类型对应的echarts组件生成图表代码，包括：将配置参数转换成目标格式的配置参数；将目标格式的配置参数传入图表的类型对应的echarts组件中生成图表代码。
[0007]在一种实施方式中，将目标格式的配置参数传入图表的类型对应的echarts组件中生成图表代码，包括：判断配置参数是否为echarts原生参数格式；如果否，则对配置参数进行解析得到echarts原生参数格式的配置参数，并将echarts原生参数格式的配置参数传入图表的类型对应的echarts组件中生成图表代码。
[0008]在一种实施方式中，基于配置参数和图表的类型对应的echarts组件生成图表代码之后，该方法还包括：响应用户的输入操作对图表代码进行修改，得到目标图表代码。
[0009]在一种实施方式中，获取图表的图片之前，该方法还包括：基于图表的类型封装得到每种类型对应的echarts组件。
[0010]第二方面，本专利技术实施例提供了一种低代码图表生成的系统，包括：图片获取模块，用于获取图表的图片；参数获取模块，用于如果图表的类型属于预先封装好的echarts组件的类型中的一种，则基于图片获取图表的配置参数；生成模块，用于基于配置参数和图表的类型对应的echarts组件生成图表代码。
[0011]在一种实施方式中，参数获取模块还用于：将图片进行图像分割得到坐标区域和
数据展示区域；分别对坐标区域和数据展示区域进行图像识别得到配置参数；其中，配置参数至少包括：坐标轴参数和图表选项参数。
[0012]第三方面，本专利技术实施例提供了一种电子设备，包括处理器和存储器，存储器存储有能够被处理器执行的计算机可执行指令，处理器执行计算机可执行指令以实现上述第一方面提供的任一项的方法的步骤。
[0013]第四方面，本专利技术实施例提供了一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，计算机程序被处理器运行时执行上述第一方面提供的任一项的方法的步骤。
[0014]本专利技术实施例带来了以下有益效果：本专利技术实施例提供低代码图表生成的方法、系统、电子设备及介质，首先获取图表的图片；然后如果图表的类型属于预先封装好的echarts组件的类型中的一种，则基于图片获取图表的配置参数；最后基于配置参数和图表的类型对应的echarts组件生成图表代码。上述方法提取图片中的配置参数，将配置参数传入到封装好的echarts组件中结合echarts组件中的默认参数生成图表代码，从而可以定制化生成各种图表，满足用户对不同样式的图表的需求。
[0015]本专利技术的其他特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本专利技术而了解。本专利技术的目的和其他优点在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。
[0016]为使本专利技术的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。
附图说明
[0017]为了更清楚地说明本专利技术具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本专利技术的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0018]图1为本专利技术实施例提供的一种低代码图表生成的方法的流程图；图2为本专利技术实施例提供的一种配置参数的生成方法的示意图；图3为本专利技术实施例提供的一种具体的低代码图表生成的方法的流程图；图4为本专利技术实施例提供的一种低代码图表生成的系统的结构示意图；图5为本专利技术实施例提供的一种电子设备的结构示意图。
具体实施方式
[0019]为使本专利技术实施例的目的、技术方案和优点更加清楚，下面将结合附图对本专利技术的技术方案进行清楚、完整地描述，显然，所描述的实施例是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。
[0020]目前，现有的低代码主要分为页面驱动和模型驱动两种方式。页面驱动是指使用者直接设计页面、表单、规则，不考虑数据模型，用户根据提供的UI控件实现布局、表单、页
面、单据设计，页面显示就是把设计进行还原呈现，最后直接供使用者使用。模型驱动是指先规划并设计好要表示的对象模型及模型关系，然后根据模型设计页面、表单、单据等等，页面上能呈现的数据来源于提前设计好的数据模型，页面显示的时候与页面驱动相同，都是根据表单设计器设计去还原页面，供使用者使用。但是，现有的大部分低代码开发平台都有现成的完整的图表组件，直接拖拽生成图表，无法实现高定制性的要求。
[0021]基于此，本专利技术实施例提供的一种低代码图表生成的方法、系统、电子设备及介质，可以提高图表的定制化程度，满足用户对不同样式的图表的需求。
[0022]为便于对本实施例进行理解，首先对本专利技术实施例所公开的一种低代码图表生成的方法进行详细介绍，该方法可以由电子设备执行，诸如：电脑、智能手机、平板电脑等，电子设备中安装有低代码系统。参见图1所示的一种低代码图表生成的方法的流程图，示意出该方法主要包括以下步骤S101至步骤S103：步骤S101：获取图表的图片。
[0023]在一种实施方式中，开发人员可以将图表的图片上传至低代码系统中。
[0024]步骤S102：如果图表的类型属于预先封装好的echarts组件的类型中的一种，则基于图片获取图表的配置参数。
[0025]在一种实施方式中，低代码系统接收到上本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种低代码图表生成的方法，其特征在于，包括：获取图表的图片；如果所述图表的类型属于预先封装好的echarts组件的类型中的一种，则基于所述图片获取所述图表的配置参数；基于所述配置参数和所述图表的类型对应的echarts组件生成图表代码。2.根据权利要求1所述的方法，其特征在于，基于所述图片获取所述图表的配置参数，包括：将所述图片进行图像分割得到坐标区域和数据展示区域；分别对所述坐标区域和所述数据展示区域进行图像识别得到配置参数；其中，所述配置参数至少包括：坐标轴参数和图表选项参数。3.根据权利要求1所述的方法，其特征在于，基于所述配置参数和所述图表的类型对应的echarts组件生成图表代码，包括：将所述配置参数转换成目标格式的配置参数；将所述目标格式的配置参数传入所述图表的类型对应的echarts组件中生成图表代码。4.根据权利要求3所述的方法，其特征在于，将所述目标格式的配置参数传入所述图表的类型对应的echarts组件中生成图表代码，包括：判断所述配置参数是否为echarts原生参数格式；如果否，则对所述配置参数进行解析得到echarts原生参数格式的配置参数，并将所述echarts原生参数格式的配置参数传入所述图表的类型对应的echarts组件中生成图表代码。5.根据权利要求1所述的方法，其特征在于，基于所述配置参数和所述图...

【专利技术属性】
技术研发人员：孙雅宏，赵丹阳，陈楠，韩会娟，李晶晶，
申请(专利权)人：中电信数字城市科技有限公司，
类型：发明
国别省市：