1.本发明涉及计算机技术领域，特别涉及一种数据可视化页面设计器、设计器、设备及介质。
背景技术：2.随着时代进步，各行各业对数据可视化的需求量在不断提升，然而想要快速搭建定制化、高性能的数据可视化页面并不容易，甚至研发时间长、成本高。在此背景下，数据可视化页面设计器孕育而生。它具有个性定制化、配置简易、高性能、现代应用工程化等特点。
3.公开号为cn113849165a，公开日为20211228的中国发明涉及一种基于可视化拖拉且可定制的低代码前端开发框架及方法，属于程序开发领域。本发明的框架包括表单设计器、页面设计器、表格设计器、组件设计器、页面渲染器、代码生成器、发布服务器。低代码前端开发框架能够为业务人员 /开发人员提供前端页面设计、表单设计、组件设计、列表设计、代码生成，实现所见即所得的web页面实现。该发明能实现低代码化，但还不能实现无代码化。
技术实现要素：4.本发明要解决的技术问题，在于提供一种零代码实现数据可视化页面的方法、设计器、设备及介质，可实现无代码的数据可视化页面设计，简单高效，甚至可以让不懂编程技术的人员快速进行可视化页面的开发。
5.第一方面，本发明提供了一种零代码实现数据可视化页面的方法，执行于用vue和ant-design-vue ui搭建的设计器中，所述方法包括：
6.提供数据可视化页面的配置界面，所述配置界面提供了组件列表、画布和组件属性配置面板，供用户通过拖拽所述组件的方式在所述画布上任意移动，并由所述组件属性配置面板通过填写表单的方式对所述组件进行属性配置；所述组件列表由组件库来提供，所述组件库由ant-design-vue ui组件库和echarts图表库为基础进行封装而得；
7.在用户设计完页面并触发一键生成项目功能后，所配置的内容被保存为 json格式数据，并由freemarker生成项目的vue代码，并放入服务器的指定目录下；
8.在一键发布功能被触发后，在所述服务器上自动生成项目、下载项目依赖、打包项目和部署项目，后返回线上项目地址供用户线上访问项目，从而得到生产环境下的页面。
9.第二方面，本发明提供了一种零代码实现数据可视化页面的设计器，其用vue和ant-design-vue ui搭建而成，且包括：
10.组件库，由ant-design-vue ui组件库和echarts图表库为基础进行封装而得，为页面设计器模块提供大量的数据可视化组件；
11.页面设计器模块，提供数据可视化页面的配置界面，所述配置界面提供了组件列表、画布和组件属性配置面板，供用户通过拖拽所述组件的方式在所述画布上任意移动，并由所述组件属性配置面板通过填写表单的方式对所述组件进行属性配置；
12.项目生成模块，用于在用户设计完页面并触发一键生成项目功能后，所配置的内容被保存为json格式数据，并由freemarker生成项目的vue代码，并放入服务器的指定目录下；
13.一键发布模块，用于提供一键发布功能，在设计器的服务器上自动生成项目、下载项目依赖、打包项目和部署项目，后返回线上项目地址供用户线上访问项目，从而得到生产环境下的页面。
14.第三方面，本发明提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现第一方面所述的方法。
15.第四方面，本发明提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现第一方面所述的方法。
16.本发明实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：
17.(1)本发明的设计器采用vue和ant-design-vue ui搭建而成，实现了从“项目”到“页面”的模式，再到对各个页面进行设计，同程序员开发应用的模式，用户无需再进行编码，而是采用“填写表单”的模式进行配置，配置的内容被保存为json格式数据，再由freemarker生成项目的vue代码，是一款完全无代码平台设计器。
18.(2)本发明的设计器以自由布局的便捷方式让用户进行设计页面，可极大提高开发人员的效率，甚至可以让不懂编程技术的人员快速进行可视化页面的开发。
19.(3)本发明的在设计完页面后能一键生成项目，仅将用户使用过的组件添加进行项目中，可以极大减少项目体积，提高页面访问速度。
20.(4)本发明以ant-design-vue ui组件库和echarts图表库为基础进行封装，提供丰富的组件库；同时，提供大量的组件api并集成到设计器中，让设计器仅仅以填写“表单”的形式就可以轻松进行定制个性化数据可视化页面；设计器使用vite打包工具，让在用户完成页面配置后导出项目，也可以拥有一个项目体积小的应用；还提供一键部署功能让项目部署更为便捷。
21.上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。
附图说明
22.下面参照附图结合实施例对本发明作进一步的说明。
23.图1为本发明实施例一中方法中的流程图；
24.图2为本发明实施例的数据可视化页面配置界面的布局示意图；
25.图3为本发明实施例实时预览页面功能键分布的示意图；
26.图4为本发明实施例实时预览页面的状态示意图；
27.图5为本发明实施例一键生成项目功能键分布的示意图；
28.图6为本发明实施例一键生成项目后得到的标准版项目工程文件示意图；
29.图7为本发明实施例二中装置的结构示意图；
30.图8为本发明实施例三中电子设备的结构示意图；
31.图9为本发明实施例四中介质的结构示意图。
具体实施方式
32.本技术实施例通过提供一种零代码实现数据可视化页面的方法、设计器、设备及介质，可实现无代码的数据可视化页面设计，简单高效，甚至可以让不懂编程技术的人员快速进行可视化页面的开发。
33.本技术实施例中的技术方案，总体思路如下：采用vue和ant-design-vueui搭建得到设计器，提供大量的组件api并集成到设计器中，以 ant-design-vue ui组件库和echarts图表库为基础进行封装，提供丰富的组件库；让设计器仅仅以填写“表单”的形式就可以轻松进行定制个性化数据可视化页面，实现了从“项目”到“页面”的模式，用户仅通过填写“表单”的方式即可完成配置，配置的内容被保存为json格式数据，再由freemarker生成项目的vue代码，使用vite打包工具，让在用户完成页面配置后导出项目，用户无需再进行编码，从而实现一款完全无代码平台设计器。
34.实施例一
35.本实施例提供一种零代码实现数据可视化页面的方法，该方法执行于用 vue和ant-design-vue ui搭建的设计器中。
36.如图1所示，所述方法包括：
37.提供数据可视化页面的配置界面，所述配置界面提供了组件列表、画布和组件属性配置面板，供用户通过拖拽所述组件的方式在所述画布上任意移动，并由所述组件属性配置面板通过填写表单的方式对所述组件进行属性配置；所述组件列表由组件库来提供，所述组件库由ant-design-vue ui组件库和echarts图表库为基础进行封装而得；
38.在用户设计完页面并触发一键生成项目功能后，所配置的内容被保存为 json格式数据，并由freemarker生成项目的vue代码，并放入服务器的指定目录(例如ngixn目录)下；
39.在一键发布功能被触发后，在所述服务器上自动生成项目、下载项目依赖、打包项目和部署项目，后返回线上项目地址供用户线上访问项目，从而使用户仅需根据返回的项目进行访问，就可以得到生产环境下的页面。
40.其中，如图2所示，所述配置界面的布局是：左侧区域是组件列表，由组件库提供大量组件，中间区域是画布，用户可以自由对组件进行移动，右侧区域是当前组件的属性配置面板，用户任意配置组件属性。这样用户可以在组件列表拖拽组件的方式放入画布区域，在属性配置面板中进行配置，让用户轻松设计出用户自己想要的效果。
41.如图3所示，在用户设计完页面后还提供实时预览页面的功能，且预览时能对原画布以等比例方式进行缩放操作。设计器中的原画布宽1920像素、长为1080像素，但用户可对其进行缩放，它和市场主流大屏幕的16:9相同。即设计器中的画布是1:1进行进行放大缩小，也就说，用户拖拽在画布上是什么位置和什么的宽高大小，在屏幕上便是什么效果。例如用户配置完成图 2中的内容后，只需要点击预览图标，便可得到如图4的效果。
42.如图5所示，在用户设计完页面并触发一键生成项目功能后，所配置的内容被保存为json格式数据，并由freemarker生成项目的vue代码，但 freemarker并不会将所有的组件打包到项目中，而是根据所配置的内容将用户使用过的组件才会添加进行项目中，这样就能极大缩小项目的体积，如图 6所示，便可以得到vue+vite为基础的标准版项目工程文件，同时在后续打包的过程中，生成的压缩文件用有gz格式，在部署时配置gzip，就可以提
升访问页面速度。
43.所述一键发布功能附带npm工具，vite打包工具，和nginx部署工具，并在所述服务器上使用npm工具下载项目依赖、使用vite打包工具打包项目和使用nginx工具部署项目；且所述打包项目是由vite打包工具将项目代码再次进行编译，编译成html格式、js格式和css格式，让在用户完成页面配置后导出项目。
44.基于同一发明构思，本技术还提供了与实施例一中的方法对应的装置，详见实施例二。
45.实施例二
46.如图7所示，在本实施例中提供了一种零代码实现数据可视化页面的设计器，用vue和ant-design-vue ui搭建而成，且包括：
47.组件库，由ant-design-vue ui组件库和echarts图表库为基础进行封装而得，为页面设计器模块提供大量的数据可视化组件；
48.页面设计器模块，提供数据可视化页面的配置界面，所述配置界面提供了组件列表、画布和组件属性配置面板，供用户通过拖拽所述组件的方式在所述画布上任意移动，并由所述组件属性配置面板通过填写表单的方式对所述组件进行属性配置；
49.项目生成模块，用于在用户设计完页面并触发一键生成项目功能后，所配置的内容被保存为json格式数据，并由freemarker生成项目的vue代码，并放入服务器的指定目录下；
50.一键发布模块，用于提供一键发布功能，在设计器的服务器上自动生成项目、下载项目依赖、打包项目和部署项目，后返回线上项目地址供用户线上访问项目，从而得到生产环境下的页面。
51.其中，如图2所示，所述配置界面的布局是：左侧区域是组件列表，由组件库提供大量组件，中间区域是画布，用户可以自由对组件进行移动，右侧区域是当前组件的属性配置面板，用户任意配置组件属性。这样用户可以在组件列表拖拽组件的方式放入画布区域，在属性配置面板中进行配置，让用户轻松设计出用户自己想要的效果。
52.如图3所示，无码式设计器还包括页面预览模块，在用户设计完页面后即可通过页面预览模块实时预览页面，且预览时能对原画布以等比例方式进行缩放操作。设计器中的原画布宽1920像素、长为1080像素，但用户可对其进行缩放，它和市场主流大屏幕的16:9相同。即设计器中的画布是1:1 进行进行放大缩小，也就说，用户拖拽在画布上是什么位置和什么的宽高大小，在屏幕上便是什么效果。例如用户配置完成图2中的内容后，只需要点击预览图标，便可得到如图4的效果。
53.如图5所示，在用户设计完页面并触发一键生成项目功能后，项目生成模块将所配置的内容被保存为json格式数据，并由freemarker生成项目的 vue代码，但freemarker并不会将所有的组件打包到项目中，而是根据所配置的内容将用户使用过的组件才会添加进行项目中，而抛弃用户未使用过的组件，这样就能极大缩小项目的体积，如图6所示，便可以得到vue+vite为基础的标准版项目工程文件，同时在后续打包的过程中，生成的压缩文件用有gz格式，在部署时配置gzip，就可以提升访问页面速度。
54.所述一键发布模块附带npm工具，vite打包工具，和nginx部署工具，并在所述服务器上使用npm工具下载项目依赖、使用vite打包工具打包项目和使用nginx工具部署项目；
且所述打包项目是由vite打包工具将项目代码再次进行编译，编译成html格式、js格式和css格式，让在用户完成页面配置后导出项目。
55.由于本发明实施例二所介绍的装置，为实施本发明实施例一的方法所采用的装置，故而基于本发明实施例一所介绍的方法，本领域所属人员能够了解该装置的具体结构及变形，故而在此不再赘述。凡是本发明实施例一的方法所采用的装置都属于本发明所欲保护的范围。
56.基于同一发明构思，本技术提供了实施例一对应的电子设备实施例，详见实施例三。
57.实施例三
58.本实施例提供了一种电子设备，如图8所示，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时，可以实现实施例一中任一实施方式。
59.由于本实施例所介绍的电子设备为实施本技术实施例一中方法所采用的设备，故而基于本技术实施例一中所介绍的方法，本领域所属技术人员能够了解本实施例的电子设备的具体实施方式以及其各种变化形式，所以在此对于该电子设备如何实现本技术实施例中的方法不再详细介绍。只要本领域所属技术人员实施本技术实施例中的方法所采用的设备，都属于本技术所欲保护的范围。
60.基于同一发明构思，本技术提供了实施例一对应的存储介质，详见实施例四。
61.实施例四
62.本实施例提供一种计算机可读存储介质，如图9所示，其上存储有计算机程序，该计算机程序被处理器执行时，可以实现实施例一中任一实施方式。
63.本技术实施例提供的方法、装置、系统、设备及介质，至少具有如下技术效果或优点：
64.(1)本发明的设计器采用vue和ant-design-vue ui搭建而成，实现了从“项目”到“页面”的模式，再到对各个页面进行设计，同程序员开发应用的模式，用户无需再进行编码，而是采用“填写表单”的模式进行配置，配置的内容被保存为json格式数据，再由freemarker生成项目的vue代码，是一款完全无代码平台设计器。
65.(2)本发明的设计器以自由布局的便捷方式让用户进行设计页面，可极大提高开发人员的效率，甚至可以让不懂编程技术的人员快速进行可视化页面的开发。
66.(3)本发明的在设计完页面后能一键生成项目，仅将用户使用过的组件添加进行项目中，可以极大减少项目体积，提高页面访问速度。
67.(4)本发明以ant-design-vue ui组件库和echarts图表库为基础进行封装，提供丰富的组件库；同时，提供大量的组件api并集成到设计器中，让设计器仅仅以填写“表单”的形式就可以轻松进行定制个性化数据可视化页面；设计器使用vite打包工具，让在用户完成页面配置后导出项目，也可以拥有一个项目体积小的应用；还提供一键部署功能让项目部署更为便捷。
68.本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机
可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
69.本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/ 或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
70.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
71.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
72.虽然以上描述了本发明的具体实施方式，但是熟悉本技术领域的技术人员应当理解，我们所描述的具体的实施例只是说明性的，而不是用于对本发明的范围的限定，熟悉本领域的技术人员在依照本发明的精神所作的等效的修饰以及变化，都应当涵盖在本发明的权利要求所保护的范围内。
技术特征：1.一种零代码实现数据可视化页面的方法，其特征在于：执行于用vue和ant-design-vue ui搭建的设计器中，所述方法包括：提供数据可视化页面的配置界面，所述配置界面提供了组件列表、画布和组件属性配置面板，供用户通过拖拽所述组件的方式在所述画布上任意移动，并由所述组件属性配置面板通过填写表单的方式对所述组件进行属性配置；所述组件列表由组件库来提供，所述组件库由ant-design-vue ui组件库和echarts图表库为基础进行封装而得；在用户设计完页面并触发一键生成项目功能后，所配置的内容被保存为json格式数据，并由freemarker生成项目的vue代码，并放入服务器的指定目录下；在一键发布功能被触发后，在所述服务器上自动生成项目、下载项目依赖、打包项目和部署项目，后返回线上项目地址供用户线上访问项目，从而得到生产环境下的页面。2.根据权利要求1所述的一种零代码实现数据可视化页面的方法，其特征在于：在生成所述项目的vue代码的过程中，freemarker是根据所配置的内容仅将用户使用过的组件添加进行项目中；所述一键发布功能附带npm工具，vite打包工具，和nginx部署工具，并在所述服务器上使用npm工具下载项目依赖、使用vite打包工具打包项目和使用nginx工具部署项目；且所述打包项目是由vite打包工具将项目代码再次进行编译，编译成html格式、js格式和css格式，让在用户完成页面配置后导出项目。3.根据权利要求1所述的一种零代码实现数据可视化页面的方法，其特征在于：在用户设计完页面后还提供实时预览页面的功能，且预览时能对原画布以等比例方式进行缩放操作。4.根据权利要求1所述的一种零代码实现数据可视化页面的方法，其特征在于：所述配置界面的布局是：左侧区域是组件列表，中间区域是画布，右侧区域是当前组件的属性配置面板。5.一种零代码实现数据可视化页面的设计器，其特征在于：用vue和ant-design-vue ui搭建而成，且包括：组件库，由ant-design-vue ui组件库和echarts图表库为基础进行封装而得，为页面设计器模块提供大量的数据可视化组件；页面设计器模块，提供数据可视化页面的配置界面，所述配置界面提供了组件列表、画布和组件属性配置面板，供用户通过拖拽所述组件的方式在所述画布上任意移动，并由所述组件属性配置面板通过填写表单的方式对所述组件进行属性配置；项目生成模块，用于在用户设计完页面并触发一键生成项目功能后，所配置的内容被保存为json格式数据，并由freemarker生成项目的vue代码，并放入服务器的指定目录下；一键发布模块，用于提供一键发布功能，在设计器的服务器上自动生成项目、下载项目依赖、打包项目和部署项目，后返回线上项目地址供用户线上访问项目，从而得到生产环境下的页面。6.根据权利要求5所述的一种零代码实现数据可视化页面的设计器，其特征在于：在生成所述项目的vue代码的过程中，freemarker是根据所配置的内容仅将用户使用过的组件添加进行项目中；所述一键发布模块附带npm工具，vite打包工具，和nginx部署工具，并在所述服务器上
使用npm工具下载项目依赖、使用vite打包工具打包项目和使用nginx工具部署项目；且所述打包项目是由vite打包工具将项目代码再次进行编译，编译成html格式、js格式和css格式，让在用户完成页面配置后导出项目。7.根据权利要求5所述的一种零代码实现数据可视化页面的设计器，其特征在于：还包括：页面预览模块，用于在用户设计完页面后还提供实时预览页面的功能，且预览时能对原画布以等比例方式进行缩放操作。8.根据权利要求5所述的一种零代码实现数据可视化页面的设计器，其特征在于：所述配置界面的布局是：左侧区域是组件列表，中间区域是画布，右侧区域是当前组件的属性配置面板。9.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至4任一项所述的方法。10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1至4任一项所述的方法。
技术总结本发明提供一种零代码实现数据可视化页面的方法、设计器、设备及介质，方法包括：提供数据可视化页面的配置界面供用户通过拖拽组件方式进行页面布局以及通过填写表单的方式对组件进行属性配置；并通过由ant-design-vueUI组件库和echarts图表库为基础进行封装而得组件库提供大量组件；一键生成项目时，所配置的内容被保存为json格式数据，并由FreeMarker生成项目的vue代码，并放入服务器的指定目录下；在一键发布时，在服务器上自动生成项目、下载项目依赖、打包项目和部署项目，后返回线上项目地址供用户线上访问项目，从而得到生产环境下的页面。可本发明可实现无代码的数据可视化页面设计，简单高效，即使不懂编程技术的人员也能快速进行可视化页面的开发。程技术的人员也能快速进行可视化页面的开发。程技术的人员也能快速进行可视化页面的开发。
技术研发人员：杨辉 黄家昌 裘宗远 詹先威 邱道椿
受保护的技术使用者：福建亿能达信息技术股份有限公司
技术研发日：2022.06.22
技术公布日：2022/11/1
