Solution for generating and downloading charts in batches

Abstract

The invention belongs to the technical field of visualization systems, and discloses a solution for generating and downloading charts.The method comprises the following specific steps that firstly, echarts serve as a basic library, a basic platform is built, and chartsof basic configuration provided by the basic platform is packaged and rendered; and 2, collecting daily chart customization demands, editing the demands in a form form, rendering the customized chart in real time, and storing selected values in a customization object at the same time. The invention provides a platform for quickly generating a basic chart and a customized chart and provides a customized configuration code, and a developer marks customized components after separating default configuration and customized configuration in a project. And associating the marked component with the basic configuration combined with the customized configuration, throwing a file mark variable and a configuration function, registering the sub-components in batches, and obtaining a component array which is convenient for identifying the component and downloading the compressed charts in batches through file mark association.

Description

Technical Field

[0001] The invention belongs to the technical field of visualization systems, and in particular is a solution for batch generating and downloading charts. Background Art

[0002] The visualization system is a common application system at present. The system uses charts to present data on the screen intuitively and clearly. Chart rendering and batch export are common business scenarios in current development: Scenario 1: When doing data statistics, a large number of charts need to be rendered, among which there are inevitably a large number of identical chart configurations. Developers need to repeatedly write redundant code into the project. With the continuous iteration and update optimization of project requirements, redundant code cannot be maintained. At this time, it is necessary to extract and encapsulate the same basic chart configuration in advance; Scenario 2: There is often a demand for batch chart export in the visualization system. At this time, it is necessary to repeatedly develop the same export-related code for each chart. After that, each time a chart is added, the relevant operations need to be repeated. In the long run, a large amount of redundant code will be generated. At this time, it is necessary to export the charts in the form of components, extract the tags, and then export them in batches.

[0003] The existing echarts charts provide a large number of rich chart libraries and integrated methods for downloading charts. Although they provide a way to download charts, there are still some shortcomings in actual use. Echarts only provides basic chart rendering, but cannot quickly generate customized charts as required. At the same time, chart downloads are also downloaded as single charts and cannot be compressed. When batch processing of charts is required, it takes a lot of time and generates a lot of redundant code, so this needs to be improved. Summary of the invention

[0004] The object of the present invention is to provide a solution for batch generating and downloading charts to solve the problems raised in the above background technology.

[0005] In order to achieve the above object, the present invention provides the following technical solution: a solution for batch generating and downloading charts, the specific steps are as follows:

[0006] Step 1:

[0007] Take echarts as the basic library, build the basic platform, encapsulate the basic configuration charts it provides, and realize rendering;

[0008] Step 2:

[0009] Collect daily customized chart requirements, such as colors, axes, and labels, edit them in a form, and render customized charts in real time, while storing the selected values ​​in customized objects;

[0010] Step 3:

[0011] Stringify the configuration object and the basic configuration object and store them in blob objects respectively, and download them through file-saver for developers to use;

[0012] Step 4:

[0013] Save the downloaded file to the project. The chart before marking is used by the parent component to identify which type of chart it is and export the current chart configuration. Build index.js in the current folder and use the require.context method to create an object with key as the tag and value as the configuration function. The object content is the configuration file in the current folder, which is used to identify and render the specified chart in setOption. At the same time, encapsulate the hooks for initializing echarts, including getting the init view after dom and settingOption chart, redrawing the chart according to window changes, etc.

[0014] Step 5:

[0015] In the customized chart business component, create its own tag that is the same as the basic configuration chart and store its own ref in the option object of Vue, import the initial customized configuration, merge the basic configuration file with the same configuration and tag, and get the customized chart rendering. Export all components under the folder of the current business component, receive batch registration through the reactive object in the business root component, and use the obtained component array to get the ref component of the specified tag;

[0016] Step 6:

[0017] When downloading files, you can export a single chart or all of them according to the selected chart type mark corresponding to the mark of each different business component. When exporting, use the getDataURL method provided by the echarts instance to convert the canvas to base64, push the downloaded array chart into the zip instance through JSZip, call the generateAsync method, and compress and download the chart in the then callback of this method.

[0018] As a preferred technical solution of the present invention, echarts described in step 1, step 4 and step 6 is a data visualization chart library based on JavaScript.

[0019] As a preferred technical solution of the present invention, the file-saver described in step 3 is a JavaScript library for generating files.

[0020] As a preferred technical solution of the present invention, JSZip described in step six is ​​a JavaScript library for creating, reading and editing .zip files.

[0021] As a preferred technical solution of the present invention, the construction of the basic platform described in step one provides a variety of basic charts and customizes charts according to user needs, while rendering effects and downloading related codes, so that developers can quickly apply them in projects.

[0022] As a preferred technical solution of the present invention, the definition of the component itself described in step 4 and step 5 and the configuration file obtained by downloading are associated by tags, thereby achieving effective separation of the configuration files and maximizing the reuse of the configuration files.

[0023] As a preferred technical solution of the present invention, the method described in step 5, by creating a mark that is the same as the basic configuration chart and storing its own ref in the option object of vue, can facilitate the reading of the parent component.

[0024] As a preferred technical solution of the present invention, the downloading and exporting method described in step six makes up for the deficiency of single chart downloading of echarts, and realizes batch downloading after registering the marked business components.

[0025] As a preferred technical solution of the present invention, the compressed download method described in step six can reduce the space occupied by the file and increase the download rate.

[0026] The beneficial effects of the present invention are as follows:

[0027] The present invention provides a platform for quickly generating basic charts and customized charts and provides the generation of customized configuration code. After the developer separates the default configuration from the customized configuration in the project, the customized components are marked, the marked components are associated with the basic configuration that incorporates the customized configuration, and file marking variables and configuration functions are thrown out to batch register subcomponents. The obtained component array is convenient for identifying components and batch downloading compressed charts through file marking association, which has the advantages of being able to customize the desired charts according to needs and greatly reducing development time; customized charts are associated with basic configuration charts, which reduces the redundancy of project codes, facilitates maintenance and batch download of charts to make up for the defect that echarts can only download individually, etc. BRIEF DESCRIPTION OF THE DRAWINGS

[0028] Figure 1 It is a flow chart of the present invention. DETAILED DESCRIPTION

[0029] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0030] like Figure 1 As shown, the embodiment of the present invention provides a solution for batch generating and downloading charts, and the specific steps are as follows:

[0031] Step 1:

[0032] Take echarts as the basic library, build the basic platform, encapsulate the basic configuration charts it provides, and realize rendering;

[0033] Step 2:

[0034] Collect daily customized chart requirements, such as colors, axes, and labels, edit them in a form, and render customized charts in real time, while storing the selected values ​​in customized objects;

[0035] Step 3:

[0036] Stringify the configuration object and the basic configuration object and store them in blob objects respectively, and download them through file-saver for developers to use;

[0037] Step 4:

[0038] Save the downloaded file to the project. The chart before marking is used by the parent component to identify which type of chart it is and export the current chart configuration. Build index.js in the current folder and use the require.context method to create an object with key as the tag and value as the configuration function. The object content is the configuration file in the current folder, which is used to identify and render the specified chart in setOption. At the same time, encapsulate the hooks for initializing echarts, including getting the init view after dom and settingOption chart, redrawing the chart according to window changes, etc.

[0039] Step 5:

[0040] In the customized chart business component, create its own tag that is the same as the basic configuration chart and store its own ref in the option object of Vue, import the initial customized configuration, merge the basic configuration file with the same configuration and tag, and get the customized chart rendering. Export all components under the folder of the current business component, receive batch registration through the reactive object in the business root component, and use the obtained component array to get the ref component of the specified tag;

[0041] Step 6:

[0042] When downloading files, you can export a single chart or all of them according to the selected chart type mark corresponding to the mark of each different business component. When exporting, use the getDataURL method provided by the echarts instance to convert the canvas to base64, push the downloaded array chart into the zip instance through JSZip, call the generateAsync method, and compress and download the chart in the then callback of this method.

[0043] By using javascript scripts, a platform for quickly generating charts is provided for development. The basic charts are rendered by default, and the basic chart generation can be customized according to needs. The basic configuration and customization-related code download are provided for the convenience of developers. At the same time, to facilitate project maintenance, developers will separate the customized configuration and the basic configuration into components, and mark the components with names to achieve the purpose of quickly generating multiple charts and identifying the specified chart downloads. This can greatly improve development efficiency and improve the maintainability of the project.

[0044] Among them, echarts in step 1, step 4 and step 6 is a data visualization chart library based on JavaScript.

[0045] Based on echarts, it can provide intuitive, vivid and interactive data visualization charts.

[0046] Among them, file-saver in step 3 is a JavaScript library for generating files.

[0047] By using file-saver, you can download the configured objects and basic configuration objects stored in the blob object into the required file format.

[0048] Among them, JSZip in step 6 is a JavaScript library for creating, reading and editing .zip files.

[0049] The use of JSZip not only enables the download of files, but also allows the reading of existing zip files, thus improving the convenience of use.

[0050] Among them, the construction of the basic platform in step one provides a variety of basic charts and customizes charts according to user needs. At the same time, it renders the effects and downloads related codes, so that developers can quickly apply them in projects.

[0051] After the customized icon platform is successfully built, the developer's work efficiency in chart rendering can be greatly improved, thereby saving rendering and development time and improving the developer's user experience.

[0052] Among them, the definitions of the components themselves in step 4 and step 5 and the configuration files obtained by downloading are associated by tags, thereby achieving effective separation of the configuration files and maximizing the reuse of the configuration files.

[0053] The association between configuration files and business components can reduce the redundancy of project codes, thereby improving the convenience of project maintenance.

[0054] Among them, in step 5, by creating its own mark that is the same as the basic configuration chart and storing its own ref in the option object of vue, it can be easily read by the parent component.

[0055] After being read by the parent component, it can be determined which type of chart it belongs to.

[0056] Among them, the download and export method in step six makes up for the shortcomings of echarts single chart download, and realizes batch download after registering the marked business components.

[0057] After subsequent maintenance and construction component marking, it can be downloaded directly, which can improve development efficiency and code reuse, improve code usage efficiency and reduce code rewriting.

[0058] Among them, the compressed download method in step six can reduce the space occupied by the file and increase the download rate.

[0059] By compressing files for download, you can improve file transfer efficiency and reduce data loss during the transmission process, thereby ensuring data integrity.

[0060] It should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device.

[0061] Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present invention, and that the scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. A solution for batch generation and downloading of charts, characterized in that: The specific steps are as follows: Step 1: Take echarts as the basic library, build the basic platform, encapsulate the basic configuration charts it provides, and realize rendering; Step 2: Collect daily customized chart requirements, such as colors, axes, and labels, edit them in a form, and render customized charts in real time, while storing the selected values ​​in customized objects; Step 3: Stringify the configuration object and the basic configuration object and store them in blob objects respectively, and download them through file-saver for developers to use; Step 4: Save the downloaded file to the project. The chart before marking is used by the parent component to identify which type of chart it is and export the current chart configuration. Build index.js in the current folder and use the require.context method to create an object with key as the tag and value as the configuration function. The object content is the configuration file in the current folder, which is used to identify and render the specified chart in setOption. At the same time, encapsulate the hooks for initializing echarts, including getting the init view after dom and settingOption chart, redrawing the chart according to window changes, etc. Step 5: In the customized chart business component, create its own tag that is the same as the basic configuration chart and store its own ref in the option object of Vue, import the initial customized configuration, merge the basic configuration file with the same configuration and tag, and get the customized chart rendering. Export all components under the folder of the current business component, receive batch registration through the reactive object in the business root component, and use the obtained component array to get the ref component of the specified tag; Step 6: When downloading files, you can export a single chart or all of them according to the selected chart type mark corresponding to the mark of each different business component. When exporting, use the getDataURL method provided by the echarts instance to convert the canvas to base64, push the downloaded array chart into the zip instance through JSZip, call the generateAsync method, and compress and download the chart in the then callback of this method.

2. A solution for batch generating and downloading charts according to claim 1, characterized in that: The echarts described in steps 1, 4, and 6 is a data visualization chart library based on JavaScript.

3. A solution for batch generating and downloading charts according to claim 1, characterized in that: The file-saver described in step 3 is a JavaScript library for generating files.

4. A solution for batch generating and downloading charts according to claim 1, characterized in that: JSZip, described in Step 6, is a JavaScript library for creating, reading, and editing .zip files.

5. A solution for batch generating and downloading charts according to claim 1, characterized in that: The construction of the basic platform described in step 1 provides a variety of basic charts and customizes charts according to user needs. It also renders the effects and downloads related codes so that developers can quickly apply them to their projects.

6. A solution for batch generating and downloading charts according to claim 1, characterized in that: The definitions of the components described in step 4 and step 5 and the configuration files obtained by downloading are associated with each other through tags, thereby achieving effective separation of the configuration files and maximizing the reuse of the configuration files.

7. A solution for batch generating and downloading charts according to claim 1, characterized in that: As described in step 5, by creating the same mark as the basic configuration chart and storing its own ref in the option object of vue, it is easy to read the parent component.

8. A solution for batch generating and downloading charts according to claim 1, characterized in that: The download and export method described in step six makes up for the deficiency of single chart download of echarts. After registering the marked business components, batch download is realized.

9. A solution for batch generating and downloading charts according to claim 1, characterized in that: The compressed download method described in step six can reduce the space occupied by the file and increase the download speed.

Images