CN114691116A - Method, system, device and readable storage medium for realizing 3D pie chart - Google Patents

Method, system, device and readable storage medium for realizing 3D pie chart Download PDF

Info

Publication number
CN114691116A
CN114691116A CN202210356847.8A CN202210356847A CN114691116A CN 114691116 A CN114691116 A CN 114691116A CN 202210356847 A CN202210356847 A CN 202210356847A CN 114691116 A CN114691116 A CN 114691116A
Authority
CN
China
Prior art keywords
echarts
function
pie chart
data
cos
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202210356847.8A
Other languages
Chinese (zh)
Inventor
刘鹏飞
王毅
赵亮
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Xian Thermal Power Research Institute Co Ltd
Xian TPRI Power Station Information Technology Co Ltd
Original Assignee
Xian Thermal Power Research Institute Co Ltd
Xian TPRI Power Station Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Xian Thermal Power Research Institute Co Ltd, Xian TPRI Power Station Information Technology Co Ltd filed Critical Xian Thermal Power Research Institute Co Ltd
Priority to CN202210356847.8A priority Critical patent/CN114691116A/en
Publication of CN114691116A publication Critical patent/CN114691116A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • Processing Or Creating Images (AREA)

Abstract

The invention discloses a method, a system, equipment and a medium for realizing a 3D pie chart, wherein an HTML page is created, and javascript scripts echarts.js, echarts-gl.js and echarts-pie3d.js are embedded into the HTML page through script tags; adding DIV elements into an HTML page, and creating the DIV elements into echarts instances through echarts; and creating configuration items required by the 3D pie chart, assigning the configuration items to echarts instances, and generating the corresponding 3D pie chart on an HTML interface by echarts-pie3D. The method supplements the 3D pie chart lacking in echarts, and enriches the data display mode of the echarts.

Description

Method, system, device and readable storage medium for realizing 3D pie chart
Technical Field
The invention belongs to the technical field of data visualization front-end display, and particularly relates to a method, a system and equipment for realizing a 3D pie chart based on echarts, and a readable storage medium.
Background
In the big data era, with the progress of informatization and the increase of data geometric progression, the traditional data reports and tables cannot visually display the data rules, and a large amount of data can only know the rules through data visualization. echarts is a basic tool library for data visualization, in which a variety of chart display modes are provided. And a gorgeous data visualization scene interface can be developed based on echarts.
Although various chart display modes are built in the echarts, after iteration of multiple versions, the echarts do not provide 3D pie charts all the time, according to official theory, due to visual differences, the 3D pie charts cannot be subjected to accurate data comparison, and therefore 3D pie charts are not provided or suggested to be used in data visualization projects. However, in the data visualization project, there are more or less data display requirements of the 3D pie chart. Generally, the solution is to introduce other basic tool libraries with 3D pie charts, which not only results in an excessively large volume of items, but also results in incompatible chart styles.
Disclosure of Invention
The invention aims to provide a method, a system, equipment and a readable storage medium for realizing a 3D pie chart based on echarts, which overcome the defects in the prior art, supplement the 3D pie chart lacking in echarts and enrich the data display mode of the echarts.
In order to achieve the purpose, the invention adopts the following technical scheme:
a method of implementing a 3D pie chart, the method comprising:
creating an HTML page, and embedding javascript scripts echarts.js, echarts-gl.js and echarts-pie3d.js into the HTML page through script tags;
adding DIV elements into an HTML page, and creating the DIV elements into echarts instances through echarts;
creating a configuration item required by the 3D pie chart, assigning the configuration item to an echarts example, and generating a corresponding 3D pie chart on an HTML interface by echarts-pie3 d.js;
the script echarts-gl.js is a standard 3D chart function module, and the script echarts-pie3d.js is a main function module for drawing a 3D pie chart.
Further, the process of creating the script echarts-pie3d.js specifically includes:
embedding javascript scripts echarts.js and echarts-gl.js into a new HTML page through a script tag;
creating an echarts-file 3d.js file that implements two necessary interfaces for extending an echarts component: echarts. extendhardview for creating a 3D pie chart interface and echarts. extendseries model for processing 3D pie chart data configuration; the echarts. extendedchartview includes a render function for rendering a specific 3D pie chart graphic, the echarts. extendedseries model includes a getInitialData function for standardization processing of 3D pie chart graphic data, a defaultoperation function for returning a default configuration item of the 3D pie chart, and an optionUpdated function for graphic data processing after a change in the configuration item; the configuration items comprise data of the 3D pie chart and the hollowness space of the 3D pie chart;
creating a sector generator using the configuration item;
creating an echarts example in a render function, creating a plurality of surface component configuration items according to data of a 3D pie chart, generating a fan surface equation through a fan generator, assigning the fan surface equation to the surface component configuration items, combining the surface component configuration items into an echarts overall configuration, assigning the echarts overall configuration to the echarts example through an echarts. setOption function, and completing creation of a script echarts-pie3d.js.
Further, the configuration items further comprise the maximum height of the sector of the 3D pie chart, 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.
Further, the creating of the sector generator by using the data of the 3D pie chart specifically includes:
summing the data in the data of the 3D pie chart, then sorting, calculating the proportion of each data in the data sum, and calculating the starting angle and the ending angle of the data according to the proportion, wherein the specific formula is as follows:
Figure BDA0003583392500000031
start＝(end÷2π-di)×2π
wherein n is the number of data, diStarting the numerical value of each item in the data, wherein the starting is the starting angle of the data, and the ending is the ending angle of the data;
setting parameters u, v, k, d of sector surface equationiWherein 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 belongs to (-pi, 3 pi), v belongs to (0,2 pi);
the function f (x) for u, v is:
when u < start, the function f (x) is:
f(x)＝cos(start)×(1+cos(v)×k)
when u > end, the function f (x) is:
f(x)＝cos(end)×(1+cos(v)×k)
in other cases, the function f (x) is:
f(x)＝cos(u)×(1+cos(v)×k)
the function f (y) for u, v is:
when u < start, the function f (y) is:
f(y)＝sin(start)×(1+cos(v)×k)
when u > end, the function f (y) is:
f(y)＝sin(end)×(1+cos(v)×k)
in other cases, the function f (y) is:
f(y)＝sin(u)×(1+cos(v)×k)
the function f (z) for u, v is:
when u < -0.5 π, the function f (z) is:
f(z)＝sin(u)
when u >2.5 π, the function f (z) is:
f(z)＝sin(u)×di×0.1
in other cases, when sin (u) ≧ 0, the function f (z) is:
f(z)＝di×0.1
when sin (u) >0, the function f (z) is:
f(z)＝-1
the fan generator is created according to the surface parameter equations f (x), f (y), and f (z) described above.
A system for implementing a 3D pie chart, comprising:
a creation and embedding module: the method is used for creating an HTML page, and embedding javascript scripts echarts.js, echarts-gl.js and echarts-pie3d.js into the HTML page through script tags;
echarts instance creation module: adding DIV elements into an HTML page, and creating the DIV elements into echarts instances through echarts;
a 3D pie chart generation module: the method comprises the steps that configuration items needed by 3D pie charts are created, the configuration items are assigned to echarts instances, and the echarts-pie3d.js generate corresponding 3D pie charts on an HTML interface;
the script echarts-gl.js is a standard 3D chart function module, and the script echarts-pie3d.js is a main function module for drawing a 3D pie chart.
Further, the process of creating the script echarts-pie3d.js specifically includes:
embedding javascript scripts echarts.js and echarts-gl.js into a new HTML page through a script tag;
creating an echarts-file 3d.js file that implements two necessary interfaces for extending an echarts component: echarts. extendhardview for creating a 3D pie chart interface and echarts. extendseries model for processing 3D pie chart data configuration; the echarts. extendedchartview includes a render function for rendering a specific 3D pie chart graphic, the echarts. extendedseries model includes a getInitialData function for standardization processing of 3D pie chart graphic data, a defaultoperation function for returning a default configuration item of the 3D pie chart, and an optionUpdated function for graphic data processing after a change in the configuration item; the configuration items comprise data of the 3D pie chart and an outline space of the 3D pie chart;
creating a sector generator using the configuration item;
creating an echarts example in a render function, then creating a plurality of surface component configuration items according to data of a 3D pie chart, generating a fan surface equation through a fan surface generator, assigning the fan surface equation to the surface component configuration items, combining the surface component configuration items into an echarts overall configuration, assigning the echarts overall configuration to the echarts example through an echarts _ setOption function, and completing the creation of a script echarts-pie3d.js.
Further, the configuration items further comprise the maximum height of the sector of the 3D pie chart, 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.
Further, the creating of the sector generator by using the data of the 3D pie chart specifically includes:
summing the data in the data of the 3D pie chart, then sorting, calculating the proportion of each data in the data sum, and calculating the starting angle and the ending angle of the data according to the proportion, wherein the specific formula is as follows:
Figure BDA0003583392500000061
start＝(end÷2π-di)×2π
wherein n is the number of data, diStarting the numerical value of each item in the data, wherein the starting is the starting angle of the data, and the ending is the ending angle of the data;
setting parameters u, v, k, d of sector surface equationiWherein 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 belongs to (-pi, 3 pi), v belongs to (0,2 pi);
the function f (x) for u, v is:
when u < start, the function f (x) is:
f(x)＝cos(start)×(1+cos(v)×k)
when u > end, the function f (x) is:
f(x)＝cos(end)×(1+cos(v)×k)
in other cases, the function f (x) is:
f(x)＝cos(u)×(1+cos(v)×k)
the function f (y) for u, v is:
when u < start, the function f (y) is:
f(y)＝sin(start)×(1+cos(v)×k)
when u > end, the function f (y) is:
f(y)＝sin(end)×(1+cos(v)×k)
in other cases, the function f (y) is:
f(y)＝sin(u)×(1+cos(v)×k)
the function f (z) for u, v is:
when u < -0.5 π, the function f (z) is:
f(z)＝sin(u)
when u >2.5 π, the function f (z) is:
f(z)＝sin(u)×di×0.1
in other cases, when sin (u) ≧ 0, the function f (z) is:
f(z)＝di×0.1
when sin (u) >0, the function f (z) is:
f(z)＝-1
the fan generator is created according to the surface parameter equations f (x), f (y), and f (z) described above.
A computer device comprising a memory, a processor and a computer program stored in the memory and executable on the processor, the processor implementing the steps of the method of implementing a 3D pie chart when executing the computer program.
A computer-readable storage medium, having stored thereon a computer program, which, when being executed by a processor, carries out the steps of the method of implementing a 3D pie chart.
Compared with the prior art, the invention has the following beneficial technical effects:
the method and the device add the function of the 3D pie chart to the echarts data visualization tool library, enrich the use scenes of echarts in data visualization and bring better experience and visual impact. The complex 3D pie chart implementation method is deeply encapsulated according to the echarts component development standard, the use mode is simplified, a user can create the 3D pie chart like using the standard echarts component, when data visualization development is carried out, the consistent component implementation code can be displayed, and the readability of the code and the maintainability of the project are improved.
Drawings
The accompanying drawings are included to provide a further understanding of the invention, and are incorporated in and constitute a part of this specification, illustrate embodiments of the invention and together with the description serve to explain the invention and not to limit the invention.
FIG. 1 is a flow chart for creating echarts-pie3 d.js;
FIG. 2 is a flow chart for creating a 3D pie chart using echarts-pie3 d.js;
fig. 3 is the final 3D pie chart created.
Detailed Description
In order to make the technical solutions of the present invention better understood, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be obtained by a person skilled in the art without making any creative effort based on the embodiments in the present invention, shall fall within the protection scope of the present invention.
It should be noted that the terms "first," "second," and the like in the description and claims of the present invention and in the drawings described above are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used is interchangeable under appropriate circumstances such that the embodiments of the invention described herein are capable of operation in sequences other than those illustrated or described herein. Furthermore, the terms "comprises," "comprising," and "having," and any variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements expressly listed, but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.
The echarts data visualization tool library does not support 3D pie charts, but 3D curved surfaces can be freely drawn through a built-in surface component. The invention uses surface components to generate sectors through data and surface equations, and can set the size, height and color of each sector, and then combine the sectors, thereby simulating a 3D pie chart.
In summary, the method for realizing the 3D pie chart based on echarts includes the following steps:
step 1:
to realize the 3D pie chart based on echarts, a development environment of echarts is firstly required to be established. The specific construction method is as follows:
in the HTML interface, javascript scripts echarts. The two scripts provide support for basic functions, and the function development of the 3D pie chart can be carried out only on the basis of the two functions.
Step 2:
creating an echarts-pie3d.js frame, and then adding an echarts plug-in access interface method echarts.extendhardview and echarts.extendsSeries model in the echarts-pie3d.js frame. Wherein the render function of echarts. extendhardview is used for graphic rendering of a specific 3D pie chart; the getInitialData function of echarts. extendedSeries model is used for the standardized processing of pie chart graphic data, the defaultOption function is used for returning the default configuration item of the 3D pie chart, and the optionUpdated function is used for the processing of data after the configuration item is changed. Here, only the initialization processing is performed on echarts-pie3d.js, and for a render function, only the name of the function needs to be created, and the following steps implement the contents therein.
And step 3:
realizing a defaultOption function in an echarts.extendedSeries model method of echarts-pie3d.js, wherein the function returns a default configuration item of a 3D pie chart, and space is the hollowness of the 3D pie chart; height is the maximum height of the sector 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; the data is data of a 3D pie chart; color is the color of the 3D pie chart, as shown in the following table:
configuration item Description of the invention
space Hollowness of 3D pie chart
height Maximum height of 3D pie chart sector
distance Visual distance of 3D pie chart
alpha Elevation of 3D pie chart
data Data of 3D pie chart
color Color of 3D pie chart
And 4, step 4:
this step creates a sector generator from the data and the surface equation. The specific implementation steps are as follows:
firstly, summing the data in the step 3, then sorting, calculating the proportion of each data in the data sum, and calculating the starting angle and the ending angle of the data according to the proportion, wherein the specific formula is as follows:
Figure BDA0003583392500000101
start＝(end÷2π-di)×2π
wherein n is the number of data, diStarting the numerical value of each item in the data, wherein the starting is the starting angle of the data, and the ending is the ending angle of the data;
then, parameters u, v, k and d of the curved surface equation are seti. Wherein u belongs to (-pi, 3 pi) and v belongs to (0,2 pi).
u is the angle of the fan, v is the radius of the fan, k is the space attribute defined in step three, diIs a specific value.
Then, the function f (x) for u, v is:
when u < start, the function is:
f(x)＝cos(start)×(1+cos(v)×k)
when u > end, the function is:
f(x)＝cos(end)×(1+cos(v)×k)
in other cases, the function is:
f(x)＝cos(u)×(1+cos(v)×k)
the function f (y) for u, v is:
when u < start, the function is:
f(y)＝sin(start)×(1+cos(v)×k)
when u > end, the function is:
f(y)＝sin(end)×(1+cos(v)×k)
in other cases, the function is:
f(y)＝sin(u)×(1+cos(v)×k)
the function f (z) for u, v is:
when u < -0.5 π, the function is:
f(z)＝sin(u)
when u >2.5 π, the function is:
f(z)＝sin(u)×di×0.1
in other cases, when sin (u) ≧ 0, the function is:
f(z)＝di×0.1
when sin (u) >0, the function is:
f(z)＝-1
the fan generator is created according to the surface parameter equations f (x), f (y), f (z) described above.
And 5:
the render function in step 2 is implemented, a specific DIV element is obtained through an api parameter transmitted in the render function, and an echarts instance is created on the DIV element.
Secondly, respectively creating a plurality of surface component configuration items according to the data defined in the step 3, wherein the name is the name of the surface component configuration item; the type is the type of the surface component configuration item; parameter is whether to use the surface equation to create the image; the wireframe is whether the grid line is displayed or not; parametric Equation is a specific surface equation created from data.
Then, an echarts overall configuration is created, wherein boxHeight is the maximum height of the 3D pie chart, viewControl is the relevant configuration of the 3D graphics camera, and both distance and alpha attributes defined in step 3 need to be used here to define the distance and elevation angle of the 3D pie chart.
And finally, adding the surface component configuration item into the echarts overall configuration and assigning the configuration to an echarts instance through a setOption method.
Until the script echarts-pie3d.js is created, the flow is detailed in fig. 1.
Step 6:
an HTML page is created and javascript scripts echarts. js, echarts-gl. js, echarts-pie3d. js are embedded into the page by script tags. Js is the echarts-based 3D pie chart plug-in created in steps 1 to 5.
A DIV element is added to the HTML page and created as an echarts instance by echarts.
And (4) creating the configuration required by the 3D pie chart according to the configuration item definition in the step 3, and assigning the configuration to the echarts instances. At this time echarts-pie3d.js generates a corresponding 3D pie chart on the interface. The specific use flow is shown in fig. 2, and the final generated 3D pie chart is shown in fig. 3.
The invention also provides a system for realizing the 3D pie chart based on echarts, which comprises the following components:
a creation and embedding module: the method comprises the steps of creating an HTML page, and embedding javascript scripts echarts.js, echarts-gl.js and echarts-pie3d.js into the HTML page through script tags;
echarts instance creation module: adding DIV elements into an HTML page, and creating the DIV elements into echarts instances through echarts;
a 3D pie chart generation module: the method comprises the steps that configuration items needed by 3D pie charts are created, the configuration items are assigned to echarts instances, and the echarts-pie3d.js generate corresponding 3D pie charts on an HTML interface;
the script echarts.js is a main function module of the echarts, the script echarts-gl.js is a main function module for drawing the 3D, and the script echarts-pie3d.js is a main function module for drawing the 3D pie chart.
As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
Finally, it should be noted that: although the present invention has been described in detail with reference to the above embodiments, those skilled in the art will appreciate that various changes, modifications and equivalents can be made in the embodiments of the invention without departing from the scope of the invention as defined by the appended claims.

Claims (10)

1. A method of implementing a 3D pie chart, the method comprising:
creating an HTML page, and embedding javascript scripts echarts.js, echarts-gl.js and echarts-pie3d.js into the HTML page through script tags;
adding DIV elements into an HTML page, and creating the DIV elements into echarts instances through echarts;
creating a configuration item required by the 3D pie chart, assigning the configuration item to an echarts example, and generating a corresponding 3D pie chart on an HTML interface by echarts-pie3 d.js;
the script echarts-gl.js is a standard 3D chart function module, and the script echarts-pie3d.js is a main function module for drawing a 3D pie chart.
2. The method for realizing the 3D pie chart according to claim 1, wherein the creation process of the script echarts-pie3d.js specifically comprises:
embedding javascript scripts echarts.js and echarts-gl.js into a new HTML page through script tags;
creating an echarts-file 3d.js file that implements two necessary interfaces for extending an echarts component: echarts. extendhardview for creating a 3D pie chart interface and echarts. extendseries model for processing 3D pie chart data configuration; the echarts. extendedchartview includes a render function for rendering a specific 3D pie chart graphic, the echarts. extendedseries model includes a getInitialData function for standardization processing of 3D pie chart graphic data, a defaultoperation function for returning a default configuration item of the 3D pie chart, and an optionUpdated function for graphic data processing after a change in the configuration item; the configuration items comprise data of the 3D pie chart and the hollowness space of the 3D pie chart;
creating a sector generator using the configuration item;
creating an echarts example in a render function, creating a plurality of surface component configuration items according to data of a 3D pie chart, generating a fan surface equation through a fan generator, assigning the fan surface equation to the surface component configuration items, combining the surface component configuration items into an echarts overall configuration, assigning the echarts overall configuration to the echarts example through an echarts. setOption function, and completing creation of a script echarts-pie3d.js.
3. The method of claim 2, wherein the configuration items further comprise a maximum height of a sector of the 3D pie chart, a visible distance of the 3D pie chart, an elevation angle alpha of the 3D pie chart, and a color of the 3D pie chart.
4. The method for realizing a 3D pie chart according to claim 2, wherein the creating of the sector generator using the data of the 3D pie chart is specifically:
summing the data in the data of the 3D pie chart, then sorting, calculating the proportion of each data in the data sum, and calculating the starting angle and the ending angle of the data according to the proportion, wherein the specific formula is as follows:
Figure FDA0003583392490000021
start＝(end÷2π-di)×2π
wherein n is the number of data, diStarting the numerical value of each item in the data, wherein the starting is the starting angle of the data, and the ending is the ending angle of the data;
setting parameters u, v, k, d of sector surface equationiWherein 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 belongs to (-pi, 3 pi), v belongs to (0,2 pi);
the function f (x) for u, v is:
when u < start, the function f (x) is:
f(x)＝cos(start)×(1+cos(v)×k)
when u > end, the function f (x) is:
f(x)＝cos(end)×(1+cos(v)×k)
in other cases, the function f (x) is:
f(x)＝cos(u)×(1+cos(v)×k)
the function f (y) for u, v is:
when u < start, the function f (y) is:
f(y)＝sin(start)×(1+cos(v)×k)
when u > end, the function f (y) is:
f(y)＝sin(end)×(1+cos(v)×k)
in other cases, the function f (y) is:
f(y)＝sin(u)×(1+cos(v)×k)
the function f (z) for u, v is:
when u < -0.5 π, the function f (z) is:
f(z)＝sin(u)
when u >2.5 π, the function f (z) is:
f(z)＝sin(u)×di×0.1
in other cases, when sin (u) ≧ 0, the function f (z) is:
f(z)＝di×0.1
when sin (u) >0, the function f (z) is:
f(z)＝-1
the fan generator is created according to the surface parameter equations f (x), f (y), and f (z) described above.
5. A system for implementing a 3D pie chart, comprising:
a creation and embedding module: the method is used for creating an HTML page, and embedding javascript scripts echarts.js, echarts-gl.js and echarts-pie3d.js into the HTML page through script tags;
echarts instance creation module: adding DIV elements into an HTML page, and creating the DIV elements into echarts instances through echarts;
a 3D pie chart generation module: the method comprises the steps that configuration items needed by 3D pie charts are created, the configuration items are assigned to echarts instances, and the echarts-pie3d.js generate corresponding 3D pie charts on an HTML interface;
the script echarts.js is a main function module of the echarts, the script echarts-gl.js is a standard 3D chart function module, and the script echarts-pie3d.js is a main function module for drawing a 3D pie chart.
6. The system for realizing a 3D pie chart according to claim 5, wherein the creation process of the script echarts-pie3d.js specifically comprises:
embedding javascript scripts echarts.js and echarts-gl.js into a new HTML page through a script tag;
creating an echarts-file 3d.js file that implements two necessary interfaces for extending an echarts component: echarts. extendhardview for creating a 3D pie chart interface and echarts. extendseries model for processing 3D pie chart data configuration; the echarts. extendedchartview includes a render function for rendering a specific 3D pie chart graphic, the echarts. extendedseries model includes a getInitialData function for standardization processing of 3D pie chart graphic data, a defaultoperation function for returning a default configuration item of the 3D pie chart, and an optionUpdated function for graphic data processing after a change in the configuration item; the configuration items comprise data of the 3D pie chart and the hollowness space of the 3D pie chart;
creating a sector generator using the configuration item;
creating an echarts example in a render function, creating a plurality of surface component configuration items according to data of a 3D pie chart, generating a fan surface equation through a fan generator, assigning the fan surface equation to the surface component configuration items, combining the surface component configuration items into an echarts overall configuration, assigning the echarts overall configuration to the echarts example through an echarts. setOption function, and completing creation of a script echarts-pie3d.js.
7. The system for realizing 3D pie charts according to claim 6, wherein the configuration items further comprise a maximum height of a 3D pie chart sector, a visible distance of the 3D pie chart, an elevation angle alpha of the 3D pie chart, and a color of the 3D pie chart.
8. The system for realizing a 3D pie chart according to claim 6, wherein the sector generator is created by using the data of the 3D pie chart, specifically:
summing the data in the data of the 3D pie chart, then sorting, calculating the proportion of each data in the data sum, and calculating the starting angle and the ending angle of the data according to the proportion, wherein the specific formula is as follows:
Figure FDA0003583392490000051
start＝(end÷2π-di)×2π
wherein n is the number of data, diStarting the numerical value of each item in the data, wherein the starting is the starting angle of the data, and the ending is the ending angle of the data;
setting parameters u, v, k, d of sector surface equationiWherein 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 belongs to (-pi, 3 pi), v belongs to (0,2 pi);
the function f (x) for u, v is:
when u < start, the function f (x) is:
f(x)＝cos(start)×(1+cos(v)×k)
when u > end, the function f (x) is:
f(x)＝cos(end)×(1+cos(v)×k)
in other cases, the function f (x) is:
f(x)＝cos(u)×(1+cos(v)×k)
the function f (y) for u, v is:
when u < start, the function f (y) is:
f(y)＝sin(start)×(1+cos(v)×k)
when u > end, the function f (y) is:
f(y)＝sin(end)×(1+cos(v)×k)
in other cases, the function f (y) is:
f(y)＝sin(u)×(1+cos(v)×k)
the function f (z) for u, v is:
when u < -0.5 π, the function f (z) is:
f(z)＝sin(u)
when u >2.5 π, the function f (z) is:
f(z)＝sin(u)×di×0.1
in other cases, when sin (u) ≧ 0, the function f (z) is:
f(z)＝di×0.1
when sin (u) >0, the function f (z) is:
f(z)＝-1
the fan generator is created according to the surface parameter equations f (x), f (y), and f (z) described above.
9. A computer device comprising a memory, a processor and a computer program stored in the memory and executable on the processor, characterized in that the processor implements the steps of the method of implementing a 3D pie chart according to any of claims 1 to 4 when executing the computer program.
10. A computer-readable storage medium, in which a computer program is stored which, when being executed by a processor, carries out the steps of a method of carrying out a 3D pie chart according to any one of claims 1 to 4.
CN202210356847.8A 2022-04-06 2022-04-06 Method, system, device and readable storage medium for realizing 3D pie chart Pending CN114691116A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210356847.8A CN114691116A (en) 2022-04-06 2022-04-06 Method, system, device and readable storage medium for realizing 3D pie chart

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210356847.8A CN114691116A (en) 2022-04-06 2022-04-06 Method, system, device and readable storage medium for realizing 3D pie chart

Publications (1)

Publication Number Publication Date
CN114691116A true CN114691116A (en) 2022-07-01

Family

ID=82143378

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210356847.8A Pending CN114691116A (en) 2022-04-06 2022-04-06 Method, system, device and readable storage medium for realizing 3D pie chart

Country Status (1)

Country Link
CN (1) CN114691116A (en)

Similar Documents

Publication Publication Date Title
US8970592B1 (en) Simulating an arbitrary number of particles
US20150088474A1 (en) Virtual simulation
CN104407779A (en) Arrangement display method and device for graphical interface
CN111199062A (en) Simulation method and system based on industrial development software and electronic equipment
US20180276870A1 (en) System and method for mass-animating characters in animated sequences
CN110276816A (en) Regional color filling method and device, electronic equipment and computer readable storage medium
CN111583378B (en) Virtual asset processing method and device, electronic equipment and storage medium
CN110930492B (en) Model rendering method, device, computer readable medium and electronic equipment
CN106204418A (en) Image warping method based on matrix inversion operation in a kind of virtual reality mobile terminal
US8952968B1 (en) Wave modeling for computer-generated imagery using intersection prevention on water surfaces
CN116152460B (en) Method, device, terminal and medium for generating rock stratum model based on UE4
CN108744520B (en) Method and device for determining placement position of game model and electronic equipment
CN108597025B (en) Artificial intelligence-based virtual reality-oriented rapid model construction method and device
KR101680174B1 (en) Method for generation of coloring design using 3d model, recording medium and device for performing the method
CN114691116A (en) Method, system, device and readable storage medium for realizing 3D pie chart
CN116109767A (en) Rendering method of three-dimensional scene, image processor, electronic device and storage medium
US8725476B1 (en) Applying details in a simulation
CN110930499B (en) 3D data processing method and device
CN113643426A (en) Method, equipment and storage medium for updating simulation urban building model
CN112328836A (en) VBA-based graph instance generation method and system
Wang et al. LVDIF: a framework for real-time interaction with large volume data
CN104461249A (en) Method and device for arraying and displaying graphical interface
CN104461549A (en) Method and device for arraying and displaying graphical interface
CN111767594B (en) Temporary building model generation method, device, equipment and storage medium
CN110297568A (en) Electronic white board realization method, device, equipment and storage medium

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination