Method, system and use for realizing axis label merging based on Echarts

Abstract

The present invention relates to the field of component library visual editor, data chart display technology and computer software, and in particular to a method, system, device and use thereof for realizing axis label merging based on Echarts. Based on the API provided by Echarts, the method of the present invention utilizes the rectangular coordinate system of the Echarts data visualization grid to realize multi-picture display, and at the same time uses the axis label area as a coordinate system different from the chart display, and realizes the display of the merged label by using the value label of the transparent cylinder. The method supports displaying the axis label in a user-defined merged manner according to actual needs, so that the flexibility of data chart display in the Echarts library is greatly improved, especially when there are many axis labels, the occurrence of axis label stacking can be effectively avoided, thereby providing great convenience for users.

Description

Technical Field

[0001] The present invention relates to the fields of component library visual editor, data chart display technology and computer software, and in particular to a method, system, device and use thereof for realizing axis label merging based on Echarts. Background Art

[0002] With the advent of the information age, the big data industry has been booming. As an important window for corporate publicity, large-screen visualization has gradually become familiar and favored by more and more companies. For example, a data screen is a frequently used and effective data visualization tool. By visually displaying the key indicators of a company's business on one or more LED screens, it is convenient for business personnel to quickly and directly find target data from complex business data.

[0003] In order to convert boring data into a more accurate and efficient expression, technicians often use visual charts. For example, Echarts, an open source visualization library implemented in JavaScript, can provide intuitive, interactive, and highly customizable data charts for data visualization. However, although Echarts, as a leader in the field of data visualization, has largely met the user's needs for data visualization in terms of functionality, it still lacks flexibility in data display. The most prominent manifestation is that in the display process of data charts, the Echarts library cannot support the display of axis labels in a user-defined merged manner. Therefore, when there are too many axis labels, the axis labels will be stacked, which is not conducive to the user's extraction of business data, thus causing many obstacles and difficulties in practical applications. Summary of the invention

[0004] In order to overcome the defect that the Echarts library cannot support user-defined merged axis labels, the present invention proposes a set of solutions. Specifically, based on the rich APIs provided by Echarts, the present invention expands and extracts the axis label merging method, and then provides a data chart display method based on the merged axis labels of Echarts. This method can be used to personalize the number of merged axis labels according to user needs, and display them on the axis labels in the form of classification according to the number of axis labels. Finally, the axis labels and charts are displayed in different coordinate systems, and the display of merged labels is realized by using the value labels of transparent cylinders. This method not only enriches the component capabilities, but also provides great convenience for users. At the same time, the present invention also relates to a system, device and use thereof for realizing axis label merging based on Echarts.

[0005] In a first aspect, the present invention provides a method for realizing axis label merging based on Echarts. Based on the API provided by Echarts, the method uses the rectangular coordinate system of the Echarts data visualization grid to realize multi-picture display, and uses the axis label area as a coordinate system different from the chart display, and realizes the display of merged labels by using the value label of a transparent cylinder. The method comprises:

[0006] Step 1: Use the grid property of the rectangular coordinate system in Echarts to divide the main chart into multiple charts for display, that is, perform grid layout in the Echarts rectangular coordinate system, and place two X axes and two Y axes in a single grid at the same time, thus forming two grid areas;

[0007] Step 2: The user sets the number of custom merged axis labels N as needed, and divides the X-axis or Y-axis coordinates into N equal parts;

[0008] Step 3: Generate N transparent cylinders in the area where xAxisIndex is 1 and yAxisIndex is 1. The transparent cylinders do not display tooltips but only value labels. The value label content reads the content of the user-defined configuration.

[0009] Step 4: Adjust the axis label position of the transparent cylinder so that the axis label is displayed in the center, and align the axis label area with the data chart display area.

[0010] Preferably, in step 1 of the method, a grid layout is performed in the Echarts rectangular coordinate system, and two upper and lower X axes and two left and right Y axes are placed simultaneously in a single grid, thereby forming two upper and lower grid areas, namely, an upper first area and a lower second area, and then a data chart is drawn in the first area, and an axis label is drawn in the second area.

[0011] Preferably, in the above method, after the second area displays the merged axis labels, the chart axis labels in the first area are set not to be displayed.

[0012] Preferably, in the method, the axis label is located in or on a transparent cylinder.

[0013] Furthermore, the present invention also relates to the use of the above-mentioned axis label merging method in component library visual editing technology.

[0014] And, the use of the above-mentioned axis label merging method in data chart display technology.

[0015] In a second aspect, the present invention provides a system for implementing axis label merging based on Echarts, the system comprising:

[0016] Grid layout module: its function is to perform grid layout in the Echarts rectangular coordinate system, placing two X axes and two Y axes in a single grid at the same time, thus forming two grid areas;

[0017] Axis label merging module: its function is to set the number of axis labels to be merged N according to user needs, and divide the X-axis or Y-axis coordinates into N equal parts;

[0018] Transparent cylinder generation module: Its function is to generate N transparent cylinders in the area where xAxisIndex is 1 and yAxisIndex is 1. The transparent cylinders do not display tooltips, but only value labels. The value label content reads the user-defined configuration content.

[0019] Position adjustment module: Its function is to adjust the axis label position of the transparent cylinder so that the axis label is displayed in the center, and the axis label area is aligned with the data chart display area;

[0020] Automatic control module: Its function is to automatically organize and control the above modules.

[0021] In a third aspect, the present invention provides an electronic device for implementing axis label merging based on Echarts, the electronic device comprising a processor and a memory, the memory being used to store a program, and the processor being used to run the program to implement the above-mentioned axis label merging method.

[0022] In summary, the method of the present invention, based on the API provided by Echarts, uses the Echarts data visualization grid rectangular coordinate system to realize multi-picture display, and at the same time uses the axis label area as a coordinate system different from the chart display, and uses the value label of the transparent cylinder to realize the display of the merged label. This method supports the display of the axis labels in a user-defined merged manner according to actual needs, which greatly improves the flexibility of data chart display in the Echarts library, especially when there are many axis labels, it can effectively avoid the occurrence of axis label stacking, thereby providing great convenience for users. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments recorded in the present invention, not all embodiments. For those skilled in the art, other drawings can be obtained based on these drawings without creative work.

[0024] Figure 1 Schematic diagram of the overall process of the axis label merging method of the present invention.

[0025] FIG2-(A) is a schematic diagram of the implementation of step 1 of the axis label merging method of the present invention in a specific case,

[0026] FIG2-(B) is a schematic diagram of the implementation of step 2 of the axis label merging method of the present invention in a specific case.

[0027] FIG2-(C) is a schematic diagram of the implementation of step 3 of the axis label merging method of the present invention in a specific case.

[0028] FIG. 2-(D) and FIG. 2-(E) are schematic diagrams showing the implementation of step 4 of the axis label merging method of the present invention in a specific case. DETAILED DESCRIPTION

[0029] In order to make the purpose, technical solution and advantages of the present invention clearer, the technical solution of the present invention will be clearly and completely described below in conjunction with specific embodiments and corresponding drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of them. The present invention can also be implemented or applied through other different specific implementation methods. The details in this specification can also be modified or changed in various ways based on different viewpoints and applications without departing from the spirit of the present invention.

[0030] At the same time, it should be understood that the protection scope of the present invention is not limited to the specific embodiments described below; it should also be understood that the terms used in the embodiments of the present invention are for describing specific embodiments rather than for limiting the protection scope of the present invention.

[0031] Example 1: A method for merging axis labels based on Echarts, see Figure 1 , Figure 2-(A), Figure 2-(B), Figure 2-(C), Figure 2-(D), Figure 2-(E), based on the API provided by Echarts, this method uses the Echarts data visualization grid rectangular coordinate system to realize multi-picture display, and at the same time uses the axis label area as a coordinate system different from the chart display, and uses the value label of the transparent column to realize the display of the merged label. The axis label can be located in the transparent column or on the transparent column. Specifically, this method includes the following steps:

[0032] Step 1: Use the grid property of the rectangular coordinate system in Echarts to divide the main chart into multiple charts for display, that is, to perform grid layout in the rectangular coordinate system of Echarts, and place two X axes and two Y axes in a single grid at the same time, so as to form two grid areas; for example: place the upper and lower X axes and the left and right Y axes in a single grid at the same time, so as to form two upper and lower grid areas, namely the first area in the upper part and the second area in the lower part, and then draw the data chart in the first area, and draw the axis labels in the second area. When the second area displays the merged axis labels, the chart axis labels in the first area are set to not be displayed;

[0033] Step 2: The user sets the number of custom merged axis labels N as needed, and divides the X-axis (horizontal axis) or Y-axis (vertical axis) coordinates into N equal parts;

[0034] Step 3: Generate N transparent cylinders in the area where xAxisIndex is 1 and yAxisIndex is 1. To ensure that the displayed chart area is not affected, the transparent cylinders do not display tooltips but only value labels. The value label content reads the content of the user-defined configuration;

[0035] Step 4: Adjust the axis label position of the transparent cylinder so that the axis label is displayed in the center, and align the axis label area with the data chart display area.

[0036] Embodiment 2: A system for realizing axis label merging based on Echarts, the system comprising:

[0037] Grid layout module: its function is to perform grid layout in the Echarts rectangular coordinate system, placing two X axes and two Y axes in a single grid at the same time, thus forming two grid areas;

[0038] Axis label merging module: its function is to set the number of axis labels to be merged N according to user needs, and divide the X-axis or Y-axis coordinates into N equal parts;

[0039] Transparent cylinder generation module: Its function is to generate N transparent cylinders in the area where xAxisIndex is 1 and yAxisIndex is 1. The transparent cylinders do not display tooltips, but only value labels. The value label content reads the user-defined configuration content.

[0040] Position adjustment module: Its function is to adjust the axis label position of the transparent cylinder so that the axis label is displayed in the center, and the axis label area is aligned with the data chart display area;

[0041] Automatic control module: Its function is to automatically organize and control the above modules.

[0042] For the functional details of each module, please refer to the technical solution of Example 1.

[0043] Embodiment 3: An electronic device for realizing axis label merging based on Echarts, comprising a processor and a memory, wherein the memory is used to store a program, and the processor is used to run the program to realize the method for realizing axis label merging based on Echarts described in Embodiment 1.

[0044] The various embodiments of the present invention are described in a progressive manner, and the same or similar parts between the various embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0045] The above description is only an embodiment of the present invention and is not intended to limit the present invention. For those skilled in the art, the present invention may have various modifications and variations. Any modification, replacement, etc. made within the spirit and principle of the present invention should be included in the scope of protection of the claims of the present invention.

Claims

1. A method for realizing axis label merging based on Echarts, characterized in that: Based on the API provided by Echarts, this method uses the rectangular coordinate system of the Echarts data visualization grid to realize multi-picture display. At the same time, the axis label area is used as a coordinate system different from the chart display, and the value label of the transparent column is used to realize the display of the merged label. The method includes: Step 1: Use the grid property of the rectangular coordinate system in Echarts to divide the main chart into multiple charts for display, that is, perform grid layout in the Echarts rectangular coordinate system, and place two X axes and two Y axes in a single grid at the same time, thus forming two grid areas; Step 2: The user sets the number of custom merged axis labels N as needed, and divides the X-axis or Y-axis coordinates into N equal parts; Step 3: Generate N transparent cylinders in the area where xAxisIndex is 1 and yAxisIndex is 1. The transparent cylinders do not display tooltips but only value labels. The value label content reads the content of the user-defined configuration. Step 4: Adjust the axis label position of the transparent cylinder so that the axis label is centered vertically and the axis label area is aligned vertically with the data chart display area; Step 1 describes the grid layout in the Echarts rectangular coordinate system, including placing the upper and lower X axes and the left and right Y axes in a single grid at the same time, thereby forming two upper and lower grid areas, namely the upper first area and the lower second area, and then drawing the data chart in the first area and the axis labels in the second area.

2. The axis label merging method according to claim 1, characterized in that: After the second area displays the merged axis labels, the chart axis labels in the first area are set not to be displayed.

3. The axis label merging method according to claim 1, characterized in that: The axis label is located in or on the transparent cylinder.

4. The axis label merging method according to any one of claims 1 to 3, wherein the axis label merging method is applied in component library visual editing technology.

5. The axis label merging method according to any one of claims 1 to 3, wherein the axis label merging method is applied in data chart display technology.

6. A system for realizing axis label merging based on Echarts, characterized in that: The system comprises: Grid layout module: its function is to perform grid layout in the Echarts rectangular coordinate system, placing two X axes and two Y axes in a single grid at the same time, thus forming two grid areas; Axis label merging module: its function is to set the number of axis labels to be merged N according to user needs, and divide the X-axis or Y-axis coordinates into N equal parts; Transparent cylinder generation module: Its function is to generate N transparent cylinders in the area where xAxisIndex is 1 and yAxisIndex is 1. The transparent cylinders do not display tooltips, but only value labels. The value label content reads the user-defined configuration content. Position adjustment module: Its function is to adjust the axis label position of the transparent cylinder so that the axis label is displayed in the center, and the axis label area is aligned with the data chart display area; Automatic control module: its function is to automatically organize and control the above modules; The grid layout in the Echarts rectangular coordinate system includes placing two upper and lower X axes and two left and right Y axes in a single grid, thereby forming two upper and lower grid areas, namely, an upper first area and a lower second area, and then drawing a data chart in the first area and drawing axis labels in the second area.

7. An electronic device for realizing axis label merging based on Echarts, characterized in that: The electronic device includes a processor and a memory, the memory is used to store a program, and the processor is used to run the program to implement the axis label merging method described in any one of claims 1-3.

Images