Configuration method for automatically generating ECharts configuration item by picture

Abstract

According to the configuration method for automatically generating the ECharts configuration item by the picture, the picture can be analyzed into the ECharts configuration item, automatic chart generation is achieved, and manual creation and configuration of each chart are not needed. The efficiency of developers can be improved, the developers do not need to write a large number of codes to create and configure charts, and the development process is simplified. And the error rate can be reduced, and problems caused by human negligence or errors can be reduced through automatic analysis, so that the quality and the stability of codes are improved. Innovation is further promoted, and more innovation space is provided for developers. The method can be integrated into an application program, and automatic data visualization and data analysis are achieved through powerful functions provided by ECharts.

Description

Technical Field

[0001] The present invention relates to the technical field of data visualization, and in particular to a configuration method for automatically generating ECharts configuration items from a picture. Background Art

[0002] ECharts is a data visualization chart library based on JavaScript, which provides intuitive, vivid, interactive and customizable data visualization charts. The pie charts and bar charts that we often see on web pages need to be implemented with ECharts. There are many different styles of design drawings, and ECharts has more than 20 charts and more than a dozen components, with hundreds of configuration items. Every development requires checking complex configuration documents, which wastes time, increases learning costs, and reduces development efficiency. If you are a novice, the situation is even more complicated, and there is no way to check the documents.

[0003] The existing related websites list some common charts and configurations according to the chart class, which developers need to find by themselves. If you can find a style similar to the design, then find the relevant documents provided by ECharts and make some changes according to the design. If you can't find a similar style, you can only find the ECharts document yourself and learn from scratch.

[0004] After tedious searching for existing solutions, most of the examples found are similar to my own design drawings, and there are still many places that need to be modified. I still need to manually enter and search for each data point and attribute to make further modifications. For complex implementations, if there are no comments, it is also troublesome to modify. Summary of the invention

[0005] The purpose of the present invention is to provide a configuration method for automatically generating ECharts configuration items from images, which can parse images into ECharts configuration items and automatically generate charts without having to manually create and configure each chart. This can improve developer efficiency and reduce error rates.

[0006] In order to achieve the above object, the technical solution adopted by the present invention is: a configuration method for automatically generating ECharts configuration items from a picture, comprising the following steps:

[0007] Step 1: The user uploads a picture, preprocesses the picture, and enhances the features in the image;

[0008] Step 2: Use image processing and recognition techniques to parse the information in the image and use image processing features to infer the chart type;

[0009] Step 3: Use optical character recognition (OCR) technology to extract text information and identify the scale, unit and label text of the coordinate axis, chart background color, and legend;

[0010] Step 4: Extract the data value in the picture based on the chart type inferred in step 2;

[0011] Step 5: Based on the chart type inferred in step 2, convert the data format according to the requirements of different chart types;

[0012] Step 6. Generate basic configuration according to the chart type, fill the parsed data into the configuration, and generate echarts configuration;

[0013] Step 7: Unify the data into json format.

[0014] Preferably, in step 1, the user uploads the picture on the web page, and after uploading it on the front end, it is sent to the Java back end.

[0015] Preferably, the preprocessing of the image in step 1 includes operations of cropping, resizing, adjusting contrast and brightness.

[0016] Preferably, in step 2, the Java background uses image processing and recognition technology to parse the information in the picture including image and text information.

[0017] Preferably, in step 2, image processing features including shape, edge, and color distribution are used to infer the chart type.

[0018] Preferably, in step 5, the character string format parsed from the image is converted into a numerical type before calculating the percentage.

[0019] Preferably, step 6 includes setting the image type, style, legend, and configuring the coordinate axis and data series.

[0020] Preferably, in step 6, the configuration items are generated and corresponding comments are generated at the same time.

[0021] The beneficial effects of the present invention are:

[0022] This solution can parse images into ECharts configuration items and automate chart generation without having to manually create and configure each chart. It can improve developer efficiency, as developers do not need to write a lot of code to create and configure charts, simplifying the development process. It can also reduce the error rate. Automatic parsing can reduce problems caused by human negligence or errors, thereby improving the quality and stability of the code. It further promotes innovation and provides developers with more room for innovation. It can be integrated into applications to use the powerful features provided by ECharts to achieve automated data visualization and data analysis. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0024] Figure 1 It is a configuration flow chart of the present invention.

[0025] Figure 2 Schematic diagram of an embodiment of the present invention. DETAILED DESCRIPTION

[0026] The present invention will be further described in detail below in conjunction with the accompanying drawings and specific embodiments.

[0027] The present invention discloses a configuration method for automatically generating ECharts configuration items from images, which mainly includes an image recognition module and a configuration item retrieval module. Figure 1 As shown, the embodiment includes the following steps:

[0028] Step 1: The user uploads a picture, preprocesses the picture, and enhances the features in the image;

[0029] Step 2: Use image processing and recognition techniques to parse the information in the image and use image processing features to infer the chart type;

[0030] Step 3: Use optical character recognition (OCR) technology to extract text information and identify the scale, unit and label text of the coordinate axis, chart background color, and legend;

[0031] Step 4: Extract the data value in the picture based on the chart type inferred in step 2;

[0032] Step 5: Based on the chart type inferred in step 2, convert the data format according to the requirements of different chart types;

[0033] Step 6. Generate basic configuration according to the chart type, fill the parsed data into the configuration, and generate echarts configuration;

[0034] Step 7: Unify the data into json format.

[0035] In step 1, the user uploads the picture on the web page, and the picture is sent to the Java background after being uploaded on the front end. The pre-processing of the picture includes operations such as cropping, resizing, adjusting contrast and brightness.

[0036] In step 2, the Java background uses image processing and recognition technology to parse the information in the picture, including image and text information. Image processing features including shape, edge, and color distribution are used to infer the chart type. Alternatively, a classification model can be trained based on a large amount of image data with labeled chart types to distinguish different types of charts, such as bar charts, line charts, pie charts, radar charts, etc.

[0037] In step 4, several common graphs are used as examples: for a bar graph, the data value is estimated by detecting the width and height of the column. For a line graph, the coordinates of the key points of the line are extracted, and the slope and distance between adjacent points are calculated to obtain the data change trend. For a pie chart, the data proportion of each part is determined according to the angle or area ratio of the sector.

[0038] In step 5, the character string format parsed from the image is converted into a numerical type before calculating the percentage.

[0039] In step 6, a pie chart is used as an example: set the image type: set the type in the series to plain; set the style: set the parsed background color; configure the coordinate axis: configure the type, scale, name, color, etc. of the coordinate axis; configure the data series: fill the type, data, name, etc. into the data field; set other properties such as legends and tooltips; generate configuration items and corresponding annotations at the same time, that is, add the name corresponding to each data item to the configuration item.

[0040] by Figure 2 For example: after the user uploads the picture, the picture is first preprocessed to enhance the contrast and clarity for easy analysis; the pie chart is determined based on the image shape characteristics; the head or bottom of the image is captured, and the optical character recognition (OCR) technology is used to extract text information: the title is the educational distribution of employees, and the subtitle is 2024, which is filled in the title field of echarts; the background color of the chart is white, and the chart accounts for about 60% of the image part, filling the radius field; the image part is captured, and the text information is extracted, that is, the data part, which are doctoral, graduate, undergraduate, junior college, and other; according to the color distribution, the area and proportion of each module are calculated, for example, the proportion of graduate students = graduate area / total area = 33% (rounded); the total is 100, and the values ​​of each part are calculated and converted into json format as follows, and filled into the data field.

[0041] {value:15,name:'Doctor'},

[0042] {value:34,name:'Graduate student'},

[0043] {value:24,name:'Undergraduate'},

[0044] {value:18,name:'Specialized'},

[0045] {value:9,name:'Other'}

[0046] Finally, the echarts configuration is generated and output in json format

[0047]

[0048]

[0049] It should be noted that the parts not described in detail in the above embodiments are all prior art.

[0050] The above description is only a preferred embodiment of the present invention and does not constitute any form of limitation to the present invention. Although the present invention has been disclosed as a preferred embodiment as above, it is not intended to limit the present invention. Any technician familiar with the profession can make some changes or modifications to equivalent embodiments of equivalent changes using the technical contents disclosed above without departing from the scope of the technical solution of the present invention. However, any simple modifications, equivalent changes and modifications made to the above embodiments based on the technical essence of the present invention without departing from the content of the technical solution of the present invention should be covered within the protection scope of the present invention.

Claims

1. A method for automatically generating ECharts configuration items from pictures, characterized by: The following steps are involved: Step 1: The user uploads a picture, preprocesses the picture, and enhances the features in the image; Step 2: Use image processing and recognition techniques to parse the information in the image and use image processing features to infer the chart type; Step 3: Use optical character recognition (OCR) technology to extract text information and identify the scale, unit and label text of the coordinate axis, chart background color, and legend; Step 4: Extract the data value in the picture based on the chart type inferred in step 2; Step 5: Based on the chart type inferred in step 2, convert the data format according to the requirements of different chart types; Step 6. Generate basic configuration according to the chart type, fill the parsed data into the configuration, and generate echarts configuration; Step 7: Unify the data into json format.

2. A method for configuring ECharts configuration items automatically generated from pictures according to claim 1, characterized in that: In step 1, the user uploads the picture on the web page, and after uploading it on the front end, it is sent to the Java back end.

3. A method for configuring ECharts configuration items automatically generated from pictures according to claim 1, characterized in that: The preprocessing of the image in step 1 includes operations of cropping, resizing, adjusting contrast and brightness.

4. A method for configuring ECharts configuration items automatically generated from pictures according to claim 1, characterized in that: In step 2, the Java background uses image processing and recognition technology to parse the information in the picture, including image and text information.

5. The method for configuring ECharts configuration items automatically generated from pictures according to claim 1, characterized in that: In step 2, image processing features including shape, edge, and color distribution are used to infer the chart type.

6. A method for configuring ECharts configuration items automatically generated from pictures according to claim 1, characterized in that: In step 5, the character string format parsed from the image is converted into a numerical type before calculating the percentage.

7. A method for configuring ECharts configuration items automatically generated from pictures according to claim 1, characterized in that: The step 6 includes setting the image type, style, legend, and configuring the coordinate axis and data series.

8. A method for configuring ECharts configuration items automatically generated from pictures according to claim 1, characterized in that: In step 6, the configuration items are generated and corresponding comments are generated at the same time.

Images