Method, system, device and readable storage medium for implementing 3D pie chart

Abstract

The present invention discloses a method, system, device and medium for realizing 3D pie chart, creates an HTML page, embeds javascript scripts echarts.js, echarts‑gl.js and echarts‑pie3d.js into the HTML page through the script tag; adds a DIV element to the HTML page, and creates the DIV element as an echarts instance through echarts; creates the configuration items required for the 3D pie chart, and assigns the configuration items to the echarts instance, and echarts‑pie3d.js generates the corresponding 3D pie chart on the HTML interface. The present invention supplements the 3D pie chart that echarts lacks, and enriches the data display mode of echarts.

Description

Technical Field

[0001] The present invention belongs to the technical field of data visualization front-end display, and specifically relates to a method, system, device and readable storage medium for realizing a 3D pie chart based on echarts. Background Art

[0002] In the era of big data, with the advancement of informatization and the exponential growth of data, traditional data reports and tables can no longer intuitively display data patterns. Only through data visualization can we understand the patterns of large amounts of data. echarts is a basic tool library for data visualization, which provides a variety of chart display methods. Based on echarts, you can develop a gorgeous data visualization scene interface.

[0003] Although echarts has built-in various chart display methods, after several versions of iteration, echarts has not provided 3D pie charts. According to the official statement, 3D pie charts cannot be used for accurate data comparison due to visual differences, so 3D pie charts are not provided and are not recommended for use in data visualization projects. However, in data visualization projects, there are more or less some data display requirements for 3D pie charts. In general, the solution is to introduce other basic tool libraries with 3D pie charts, which will not only make the project volume too large, but also cause incompatible chart styles. Summary of the invention

[0004] The purpose of the present invention is to provide a method, system, device and readable storage medium for implementing a 3D pie chart based on echarts to overcome the defects of the prior art. The present invention supplements the 3D pie chart that is missing in echarts and enriches the data display method of echarts.

[0005] In order to achieve the above object, the present invention adopts the following technical scheme:

[0006] A method for implementing a 3D pie chart, the method comprising:

[0007] Create an HTML page and embed the JavaScript scripts echarts.js, echarts-gl.js and echarts-pie3d.js into the HTML page through the script tag;

[0008] Add a DIV element to the HTML page, and create an echarts instance from the DIV element through echarts;

[0009] Create the configuration items required for the 3D pie chart and assign the configuration items to the echarts instance. echarts-pie3d.js will generate the corresponding 3D pie chart on the HTML interface.

[0010] Among them, the script echarts.js is the main functional module of echarts, the script echarts-gl.js is the standard 3D chart functional module, and the script echarts-pie3d.js is the main functional module for drawing 3D pie charts.

[0011] Furthermore, the creation process of the script echarts-pie3d.js is specifically as follows:

[0012] Embed the JavaScript scripts echarts.js and echarts-gl.js into the new HTML page through the script tag;

[0013] Create an echarts-pie3d.js file, which implements two necessary interfaces for extending the echarts component: echarts.extendChartView for creating a 3D pie chart interface and echarts.extendSeriesModel for processing 3D pie chart data configuration; the echarts.extendChartView includes a render function for drawing a specific 3D pie chart graphic, and the echarts.extendSeriesModel includes a getInitialData function for standardizing 3D pie chart graphic data, a defaultOption function for returning a default configuration item of a 3D pie chart, and an optionUpdated function for processing graphic data after a configuration item is changed; the configuration item includes the data of the 3D pie chart data and the hollowness space of the 3D pie chart;

[0014] Create a fan generator using configuration items;

[0015] Create an instance of echarts in the render function, and then create several surface component configuration items according to the data of the 3D pie chart. Generate the fan surface equation through the fan generator, and assign the fan surface equation to the surface component configuration item. Merge the surface component configuration items into the echarts overall configuration, and assign the echarts overall configuration to the echarts instance through the echarts.setOption function to complete the creation of the script echarts-pie3d.js.

[0016] Furthermore, the configuration item further includes the maximum height height of the 3D pie chart sector, the viewing distance distance of the 3D pie chart, the elevation angle alpha of the 3D pie chart, and the color color of the 3D pie chart.

[0017] Furthermore, creating a sector generator using the data data of the 3D pie chart specifically involves:

[0018] Sum the data within the data data of the 3D pie chart, then sort it, and calculate the proportion of each data in the data sum. Based on the proportion, calculate the starting angle and ending angle of the data. The specific formulas are as follows:

[0019]

[0020] start = (end÷2π - d i )×2π

[0021] where n is the number of data in data, d i is the value of each item in data, start is the starting angle of the data, and end is the ending angle of the data;

[0022] Let the parameters of the sector surface equation be u, v, k, d i , where u is the angle of the sector, v is the radius of the sector, k is the hollowness of the 3D pie chart, di is a specific value, u ∈ (-π, 3π), v ∈ (0, 2π);

[0023] The function f(x) with respect to u, v is:

[0024] When u < start, the function f(x) is:

[0025] f(x) = cos(start)×(1 + cos(v)×k)

[0026] When u > end, the function f(x) is:

[0027] f(x) = cos(end)×(1 + cos(v)×k)

[0028] In other cases, the function f(x) is:

[0029] f(x) = cos(u)×(1 + cos(v)×k)

[0030] The function f(y) with respect to u, v is:

[0031] When u < start, the function f(y) is:

[0032] f(y) = sin(start)×(1 + cos(v)×k)

[0033] When u>end, the function f(y) is:

[0034] f(y)=sin(end)×(1+cos(v)×k)

[0035] In other cases, the function f(y) is:

[0036] f(y)=sin(u)×(1+cos(v)×k)

[0037] The function f(z) about u and v is:

[0038] When u<-0.5π, the function f(z) is:

[0039] f(z)=sin(u)

[0040] When u>2.5π, the function f(z) is:

[0041] f(z)=sin(u)×d i ×0.1

[0042] In other cases, when sin(u)≥0, the function f(z) is:

[0043] f(z)=d i ×0.1

[0044] When sin(u)>0, the function f(z) is:

[0045] f(z)=-1

[0046] Create a fan generator based on the surface parameter equations f(x), f(y) and f(z) described above.

[0047] The system for implementing 3D pie chart includes:

[0048] Create and embed module: used to create HTML pages, and embed the JavaScript scripts echarts.js, echarts-gl.js and echarts-pie3d.js into HTML pages through the script tag;

[0049] echarts instance creation module: used to add DIV elements to HTML pages, and create DIV elements as echarts instances through echarts;

[0050] 3D pie chart generation module: used to create the configuration items required for 3D pie charts, and assign the configuration items to the echarts instance. echarts-pie3d.js generates the corresponding 3D pie chart on the HTML interface;

[0051] Among them, the script echarts.js is the main functional module of echarts, the script echarts-gl.js is the standard 3D chart functional module, and the script echarts-pie3d.js is the main functional module for drawing 3D pie charts.

[0052] Furthermore, the creation process of the script echarts-pie3d.js is specifically as follows:

[0053] Embed the JavaScript scripts echarts.js and echarts-gl.js into the new HTML page through the script tag;

[0054] Create an echarts-pie3d.js file, which implements two necessary interfaces for extending the echarts component: echarts.extendChartView for creating a 3D pie chart interface and echarts.extendSeriesModel for processing 3D pie chart data configuration; the echarts.extendChartView includes a render function for drawing a specific 3D pie chart graphic, and the echarts.extendSeriesModel includes a getInitialData function for standardizing 3D pie chart graphic data, a defaultOption function for returning a default configuration item of a 3D pie chart, and an optionUpdated function for processing graphic data after a configuration item is changed; the configuration item includes the data of the 3D pie chart data and the hollowness space of the 3D pie chart;

[0055] Create a fan generator using configuration items;

[0056] Create an instance of echarts in the render function, and then create several surface component configuration items according to the data of the 3D pie chart. Generate the fan surface equation through the fan generator, and assign the fan surface equation to the surface component configuration item. Merge the surface component configuration items into the echarts overall configuration, and assign the echarts overall configuration to the echarts instance through the echarts.setOption function to complete the creation of the script echarts-pie3d.js.

[0057] Further, the configuration item further includes the maximum height height of the 3D pie chart sector, the visible distance distance of the 3D pie chart, the elevation angle alpha of the 3D pie chart, and the color color of the 3D pie chart.

[0058] Further, creating a sector generator using the data data of the 3D pie chart specifically includes:

[0059] Sum the data in the data of the 3D pie chart, then sort it, and calculate the proportion of each data in the data sum. Calculate the starting angle and ending angle of the data according to the proportion. The specific formulas are as follows:

[0060]

[0061] start = (end÷2π - d i )×2π

[0062] where n is the number of data in data, d i is the value of each item in data, start is the starting angle of the data, and end is the ending angle of the data;

[0063] Let the parameters of the sector surface equation be u, v, k, d i , where u is the angle of the sector, v is the radius of the sector, k is the hollowness of the 3D pie chart, di is a specific value, u ∈ (-π, 3π), v ∈ (0, 2π);

[0064] The function f(x) with respect to u, v is:

[0065] When u < start, the function f(x) is:

[0066] f(x) = cos(start)×(1 + cos(v)×k)

[0067] When u > end, the function f(x) is:

[0068] f(x) = cos(end)×(1 + cos(v)×k)

[0069] In other cases, the function f(x) is:

[0070] f(x) = cos(u)×(1 + cos(v)×k)

[0071] The function f(y) with respect to u, v is:

[0072] When u < start, the function f(y) is:

[0073] f(y) = sin(start)×(1 + cos(v)×k)

[0074] When u>end, the function f(y) is:

[0075] f(y)=sin(end)×(1+cos(v)×k)

[0076] In other cases, the function f(y) is:

[0077] f(y)=sin(u)×(1+cos(v)×k)

[0078] The function f(z) about u and v is:

[0079] When u<-0.5π, the function f(z) is:

[0080] f(z)=sin(u)

[0081] When u>2.5π, the function f(z) is:

[0082] f(z)=sin(u)×d i ×0.1

[0083] In other cases, when sin(u)≥0, the function f(z) is:

[0084] f(z)=d i ×0.1

[0085] When sin(u)>0, the function f(z) is:

[0086] f(z)=-1

[0087] Create a fan generator based on the surface parameter equations f(x), f(y) and f(z) described above.

[0088] A computer device comprises a memory, a processor and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the method for implementing a 3D pie chart when executing the computer program.

[0089] A computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the method for realizing a 3D pie chart are realized.

[0090] Compared with the prior art, the present invention has the following beneficial technical effects:

[0091] The present invention adds the function of 3D pie chart to the echarts data visualization tool library, further enriches the use scenarios of echarts in data visualization, and brings better experience and visual impact. The present invention follows the echarts component development standard to deeply encapsulate the complex 3D pie chart implementation method, simplifies the usage, and the user can create a 3D pie chart like using a standard echarts component. When developing data visualization, it can show consistent component implementation code, improve the readability of the code, and the maintainability of the project. BRIEF DESCRIPTION OF THE DRAWINGS

[0092] The drawings in the specification are used to provide further understanding of the present invention and constitute a part of the present invention. The schematic embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute improper limitations on the present invention.

[0093] Figure 1 To create a flowchart for echarts-pie3d.js;

[0094] Figure 2 Flowchart for creating 3D pie chart using echarts-pie3d.js;

[0095] Figure 3 The final 3D pie chart created. DETAILED DESCRIPTION

[0096] In order to enable those skilled in the art to better understand the scheme of the present invention, the technical scheme in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings 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 should fall within the scope of protection of the present invention.

[0097] It should be noted that the terms "first", "second", etc. in the specification and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units that are clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0098] The echarts data visualization tool library itself does not support 3D pie charts, but through its built-in surface component, 3D surfaces can be freely drawn. The present invention uses the surface component to generate sectors through data and surface equations, and can set the size, height and color of each sector, and then combine the sectors to simulate a 3D pie chart.

[0099] In summary, the method of implementing a 3D pie chart based on echarts includes the following steps:

[0100] Step 1:

[0101] To realize a 3D pie chart based on echarts, you first need to build the echarts development environment. The specific construction method is as follows:

[0102] In the HTML interface, embed the javascript scripts echarts.js and echarts-gl.js into the HTML page. These two scripts provide support for basic functions. Only based on these two functions can the function development of 3D pie chart be carried out.

[0103] Step 2:

[0104] Create the echarts-pie3d.js framework, and then add the interface methods echarts.extendChartView and echarts.extendSeriesModel for echarts plug-in access in the echarts-pie3d.js framework. The render function of echarts.extendChartView is used for drawing specific 3D pie charts; the getInitialData function of echarts.extendSeriesModel is used for standardization of pie chart graphic data, the defaultOption function is used to return the default configuration items of the 3D pie chart, and the optionUpdated function is used to process data after the configuration items are changed. Here, we only initialize echarts-pie3d.js. For the render function, we only need to create the name of the function, and the following steps will implement the content.

[0105] Step 3:

[0106] Implement the defaultOption function in the echarts.extendSeriesModel method of echarts - pie3d.js. This function returns the default configuration items for the 3D pie chart, where space is the hollowness of the 3D pie chart; height is the maximum height of the fan - shaped surface of the 3D pie chart; distance is the visible distance of the 3D pie chart; alpha is the elevation angle of the 3D pie chart; data is the data of the 3D pie chart; color is the color of the 3D pie chart, as shown in the following table:

[0107] Configuration items illustrate space Hollowness of 3D pie chart height Maximum height of 3D pie chart sectors distance 3D pie chart viewing distance alpha 3D pie chart elevation data 3D pie chart data color Colors of 3D pie chart

[0108] Step 4:

[0109] In this step, a fan - shaped surface generator is created through data and a surface equation. The specific implementation steps are as follows:

[0110] First, sum the data in data from step 3, then sort it, and calculate the proportion of each data in the sum of the data. Calculate the starting angle and ending angle of the data according to the proportion. The specific formulas are as follows:

[0111]

[0112] start=(end÷2π - d i )×2π

[0113] where n is the number of data in data, d i is the value of each item in data, start is the starting angle of the data, and end is the ending angle of the data;

[0114] Then, set the parameters u, v, k, d of the surface equation i . Among them, u∈(-π, 3π), v∈(0, 2π).

[0115] u is the angle of the fan - shaped surface, v is the radius of the fan - shaped surface, k is the space attribute defined in step 3, d i is a specific value.

[0116] Then, the function f(x) about u, v is:

[0117] When u < start, the function is:

[0118] f(x)=cos(start)×(1 + cos(v)×k)

[0119] When u > end, the function is:

[0120] f(x)=cos(end)×(1 + cos(v)×k)

[0121] In other cases, the function is:

[0122] f(x) = cos(u) × (1 + cos(v) × k)

[0123] The function f(y) with respect to u and v is:

[0124] When u < start, the function is:

[0125] f(y) = sin(start) × (1 + cos(v) × k)

[0126] When u > end, the function is:

[0127] f(y) = sin(end) × (1 + cos(v) × k)

[0128] In other cases, the function is:

[0129] f(y) = sin(u) × (1 + cos(v) × k)

[0130] The function f(z) with respect to u and v is:

[0131] When u < -0.5π, the function is:

[0132] f(z) = sin(u)

[0133] When u > 2.5π, the function is:

[0134] f(z) = sin(u) × d i ×0.1

[0135] In other cases, when sin(u) ≥ 0, the function is:

[0136] f(z) = d i ×0.1

[0137] When sin(u) > 0, the function is:

[0138] f(z) = -1

[0139] Create a sector generator according to the surface parametric equations f(x), f(y), and f(z) described above.

[0140] Step 5:

[0141] Implement the render function in Step 2. First, obtain the specific DIV element through the api parameter passed in the render function, and then create an echarts instance on this DIV element.

[0142] Next, create several surface component configuration items according to the data defined in step 3, where name is the name of the surface component configuration item; type is the type of the surface component configuration item; parametric is whether to use surface equations to create images; wireframe is whether to display grid lines; and parametricEquation is the specific surface equation created based on the data.

[0143] Then create an echarts overall configuration, where boxHeight is the maximum height of the 3D pie chart, viewControl is the relevant configuration of the 3D graphics camera, and the distance and alpha properties defined in step 3 need to be used here to define the distance and elevation of the 3D pie chart.

[0144] Finally, add the surface component configuration item to the echarts overall configuration and assign the configuration to the echarts instance through the setOption method.

[0145] At this point, the script echarts-pie3d.js has been created. For details, see Figure 1 .

[0146] Step 6:

[0147] Create an HTML page and embed the javascript scripts echarts.js, echarts-gl.js, and echarts-pie3d.js into the page through the script tag. echarts-pie3d.js is the 3D pie chart plug-in based on echarts created in steps 1 to 5.

[0148] Add a DIV element to the HTML page and create an echarts instance through echarts.

[0149] According to the configuration item definition in step 3, create the configuration required for the 3D pie chart and assign the configuration to the echarts instance. At this time, echarts-pie3d.js will generate the corresponding 3D pie chart on the interface. For the specific usage process, see Figure 2 The final generated 3D pie chart is shown in Figure 3 .

[0150] The present invention also provides a system for realizing a 3D pie chart based on echarts, comprising:

[0151] Create and embed module: used to create HTML pages, and embed the JavaScript scripts echarts.js, echarts-gl.js and echarts-pie3d.js into HTML pages through the script tag;

[0152] echarts instance creation module: used to add DIV elements to HTML pages, and create DIV elements as echarts instances through echarts;

[0153] 3D pie chart generation module: used to create the configuration items required for 3D pie charts, and assign the configuration items to the echarts instance. echarts-pie3d.js generates the corresponding 3D pie chart on the HTML interface;

[0154] Among them, the script echarts.js is the main functional module of echarts, the script echarts-gl.js is the main functional module for drawing 3D, and the script echarts-pie3d.js is the main functional module for drawing 3D pie charts.

[0155] Those skilled in the art will appreciate that embodiments of the present invention may be provided as methods, systems, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0156] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0157] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0158] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0159] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention rather than to limit its protection scope. Although the present invention has been described in detail with reference to the above embodiments, ordinary technicians in the field should understand that after reading the present invention, those skilled in the art can still make various changes, modifications or equivalent substitutions to the specific implementation methods of the invention, but these changes, modifications or equivalent substitutions are all within the protection scope of the pending claims of the invention.

Claims

1. A method for implementing a 3D pie chart, characterized in that: The method comprises: Create an HTML page and embed the JavaScript scripts echarts.js, echarts-gl.js and echarts-pie3d.js into the HTML page through the script tag; Add a DIV element to the HTML page, and create an echarts instance from the DIV element through echarts; Create the configuration items required for the 3D pie chart and assign them to the echarts instance. echarts-pie3d.js will generate the corresponding 3D pie chart on the HTML interface. Among them, the script echarts.js is the main functional module of echarts, the script echarts-gl.js is the standard 3D chart functional module, and the script echarts-pie3d.js is the main functional module for drawing 3D pie charts; The creation process of the script echarts-pie3d.js is as follows: Embed the JavaScript scripts echarts.js and echarts-gl.js into the new HTML page through the script tag; Create an echarts-pie3d.js file, which implements two necessary interfaces for extending the echarts component: echarts.extendChartView for creating a 3D pie chart interface and echarts.extendSeriesModel for processing 3D pie chart data configuration; the echarts.extendChartView includes a render function for drawing a specific 3D pie chart graphic, and the echarts.extendSeriesModel includes a getInitialData function for standardizing 3D pie chart graphic data, a defaultOption function for returning a default configuration item of a 3D pie chart, and an optionUpdated function for processing graphic data after a configuration item is changed; the configuration item includes the data of the 3D pie chart data and the hollowness space of the 3D pie chart; Create a fan generator using configuration items; Create an instance of echarts in the render function, and then create several surface component configuration items according to the data of the 3D pie chart. Generate the fan surface equation through the fan generator, and assign the fan surface equation to the surface component configuration item. Merge the surface component configuration items into the echarts overall configuration, and assign the echarts overall configuration to the echarts instance through the echarts.setOption function to complete the creation of the script echarts-pie3d.js.

2. The method for realizing a 3D pie chart according to claim 1, characterized in that: The configuration items also include the maximum height of the 3D pie chart sector, the visible distance of the 3D pie chart, the elevation angle alpha of the 3D pie chart, and the color of the 3D pie chart.

3. The method for realizing a 3D pie chart according to claim 1, characterized in that: The use of configuration items to create a sector generator is specifically as follows: Sum the data in the 3D pie chart data, sort them, and calculate the proportion of each data in the data sum. Calculate the starting angle and ending angle of the data based on the proportion. The specific formula is as follows: in, is the number of data, is the value of each item in data, is the starting angle of the data, is the end angle of the data; Let the parameters of the fan surface equation be , , , ,in is the angle of the fan, is the radius of the sector, is the hollowness of the 3D pie chart, is a specific value, , ; about , Function for: when When, function for: when When, function for: In other cases, the function for: about , Function for: when When, function for: when When, function for: In other cases, the function for: about , Function for: when When, function for: when When, function for: In other cases, when When, function for: when When, function for: According to the surface parameter equation described above , create a sector generator.

4. A system for implementing a 3D pie chart, characterized in that: include: Create and embed module: used to create HTML pages, and embed the JavaScript scripts echarts.js, echarts-gl.js and echarts-pie3d.js into HTML pages through the script tag; echarts instance creation module: used to add DIV elements to HTML pages, and create DIV elements as echarts instances through echarts; 3D pie chart generation module: used to create the configuration items required for 3D pie charts, and assign the configuration items to the echarts instance. echarts-pie3d.js generates the corresponding 3D pie chart on the HTML interface; Among them, the script echarts.js is the main functional module of echarts, the script echarts-gl.js is the standard 3D chart functional module, and the script echarts-pie3d.js is the main functional module for drawing 3D pie charts; The creation process of the script echarts-pie3d.js is as follows: Embed the JavaScript scripts echarts.js and echarts-gl.js into the new HTML page through the script tag; Create an echarts-pie3d.js file, which implements two necessary interfaces for extending the echarts component: echarts.extendChartView for creating a 3D pie chart interface and echarts.extendSeriesModel for processing 3D pie chart data configuration; the echarts.extendChartView includes a render function for drawing a specific 3D pie chart graphic, and the echarts.extendSeriesModel includes a getInitialData function for standardizing 3D pie chart graphic data, a defaultOption function for returning a default configuration item of a 3D pie chart, and an optionUpdated function for processing graphic data after a configuration item is changed; the configuration item includes the data of the 3D pie chart data and the hollowness space of the 3D pie chart; Create a fan generator using configuration items; Create an instance of echarts in the render function, and then create several surface component configuration items according to the data of the 3D pie chart. Generate the fan surface equation through the fan generator, and assign the fan surface equation to the surface component configuration item. Merge the surface component configuration items into the echarts overall configuration, and assign the echarts overall configuration to the echarts instance through the echarts.setOption function to complete the creation of the script echarts-pie3d.js.

5. The system for implementing a 3D pie chart according to claim 4, characterized in that: The configuration items also include the maximum height of the 3D pie chart sector, the visible distance of the 3D pie chart, the elevation angle alpha of the 3D pie chart, and the color of the 3D pie chart.

6. The system for implementing a 3D pie chart according to claim 4, characterized in that: The use of configuration items to create a sector generator is specifically as follows: Sum the data in the 3D pie chart data, sort them, and calculate the proportion of each data in the data sum. Calculate the starting angle and ending angle of the data based on the proportion. The specific formula is as follows: in, is the number of data, is the value of each item in data, is the starting angle of the data, is the end angle of the data; Let the parameters of the fan surface equation be , , , ,in is the angle of the fan, is the radius of the sector, is the hollowness of the 3D pie chart, is a specific value, , ; about , Function for: when When, function for: when When, function for: In other cases, the function for: about , Function for: when When, function for: when When, function for: In other cases, the function for: about , Function for: when When, function for: when When, function for: In other cases, when When, function for: when When, function for: According to the surface parameter equation described above , create a sector generator.

7. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the steps of the method for realizing a 3D pie chart according to any one of claims 1 to 3 are implemented.

8. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the steps of the method for realizing a 3D pie chart as claimed in any one of claims 1 to 3 are implemented.

Images