CN-121979605-A - Method, system and equipment for generating ECharts chart resources based on server

CN121979605ACN 121979605 ACN121979605 ACN 121979605ACN-121979605-A

Abstract

The invention discloses a method, a system and equipment for generating ECharts chart resources based on a server. The method is executed in a node. Js environment and comprises the steps of receiving and analyzing a chart generation request, loading ECharts a configuration template, obtaining original data, generating a complete configuration item after standardized processing, creating a virtual DOM environment and container elements through JSDOM, creating an off-screen Canvas based on Canvas, initializing ECharts an instance and executing rendering, encoding a rendering result into an image data stream, and carrying out format adaptation and distribution according to the terminal type. The invention also provides mechanisms of cross-end consistency guarantee, block rendering optimization, intelligent distribution and the like. The invention realizes complete decoupling of ECharts and the server environment, can efficiently generate static chart resources, supports large data volume processing, ensures cross-terminal display consistency, and remarkably improves chart generation performance, safety and application range.

Inventors

Wei Chuanqiang
SONG YAO
ZHANG YANG
SI JUNBO

Assignees

山东齐鲁壹点传媒有限公司
山东数字文化集团有限公司

Dates

Publication Date: 20260505
Application Date: 20260121

Claims (9)

1. The method for generating ECharts chart resources based on the server side is characterized by being executed in a node. Js service environment and comprises the following steps: S1, receiving and analyzing a chart generation request, and acquiring a chart type identifier, a data parameter set and an output configuration parameter; S2, loading a corresponding ECharts basic configuration template according to the chart type identifier, acquiring an original data set from a data source based on the data parameter set, generating standardized chart data after the standardized processing of the original data set, and injecting the standardized chart data into the basic configuration template to generate a complete ECharts configuration item; s3, creating a virtual document object model environment containing a window object and a document object at a server through a JSDOM library, and creating a container element with a specified size in the environment; S4, creating an off-screen Canvas based on a Canvas library, initializing ECharts an instance by taking a container element as a rendering container, loading a complete ECharts configuration item into ECharts instance, and executing chart rendering; s5, monitoring a rendering completion event, and encoding a rendering result into an image data stream through a Canvas context interface; S6, carrying out format adaptation and output distribution on the image data stream according to the terminal type identifier in the request.
2. The method for generating ECharts chart resources based on the server according to claim 1, wherein step S2 further includes a cross-end consistency guarantee step: Establishing a standard palette library and a standard font library, wherein the standard palette library comprises a predefined palette set, and the standard font library comprises a cross-platform compatible font file; before chart rendering, corresponding color configurations and font configurations are loaded from a standard palette library and a standard font library and uniformly applied to ECharts configuration items.
3. The method for generating ECharts chart resources based on the server according to claim 1, wherein the normalization process of the original dataset in step S2: The method comprises at least one of data cleaning, data conversion, data aggregation and data formatting, and further comprises the steps of carrying out hash calculation on the generated complete ECharts configuration items to generate configuration hash values, and inquiring and updating a cache system based on the configuration hash values.
4. The method for generating ECharts chart resources based on the server according to claim 1, wherein step S4 further includes: When the data amount of the standardized chart data exceeds a preset threshold value, executing block rendering optimization, specifically: An optimization function is established which aims at minimizing the total rendering time, wherein the optimization function is f (B) = Beil (N/B) x t (B), N is the total data amount, B is the block size, beil (N/B) is the block number (i.e. the result of N/B division is rounded upwards), t (B) is a rendering time-consuming prediction function, and the optimal block size is obtained by solving under the constraint condition B is less than or equal to M, wherein M is the single rendering memory safe capacity of the system; Dividing the standardized chart data into a plurality of data blocks according to the optimal block size, sequentially rendering each data block, and synthesizing rendering results on a target canvas.
5. The method for generating ECharts a graph resources based on a server according to claim 4, wherein the method for calculating the rendering time-consuming prediction function t (B) is as follows: The method is based on historical rendering data and established through regression analysis, and the function form is t (B) =a.B2+b.B+c, wherein coefficients a, B and c are obtained through least square fitting.
6. The method for generating ECharts a graph resources based on a server according to claim 4, wherein the block rendering process specifically performs the following operations: Creating a main target canvas and a rendering context; Sequentially processing each data block, and executing for each data block, namely acquiring a temporary ECharts instance, loading a simplified configuration item containing the current data block, executing rendering on a temporary canvas to generate a partial image, drawing the partial image to a corresponding area of a main target canvas, and releasing temporary resources; After all the data blocks are processed, coordinate axes, legends and title global style elements are added on the main target canvas uniformly.
7. The method for generating ECharts chart resources based on the server according to claim 1, wherein the format adaptation and output distribution in step S6 includes: When the terminal type is identified as a mail client, encoding the image data stream into a Base64 format and embedding the image data stream into a hypertext markup language mail body, and simultaneously generating a standby cloud storage link; When the terminal type is identified as the mobile terminal application, generating a multi-resolution image set according to the pixel density of the equipment, distributing the multi-resolution image set through a content distribution network and returning to a uniform resource locator list; when the terminal type is identified as a printing system, a high resolution portable document format or scalable vector graphics format file is generated.
8. A system for generating ECharts chart resources based on a server, comprising: The request processing module is used for receiving an external chart generation request and executing identity authentication, parameter verification and request distribution; the configuration and calculation module is used for managing ECharts a configuration template library, connecting a data source and executing data acquisition, processing and configuration item generation; The intelligent rendering optimizer is used for executing block optimization calculation according to the data scale and the system state, and determining an optimal rendering strategy; The virtual rendering executor is used for managing the virtual document object model environment instance pool and the ECharts instance pool and executing specific chart rendering operation; and the resource processing and distributing device is used for encoding the rendering result into a static image resource and carrying out format adaptation and distribution according to the terminal type.
9. A computer readable storage medium, on which a computer program is stored, characterized in that the program, when being executed by a processor, implements the method according to any one of claims 1 to 7.

Description

Method, system and equipment for generating ECharts chart resources based on server Technical Field The invention relates to the technical field of data visualization and back-end service, in particular to a method, a system and equipment for generating ECharts chart resources based on a server. Background ECharts is used as an open source visual chart library based on JavaScript, and is widely applied to the field of WeB front-end data display. Traditional ECharts chart generation is completely dependent on a browser environment, and the workflow mainly comprises the steps of binding the chart to a document object model container through a JavaScript call eCharts. Init method, converting and layout calculating data inside ECharts to generate a virtual graphic representation, and finally drawing the chart on a screen by using a Canvas or SVG rendering pipeline provided by a browser. The prior art scheme has the following main defects: the problem of strong environment dependency is that the system must be operated in a complete browser environment, cannot work independently from a browser, and limits the application in a server and an offline environment. Static resource generation is difficult, and a traditional dynamic rendering mode is difficult to directly derive static formats such as portable network graphics, scalable vector graphics and the like, so that application limitation is caused in non-WeB environments such as emails, portable document format reports, mobile applications and the like. The performance pressure of the client is high, namely, all data calculation and graphic rendering are carried out on the client of the user, and particularly when a large-scale data set is processed, a large amount of computing resources and memory of the client are consumed, so that page response is slow and even crashes. The cross-platform display is inconsistent, namely, different browsers, different operating systems and different devices have different realization of graphic rendering, so that the same chart is inconsistent in display effect on different clients, and the user experience and the accuracy of data interpretation are affected. The data security risk is that the original data needs to be transmitted to the front end for rendering through a network, and the risk of data leakage exists, especially for sensitive financial data, medical data and the like. The existing alternatives comprise using a headless browser to render a server, but the method has the problems of high resource expense, low starting speed and poor concurrent processing capability. Another solution is to directly use Canvas such as node-Canvas to realize libraries, but the technical challenges of poor compatibility with high-version node.js environments and inability to fully support ECharts all high-level functions are faced. Disclosure of Invention In order to solve the above problems, the present invention provides a method for generating ECharts graph resources based on a server, where the method is executed in a node. Js service environment, and includes the following core steps: S1, receiving and analyzing a chart generation request, and acquiring a chart type identifier, a data parameter set and an output configuration parameter; S2, loading a corresponding ECharts basic configuration template according to the chart type identifier, acquiring an original data set from a data source based on the data parameter set, generating standardized chart data after the standardized processing of the original data set, and injecting the standardized chart data into the basic configuration template to generate a complete ECharts configuration item; s3, creating a virtual document object model environment containing a window object and a document object at a server through a JSDOM library, and creating a container element with a specified size in the environment; S4, creating an off-screen Canvas based on a Canvas library, initializing ECharts an instance by taking a container element as a rendering container, loading a complete ECharts configuration item into ECharts instance, and executing chart rendering; s5, monitoring a rendering completion event, and encoding a rendering result into an image data stream through a Canvas context interface; S6, carrying out format adaptation and output distribution on the image data stream according to the terminal type identifier in the request. Preferably, the step S2 further includes a cross-end consistency guaranteeing step: Establishing a standard palette library and a standard font library, wherein the standard palette library comprises a predefined palette set, and the standard font library comprises a cross-platform compatible font file; before chart rendering, corresponding color configurations and font configurations are loaded from a standard palette library and a standard font library and uniformly applied to ECharts configuration items. Preferably, the normalization of the original da