一种用于批量生成并下载图表的解决方案的制作方法

本发明属于可视化系统，具体为一种用于批量生成并下载图表的解决方案。

背景技术：

1、可视化系统是目前常见的应用系统，该系统直观清晰的利用图表将数据呈现在屏幕上，对于图表渲染并批量导出是现在开发中常见的业务场景：场景1：在做数据统计时，需要渲染大量的图表，其中不免有大量相同的图表配置，开发需重复将冗余的代码写到项目中，随着项目需求的不断迭代和更新优化，冗余代码不可维护，此时需要提前将相同的基础图表配置提取并加以封装；场景2：可视化系统中经常会有批量图表导出的需求，此时需要对每个图表重复开发相同的导出相关代码，之后每添加一张图表都需重复相关操作，长此以往，也会产生大量的冗余代码，此时需要将图表导出以组件形式提取标记再批量导出。

2、现有的echarts图表提供的大量丰富的图表库以及集成好的下载图表的方法，虽然提供了图表的下载方式，但是在实际的使用过程中，仍然存在不足之处，echarts只提供了基础的图表渲染，但是却无法快速的生成需求中的定制化图表，同时图表下载也是将单张图表进行下载并且无法压缩，在需要批量处理图表时，需要耗费大量的时间，产生大量冗余代码，因此需要对此进行改进。

技术实现思路

1、本发明的目的在于提供一种用于批量生成并下载图表的解决方案，以解决上述背景技术中提出的问题。

2、为了实现上述目的，本发明提供如下技术方案：一种用于批量生成并下载图表的解决方案，具体步骤如下：

3、步骤一：

4、以echarts为基础库，搭建基础平台，将其提供的基础配置的图表进行封装，并实现渲染；

5、步骤二：

6、收集日常定制化图表的需求，如颜色，坐标轴和标签等，以表单形式编辑，并实时渲染定制化后的图表，同时将所选值存储至定制化对象中；

7、步骤三：

8、将配置化对象和基础配置对象stringify后分别存入blob对象中，并通过fi le-saver下载以供开发者使用；

9、步骤四：

10、将下载的文件存至项目中，标记前图表用于父组件识别当前属于哪种类型图表，并导出当前图表配置，当前文件夹下构建index.js,通过require.context方法创建key为标记，value为配置函数的对象，对象内容为当前文件夹下的配置文件，用于在setoption识别渲染指定图表，同时封装初始化echarts的hooks，包含获取dom后init视图并setoption图表，根据窗口变化重绘图表等；

11、步骤五：

12、在定制化图表业务组件中，创建自身与基础配置图表相同的标记和自身的ref存与vue的option对象中，导入最初定制化的配置，将配置与标记相同的基础配置文件合并，得到定制化图表渲染，当前业务组件的文件夹下导出所有组件，在业务根组件中通过reactive对象接收批量注册，同时得到的组件数组用于获取指定标记的ref组件；

13、步骤六：

14、下载文件时，可以根据选择的图表类型标记对应每个不同业务组件的标记来进行单图的导出或者全部导出，导出时使用echarts实例提供的getdataurl方法将canvas转为base64，通过jszip将下载的数组图表推入zip实例中，调用generateasync方法，在此方法then回调中对图表进行压缩下载。

15、作为本发明的一种优选技术方案，步骤一、步骤四和步骤六中所述的echarts是一款基于javascript的数据可视化图表库。

16、作为本发明的一种优选技术方案，步骤三中所述的fi le-saver是一个用于生成文件的javascript库。

17、作为本发明的一种优选技术方案，步骤六中所述的jszip是一个用于创建、读取和编辑.zip文件的javascript库。

18、作为本发明的一种优选技术方案，步骤一中所述的基础平台的搭建，提供了多种基础图表，并根据使用者需求定制化图表，同时渲染出效果并下载相关代码，使开发者可快速应用于项目中使用。

19、作为本发明的一种优选技术方案，步骤四和步骤五中所述的组件自身的定义和通过下载得到的配置文件之间通过标记关联的方式，实现了有效分离配置文件，并使得配置文件的复用最大化。

20、作为本发明的一种优选技术方案，步骤五中所述的通过创建自身与基础配置图表相同的标记和自身的ref存与vue的option对象中的方式，能够便于父组件的读取。

21、作为本发明的一种优选技术方案，步骤六中所述的下载和导出方式，弥补echarts单图表下载的不足，在将标记好的业务组件注册后，实现了批量下载。

22、作为本发明的一种优选技术方案，步骤六中所述的压缩下载的方式，能减少文件的占用空间，提高下载的速率。

23、本发明的有益效果如下：

24、本发明提供了快速生成基本图表和定制化图表的平台并提供生成定制化配置代码，开发者将默认配置与定制化配置在项目中分离后，对定制化的组件进行标记，标记后的组件和合并了定制化配置的基本配置进行关联并抛出文件标记变量和配置函数，批量注册子组件，得到的组件数组便于识别组件并通过文件标记关联批量下载压缩图表，具有可根据需求定制想要的图表，极大减少开发时间；定制化图表关联基础配置图表，减少了项目代码的冗余，便于维护和批量下载图表弥补echarts只能单独下载缺陷等优点。

技术特征：

1.一种用于批量生成并下载图表的解决方案，其特征在于，具体步骤如下：

2.根据权利要求1所述的一种用于批量生成并下载图表的解决方案，其特征在于：步骤一、步骤四和步骤六中所述的echarts是一款基于javascript的数据可视化图表库。

3.根据权利要求1所述的一种用于批量生成并下载图表的解决方案，其特征在于：步骤三中所述的file-saver是一个用于生成文件的javascript库。

4.根据权利要求1所述的一种用于批量生成并下载图表的解决方案，其特征在于：步骤六中所述的jszip是一个用于创建、读取和编辑.zip文件的javascript库。

5.根据权利要求1所述的一种用于批量生成并下载图表的解决方案，其特征在于：步骤一中所述的基础平台的搭建，提供了多种基础图表，并根据使用者需求定制化图表，同时渲染出效果并下载相关代码，使开发者可快速应用于项目中使用。

6.根据权利要求1所述的一种用于批量生成并下载图表的解决方案，其特征在于：步骤四和步骤五中所述的组件自身的定义和通过下载得到的配置文件之间通过标记关联的方式，实现了有效分离配置文件，并使得配置文件的复用最大化。

7.根据权利要求1所述的一种用于批量生成并下载图表的解决方案，其特征在于：步骤五中所述的通过创建自身与基础配置图表相同的标记和自身的ref存与vue的option对象中的方式，能够便于父组件的读取。

8.根据权利要求1所述的一种用于批量生成并下载图表的解决方案，其特征在于：步骤六中所述的下载和导出方式，弥补echarts单图表下载的不足，在将标记好的业务组件注册后，实现了批量下载。

9.根据权利要求1所述的一种用于批量生成并下载图表的解决方案，其特征在于：步骤六中所述的压缩下载的方式，能减少文件的占用空间，提高下载的速率。

技术总结
本发明属于可视化系统技术领域，且公开了一种用于批量生成并下载图表的解决方案，具体步骤如下：步骤一：以echarts为基础库，搭建基础平台，将其提供的基础配置的图表进行封装，并实现渲染；步骤二：收集日常定制化图表的需求，以表单形式编辑，并实时渲染定制化后的图表，同时将所选值存储至定制化对象中。本发明提供了快速生成基本图表和定制化图表的平台并提供生成定制化配置代码，开发者将默认配置与定制化配置在项目中分离后，对定制化的组件进行标记，标记后的组件和合并了定制化配置的基本配置进行关联并抛出文件标记变量和配置函数，批量注册子组件，得到的组件数组便于识别组件并通过文件标记关联批量下载压缩图表。

技术研发人员：闫玉春
受保护的技术使用者：北京皮尔布莱尼软件有限公司
技术研发日：
技术公布日：2024/12/17