An echart mixed chart data label intelligent avoidance method and system

Abstract

The application relates to the technical field of data visualization, in particular to an ECharts mixed chart data label intelligent avoidance method, which comprises the following steps: constructing a label configuration array containing text content, original coordinates and attribute information; calculating the bounding box of each label, performing space conflict detection according to the number of labels and the bounding box, and generating a conflict mapping table; adopting different avoidance strategies for different types of label conflicts for collaborative processing to obtain adjusted optimal label positions; updating the optimal label positions to ECharts configuration to generate optimal chart display configuration. The application further discloses an ECharts mixed chart data label intelligent avoidance system. The application can meet the intelligent label avoidance requirement of data analysis, and improve the information transmission efficiency and user experience quality of data visualization.

Description

Technical Field

[0001] This invention relates to the field of data visualization technology, and in particular to an ECharts hybrid chart data label intelligent avoidance method and system. Background Technology

[0002] With the rapid development of the digital economy and big data analytics, the reliance on data visualization for economic operation monitoring and analysis in professional fields continues to increase. Economic operation analysis systems require the integration of over four thousand key indicators and hundreds of thousands of data points at the macro, meso, and regional levels. Visualization is used to compare and analyze the correlations and trends of multiple indicators, helping analysts quickly capture economic operation characteristics, identify abnormal fluctuations, and assess development trends.

[0003] Among current mainstream front-end visualization solutions, open-source chart libraries such as ECharts have become core technologies for building professional analysis systems in the industry due to their rich chart types, flexible configuration capabilities, and excellent interactive experience. In economic operation analysis scenarios, the most commonly used visualization methods include multi-series line trend comparison charts, multi-regional and multi-indicator clustered bar charts, and hybrid charts with dual Y-axis bars representing total amount and growth rate. Through these diverse chart formats, core functions such as cross-period comparison of indicators and multi-dimensional correlation analysis can be achieved, meeting the needs of professional analysts for intuitive interpretation of multi-dimensional economic data.

[0004] However, in the actual application of the system, a prominent technical challenge severely restricts analysis efficiency and user experience: when multiple indicator series, such as multiple trend lines, multiple clusters of bars, or mixed-type charts, such as bar charts and line charts, are overlaid and displayed at high density in the same view, the data labels corresponding to each indicator will severely overlap, stack, and obscure each other, making the data difficult to identify. Typical scenarios include: when displaying a trend comparison line chart of GDP growth rates of two provinces simultaneously, the labels of data points at adjacent time points are very likely to overlap, making it difficult for users to quickly read accurate values; in clustered bar charts comparing different economic indicators of multiple regions, the numerical labels at the top of each bar are squeezed and stacked due to insufficient horizontal space, presenting a chaotic display effect; in a dual Y-axis mixed chart combining bar charts to represent totals and line charts to represent growth rates, the labels of the two different types of indicators conflict particularly fiercely in the narrow plotting area, often resulting in one type of label completely covering the other. The existence of these problems makes it difficult for analysts to quickly and accurately read and compare key data, and the core value of data visualization in conveying information is severely weakened.

[0005] The main shortcomings are as follows: First, there is a structural deficiency in core avoidance capabilities. The label layout mechanisms of existing mainstream visualization libraries are essentially static and generic, designed only to serve basic, low-density data display scenarios. They lack a dedicated avoidance algorithm capable of intelligently handling high-density scenarios with multiple series of bar charts, multiple line charts, and mixed bar and line charts. Their underlying logic simply places labels mechanically based on data coordinates. When presenting a combination comparison of thousands of indicators in an economic operation analysis system, the overlap and occlusion of numerical labels become an unavoidable result, fundamentally failing to meet the basic requirement of clear and readable data for professional analysis. Second, the layout strategy is static and rigid, creating blind spots in perceiving analytical intent. The static configuration method adopted by developers is fundamentally flawed in its "unchanging approach," pre-setting fixed position offset rules that are completely unable to perceive and respond to dynamically changing data content, users' real-time analytical intent, and the ever-changing display environment. When users zoom in on a specific period on the timeline, switch the combination of indicators for comparison, or adjust the view size, the pre-set rules immediately become invalid. More importantly, existing technologies completely lack the ability to discern user analytical intent, failing to determine which data points in the current view represent the core trends, key extremes, or abnormal fluctuations that the user is interested in. Therefore, they cannot make focused and prioritized layout decisions when labels conflict, resorting only to indiscriminate hiding or chaotic stacking, resulting in inefficient information delivery. Third, passive compromises in functionality lead to a fragmented user experience. To circumvent the shortcomings of layout algorithms, existing solutions often adopt passive compromise strategies such as hiding labels and relying on interactive triggers: either hiding most labels, resulting in the loss of key information; or relying entirely on passively triggering numerical displays through mouse hover and other interactive operations, breaking the otherwise clear data interpretation process into a tedious and continuous mouse exploration process. This design sacrifices the intuitiveness and fluency that charts should possess as professional analytical tools, interrupting the user's analytical train of thought, and contradicting the core need in professional monitoring scenarios for rapid and continuous acquisition of global and detailed insights. Fourth, a lack of collaborative layout and global optimization capabilities. Existing methods are isolated and localized when dealing with complex charts, failing to coordinate the spatial competition between different data series and chart elements of different types, such as column labels, line point labels, and axis markers. This deficiency is further amplified in complex views such as those with dual Y-axes: indicator labels of different dimensions and importance compete disorderly within a narrow space. Due to the lack of global spatial planning and priority scheduling capabilities, existing technologies ultimately produce a chaotic layout and a lack of hierarchy, failing to highlight core analytical information. Summary of the Invention

[0006] To address the aforementioned issues, this invention provides an intelligent label avoidance method and system for ECharts hybrid chart data, which can meet the intelligent label avoidance needs of data analysis, improve the information delivery efficiency of data visualization, and enhance the quality of user experience.

[0007] To achieve the above objectives, the technical solution adopted by the present invention is as follows:

[0008] An ECharts hybrid chart data label intelligent avoidance method includes the following steps:

[0009] S1. Extract the data points corresponding to the supported chart types from the chart configuration object and ECharts instance data series, and construct a label configuration array containing text content, original coordinates and attribute information;

[0010] S2. Measure the text size using the Canvas API, calculate the bounding box of each label based on the original coordinates, and perform spatial conflict detection based on the number of labels and the bounding boxes to generate a conflict mapping table;

[0011] S3. Based on the chart type and the conflict mapping table, different avoidance strategies are used for collaborative processing of different types of label conflicts to obtain the adjusted optimal label position;

[0012] S4. Update the optimal label position to the ECharts configuration to generate the optimal chart display configuration.

[0013] Further, in step S1, the method for constructing the tag configuration array includes:

[0014] S1.1 Obtain the chart configuration object and ECharts instance data series, and traverse all data series in the chart configuration object to filter out the target data series whose chart type is line chart or bar chart;

[0015] S1.2 For each data point in the target data series, extract the value of the data point, convert the data coordinates of the data point into pixel coordinates through the coordinate transformation interface provided by the data visualization library instance, and construct a label configuration object with the value and the pixel coordinates;

[0016] S1.3 Gather all the constructed tag configuration objects to form a tag configuration array.

[0017] Further, in step S1, in step S1.2, the label configuration object includes a unique identifier, label text, and location information. The unique identifier is generated based on the chart type, series index, and data index of the current data series. The label text is a string representation of the numerical value, and the location information is composed of the pixel coordinates.

[0018] Further, in step S2, the method for calculating the bounding box includes:

[0019] S2.1.1 Obtain the data labels and corresponding data coordinates from the label configuration array, wherein the data coordinates include data index and value;

[0020] S2.1.2 The data coordinates are converted into pixel coordinates in the chart canvas using the coordinate transformation method of the chart instance, and the pixel coordinates are determined as the center point of the bounding box of the data label;

[0021] S2.1.3 Based on the text content, font size, and font family of the data tag, measure the text width of the text content using the Canvas API;

[0022] S2.1.4 Calculate the width and height of the bounding box based on the text width and the preset inner margin parameters, and calculate the coordinates of the upper left corner of the bounding box based on the center point of the bounding box, the width, and the height, so as to obtain the space occupied by the data label in the chart.

[0023] Further, in step S2, the method for generating the conflict mapping table includes:

[0024] S2.2.1 Obtain the number of tags and the information of the bounding box;

[0025] S2.2.2 Determine whether the number of tags in the tag configuration array is greater than a preset threshold;

[0026] S2.2.3 If the number of tags is less than or equal to the preset threshold, a brute-force detection algorithm is used to determine whether there is overlap between every two bounding boxes of tags;

[0027] S2.2.4 If the number of tags is greater than the preset threshold, a spatial index is established by a quadtree spatial partitioning algorithm. By judging the quadrant to which the tag bounding box belongs or spans, only the overlapping relationship of tags in the same quadrant and adjacent quadrants is detected.

[0028] S2.2.5 Record all detected overlapping label pairs and their overlap status and generate a conflict mapping table, which is used to indicate the spatial conflict relationship between all labels in the chart.

[0029] Further, in step S3, the steps of the differentiated avoidance strategy include:

[0030] S3.1 Identify the type of the series in the chart, wherein the chart type includes a single chart type and a mixed chart type, wherein the single chart type is a bar chart or a line chart, and the mixed chart type is a combination of bar chart and line chart;

[0031] S3.2 Based on the x-axis coordinates and the conflict mapping table, group the overlapping labels;

[0032] S3.3 For overlapping labels of multiple bar charts at the same x-axis position, a symmetrical distribution avoidance strategy is adopted; for overlapping labels of multiple line charts at the same x-axis position, a vertical layering strategy is adopted; for overlapping labels of bar charts and line charts in mixed charts, a collaborative avoidance strategy is adopted.

[0033] Further, in step S3.3, the symmetrical distribution avoidance strategy is as follows: according to the series index order of the tags within the group, the tags are alternately assigned upward and downward offsets in the vertical direction; wherein, tags with even-numbered indices receive a first upward offset, and tags with odd-numbered indices receive a second downward offset.

[0034] The vertical layering strategy is as follows: based on the series index order of the tags within a group, the tags are alternately assigned upward and downward layering offsets in the vertical direction, so that tags of different series form a clear hierarchy in the vertical direction.

[0035] The collaborative avoidance strategy is as follows: uniformly adjust the bar chart labels upward by the third offset, and uniformly adjust the line chart labels downward by the fourth offset; or calculate the optimal label position through an iterative optimizer.

[0036] Further, in step S3.3, the iterative optimizer calculation step includes:

[0037] Calculate the priority of each tag, whereby the priority is determined based on the absolute value of the data corresponding to the tag; sort the tags in descending order of priority; when multiple tags have the same processing priority, determine the order of the tags based on the absolute value of their data values ​​from largest to smallest; and perform position adjustment operations on each tag sequentially according to the sorted order.

[0038] S3.3.1 The original position coordinates of the label are used as the reference position;

[0039] S3.3.2 Select each search direction from the preset direction set in descending order of preset direction weights;

[0040] S3.3.3 For the currently selected search direction, starting from the initial offset distance with a preset step size, the offset distance is gradually increased until the preset maximum search distance is reached. In each step, the candidate position coordinates are calculated, where the candidate position coordinates = reference position coordinates + unit direction vector of the search direction × current offset distance;

[0041] S3.3.4 Perform a validity check on the coordinates of each candidate position. The validity check includes: determining whether the candidate position is within the boundary of the chart canvas and determining whether the candidate position collides with the label of the determined position; and taking the candidate positions that pass the validity check as valid candidate positions.

[0042] S3.3.5 For the valid candidate positions, calculate a comprehensive score based on their offset distance and the preset directional weight of the corresponding search direction, wherein the comprehensive score increases as the offset distance decreases and as the directional weight increases;

[0043] S3.3.6 Determine the optimal position of the currently processed tag as the valid candidate position with the highest comprehensive score to obtain the optimal tag position;

[0044] S3.3.7 During the search process, if the comprehensive score of any of the valid candidate positions reaches a preset score threshold, then the valid candidate position is determined as the optimal position of the current label and the search for that label is terminated.

[0045] Further, in step S3.3.5, the method for calculating the comprehensive score is as follows:

[0046] Score = (1 - distance / maxDistance) × W d + D w × W dir

[0047] Where distance is the offset distance; maxDistance is the maximum search distance; Dw is the direction weight of the current search direction; W d For distance factor weights, W dir The directional factor weights vary depending on the search direction, with the upper direction having the highest weight and the lower direction having the lowest weight.

[0048] An ECharts hybrid chart data label intelligent avoidance system, to implement an ECharts hybrid chart data label intelligent avoidance method, includes:

[0049] The label collection and bounding box calculation module is used to extract label configurations from chart instances and calculate space usage.

[0050] The chart scene recognition module is used to identify the current combination of chart types;

[0051] The collision detection module is used to detect spatial overlap between tags;

[0052] The multi-strategy collaborative avoidance module is used to implement corresponding avoidance strategies based on different chart scenarios;

[0053] The configuration generation module is used to output the final chart configuration that conforms to the ECharts specification.

[0054] The beneficial effects of this invention are:

[0055] Instead of using a single fixed strategy, the system automatically selects and combines different avoidance strategies based on chart type. It is no longer limited to a single chart type or low-density scenarios, but can adaptively handle high-complexity visualization needs such as multi-series line charts, clustered bar charts, and mixed bar and line charts, ensuring clear label readability under any data density. Simultaneously, multi-strategy collaboration can comprehensively handle spatial competition between different types of chart elements. Through dynamic partitioning, path planning, and conflict resolution algorithms, it achieves cross-regional coordinated layout in complex coordinate systems such as dual Y-axis, ensuring a clear hierarchy and distinct overall visual effect. Furthermore, the quadtree dynamic partitioning method significantly reduces computational complexity compared to global brute-force detection, enabling the system to efficiently handle conflict detection for a large number of labels. In the symmetrical distribution avoidance sub-strategy for line chart labels, labels are only offset vertically to maintain horizontal alignment with corresponding data points. In general iterative optimization scenarios, multi-directional candidate search is used for global conflict resolution. Compared to unconstrained omnidirectional movement, this maintains a close connection between labels and the data source, preventing labels from drifting excessively away from data points and improving chart readability. In the collaborative tag avoidance strategy, through multiple iterations and optimizations, the optimal tag position is found while ensuring tag visibility. Compared to simple random adjustments or fixed rules, this approach intelligently guarantees the visibility of important data tags while optimizing the overall layout. This invention can adapt to different business scenarios, screen sizes, and user preferences, possesses good scalability, and can continuously optimize as data analysis needs evolve and the technological environment changes. It provides an intelligent tag avoidance system that meets data analysis requirements, thereby improving the efficiency of information delivery in data visualization and the quality of user experience. Attached Figure Description

[0056] Figure 1 This is a flowchart of a preferred embodiment of the present invention.

[0057] Figure 2 This is a schematic diagram of a preferred embodiment of the present invention for force detection.

[0058] Figure 3This is a schematic diagram of quadtree detection according to a preferred embodiment of the present invention.

[0059] Figure 4 This is a flowchart of a preferred embodiment of the present invention, showing a multi-strategy collaborative process.

[0060] Figure 5 This is an iterative optimization flowchart of a preferred embodiment of the present invention.

[0061] Figure 6 This is the processing flow of Embodiment 1 of the present invention.

[0062] Figure 7 This is the comparison result of Embodiment 1 of the present invention.

[0063] Figure 8 This is the processing flow of Embodiment 2 of the present invention.

[0064] Figure 9 This is the comparison result of Embodiment 2 of the present invention.

[0065] Figure 10 This is the processing flow of Embodiment 3 of the present invention.

[0066] Figure 11 This is the comparison result of Embodiment 3 of the present invention. Detailed Implementation

[0067] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0068] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this invention pertains. The terminology used herein in the description of the invention is for the purpose of describing particular embodiments only and is not intended to be limiting of the invention. The term "and / or" as used herein includes any and all combinations of one or more of the associated listed items.

[0069] Please also see Figures 1 to 5 The present invention provides a preferred embodiment of an ECharts hybrid chart data label intelligent avoidance method, characterized by comprising the following steps:

[0070] S1. Extract the data points corresponding to the supported chart types from the chart configuration object and ECharts instance data series, and construct a label configuration array containing text content, original coordinates, and attribute information.

[0071] In step S1, the method for constructing the label configuration array includes:

[0072] S1.1 Obtain the chart configuration object and ECharts instance data series, and iterate through all data series in the chart configuration object to filter out the target data series whose chart type is line chart or bar chart.

[0073] S1.2 For each data point in the target data series, extract the value of the data point, convert the data coordinates to pixel coordinates through the coordinate transformation interface provided by the data visualization library instance, and construct a label configuration object with the value and pixel coordinates.

[0074] In step S1.2, the label configuration object includes a unique identifier, label text, and location information. The unique identifier is generated based on the chart type, series index, and data index of the current data series. The label text is a string representation of a numerical value, and the location information consists of pixel coordinates.

[0075] S1.3 Gather all the constructed tag configuration objects to form a tag configuration array.

[0076] In this embodiment, the code for the tag collection process is as follows:

[0077]

[0078] S2. Measure the text size using the Canvas API, calculate the bounding box of each label based on the original coordinates, and perform spatial conflict detection based on the number of labels and the bounding boxes to generate a conflict mapping table.

[0079] In step S2, the bounding box is calculated using the following methods:

[0080] S2.1.1 Retrieves the data labels and corresponding data coordinates from the label configuration array. The data coordinates include the data index and the value.

[0081] S2.1.2 Convert the data coordinates to pixel coordinates in the chart canvas using the coordinate transformation method of the chart instance, and determine the pixel coordinates as the center point of the bounding box of the data labels.

[0082] S2.1.3 Measure the text width of the text content using the Canvas API based on the text content, font size, and font family of the data label.

[0083] S2.1.4 Calculate the width and height of the bounding box based on the text width and preset inner margin parameters, and calculate the coordinates of the upper left corner of the bounding box based on the center point, width, and height of the bounding box to obtain the space occupied by the data labels in the chart.

[0084] The code for calculating the bounding box in this embodiment is as follows:

[0085]

[0086] In step S2, the method for generating the conflict mapping table includes:

[0087] S2.2.1 Obtain the number of tags and information about the bounding box.

[0088] S2.2.2 Determine whether the number of tags in the tag configuration array is greater than a preset threshold.

[0089] S2.2.3 If the number of tags is less than or equal to the preset threshold, a brute-force detection algorithm is used to determine whether there is overlap between every two bounding boxes of tags.

[0090] In this embodiment, if the number of tags is less than or equal to a preset threshold, the tag configuration array is traversed pair by pair, and axis-aligned bounding box collision detection is performed on each pair of tags. If the sum of the x-coordinate and width of the first bounding box is less than or equal to the x-coordinate of the second bounding box, or the sum of the x-coordinate and width of the second bounding box is less than or equal to the x-coordinate of the first bounding box, or the sum of the y-coordinate and height of the first bounding box is less than or equal to the y-coordinate of the second bounding box, or the sum of the y-coordinate and height of the second bounding box is less than or equal to the y-coordinate of the first bounding box, then the tags to be detected are determined not to overlap; otherwise, they are determined to overlap.

[0091] S2.2.4 If the number of tags exceeds the preset threshold, a spatial index is established using a quadtree spatial partitioning algorithm. By determining the quadrant to which the tag's bounding box belongs or spans, only the overlapping relationship of tags in the same quadrant and adjacent quadrants is detected.

[0092] In this embodiment, when the number of tags exceeds a preset threshold, a quadtree spatial index is constructed based on the bounding boxes of each tag. During the construction process, the vertical and horizontal midpoints are calculated according to the boundaries of the current node's bounding box. The x-coordinate and the sum of the x-coordinate and width of the object's bounding box are compared with the vertical midpoint, and the y-coordinate and the sum of the y-coordinate and height of the object's bounding box are compared with the horizontal midpoint to determine the quadrant index to which the object belongs. When performing collision detection, the detection range is determined according to the positional relationship between the tag and the quadrant: for tags completely located within a certain quadrant, only other tags within that quadrant and tags within adjacent quadrants are detected; for tags that cross quadrant boundaries, tags within all quadrants are detected.

[0093] S2.2.5 records all detected overlapping label pairs and their overlap status and generates a conflict mapping table, which is used to indicate the spatial conflict relationship between all labels in the chart.

[0094] In this embodiment, the collision detection algorithm includes:

[0095] First layer: brute force detection (number of labels ≤ 10), time complexity: O(n²), compare all labels pairwise, use AABB collision detection; AABB collision detection code is:

[0096]

[0097] like Figure 2 As shown, an example of AABB collision detection:

[0098]

[0099] Second layer: Quadtree acceleration (number of labels > 10), time complexity: O(n log n), construct spatial index tree, only detect labels in the same quadrant and adjacent quadrants, for labels that cross quadrant boundaries, detect labels in all quadrants.

[0100] The specific process for quadtree detection range is as follows:

[0101] When the label is completely within a quadrant, other labels in the same quadrant are detected, labels in adjacent quadrants are detected, and labels in diagonal quadrants are not detected (overlapping across quadrant boundaries is not considered).

[0102] When a label crosses a quadrant boundary, all labels in all quadrants are checked to ensure that no possible overlaps are missed.

[0103] like Figure 3 The diagram shows the quadtree splitting logic, with the quadrant index calculated as follows:

[0104]

[0105] S3. Based on the chart type and conflict mapping table, different avoidance strategies are adopted for different types of label conflicts to achieve the optimal adjusted label position.

[0106] like Figure 4 As shown, in step S3, the steps of the differentiated avoidance strategy include:

[0107] S3.1 Identify the type of the series in the chart. The chart type includes single chart type and mixed chart type. The single chart type is a bar chart or a line chart, and the mixed chart type is a combination of bar chart and line chart.

[0108] S3.2 Based on the x-axis coordinates and the conflict mapping table, group the overlapping labels;

[0109] S3.3 For overlapping labels of multiple bar charts at the same x-axis position, a symmetrical distribution avoidance strategy is adopted; for overlapping labels of multiple line charts at the same x-axis position, a vertical layering strategy is adopted; for overlapping labels of bar charts and line charts in mixed charts, a collaborative avoidance strategy is adopted.

[0110] In step S3.3, the symmetrical distribution avoidance strategy is as follows: according to the series index order of the tags within the group, the tags are alternately assigned upward and downward offsets in the vertical direction; wherein, tags with even-numbered indices receive the first upward offset, and tags with odd-numbered indices receive the second downward offset.

[0111] The vertical layering strategy is as follows: based on the series index order of the tags within a group, alternately assign upward and downward layering offsets to the tags in the vertical direction, so that tags of different series form a clear hierarchy in the vertical direction;

[0112] The collaborative avoidance strategy is to uniformly adjust the bar chart labels upward by the third offset and uniformly adjust the line chart labels downward by the fourth offset; or to calculate the optimal label position through an iterative optimizer.

[0113] In the symmetrical distribution avoidance of bar charts, multiple bar labels at the same x-axis position are arranged symmetrically. This vertical symmetry avoids overlap and ensures the labels remain near the bars, preventing them from straying excessively from the data source. The implementation code is as follows:

[0114]

[0115] In the symmetrical distribution avoidance of line charts, multiple line labels at the same x-axis position adopt a symmetrical distribution strategy, alternating vertically to maintain a close relationship between the labels and data points. The implementation code is as follows:

[0116]

[0117] In the mixed chart design, the labels for bar charts and line charts are coordinated and avoided. The optimal position is found through iterative optimization to ensure that both types of labels are clearly displayed. The implementation code is as follows:

[0118]

[0119] like Figure 5 As shown, in step S3.3, the iterative optimizer calculation step includes:

[0120] Calculate the priority of each tag, and the priority is determined based on the absolute value of the data corresponding to the tag; sort the multiple tags in descending order of priority. When multiple tags have the same processing priority, determine the order of the multiple tags according to the absolute value of their data values ​​from largest to smallest.

[0121] In this embodiment, the priority of each label is equal to the absolute value of its corresponding data. During the iterative optimization process, the system sorts the labels from highest to lowest priority. Labels with higher priority (corresponding to larger values) are moved first, while lower priority labels are moved aside. This ensures that the largest value in the chart receives optimal display, preventing excessive movement or hiding. The priority calculation code is as follows:

[0122]

[0123] The code for optimal position search is:

[0124]

[0125] Perform position adjustment operations on each label in the sorted order:

[0126] S3.3.1 Use the original position coordinates of the label as the reference position.

[0127] S3.3.2 Select each search direction in the preset direction set in descending order of preset direction weights; traverse the 8 directions (up, up right, right, down right, down, down left, left, up left) according to weight. Inner loop: start from stepSize, and gradually increase the offset distance with stepSize as the step size until maxDistance is reached.

[0128] S3.3.3 For the currently selected search direction, starting from the initial offset distance with a preset step size, the offset distance is gradually increased until the preset maximum search distance is reached. In each step, the candidate position coordinates are calculated, where the candidate position coordinates = reference position coordinates + unit direction vector of the search direction × current offset distance;

[0129] In this embodiment, candidate positions are calculated for each combination of direction and distance:

[0130] candidateX = baseX + direction.dx × distance

[0131] candidateY = baseY + direction.dy × distance

[0132] S3.3.4 Perform a validity check on the coordinates of each candidate position. The validity check includes: determining whether the candidate position is within the boundary of the chart canvas, and determining whether the candidate position collides with the label of the determined position; and taking the candidate positions that pass the validity check as valid candidate positions.

[0133] S3.3.5 For valid candidate positions, calculate a comprehensive score based on their offset distance and the preset directional weight of the corresponding search direction. The comprehensive score increases as the offset distance decreases and as the directional weight increases.

[0134] In step S3.3.5, the comprehensive score is calculated as follows:

[0135] Score = (1 - distance / maxDistance) × W d + D w × W dir

[0136] Where distance is the offset distance; maxDistance is the maximum search distance; Dw is the direction weight of the current search direction; W d For distance factor weights, W dir The directional factor weights vary depending on the search direction, with the upward direction having the highest weight and the downward direction having the lowest weight.

[0137] S3.3.6 The optimal position of the currently processed label is determined as the valid candidate position with the highest comprehensive score, so as to obtain the optimal label position.

[0138] S3.3.7 During the search process, if the comprehensive score of any valid candidate position reaches the preset score threshold, then the valid candidate position is determined as the optimal position of the current label and the search for that label is terminated.

[0139] In this embodiment, the distance score = 1 - (distance / maxDistance), and the closer the distance, the higher the score.

[0140] Directional score = D w Directions with higher weights receive higher scores.

[0141] Overall score = Distance score × 0.6 + Direction score × 0.4

[0142] Comparison Score: If the score of the current candidate position is higher than the historical best score, then update the best candidate position and the best score.

[0143] Early exit mechanism: When a candidate position with a score ≥ 0.8 is found, the search is stopped immediately and the position is returned, which can avoid unnecessary calculations and improve the efficiency of the algorithm.

[0144] S4. Update the optimal label position to the ECharts configuration to generate the optimal chart display configuration.

[0145] An ECharts hybrid chart data label intelligent avoidance system, to implement an ECharts hybrid chart data label intelligent avoidance method, includes:

[0146] The label collection and bounding box calculation module is used to extract label configurations from chart instances and calculate space usage.

[0147] The chart scene recognition module is used to identify the current combination of chart types;

[0148] The collision detection module is used to detect spatial overlap between tags;

[0149] The multi-strategy collaborative avoidance module is used to implement corresponding avoidance strategies based on different chart scenarios;

[0150] The configuration generation module is used to output the final chart configuration that conforms to the ECharts specification.

[0151] Example 1: Label Avoidance in Multi-Column Charts

[0152] Showing a comparison between import and export trade volumes:

[0153] The data is configured as follows:

[0154]

[0155] The processing flow is as follows:

[0156] Collect 16 labels (8 x-axis positions × 2 series);

[0157] Calculate the bounding box: each tag is approximately 40px wide and 18px high;

[0158] Conflict detection: 8 overlaps were found (one at each x-axis position);

[0159] Application strategy: Use symmetrical distribution to avoid collisions, keep the first series of labels at the top, and layer the second series of labels downwards.

[0160] Result: All labels were clearly visible and remained near the pillar throughout. The avoidance process was as follows: Figure 6 As shown, the comparison before and after the avoidance is as follows: Figure 7 As shown.

[0161] Example 2: Label Avoidance in Double Line Charts

[0162] A comparison of growth rate trends between AA and BB provinces:

[0163] The data is configured as follows:

[0164]

[0165] Processing flow:

[0166] Collect 16 labels (8 x-axis positions × 2 lines);

[0167] Detection of collisions: Two overlaps were found (especially in positions where the values ​​are close).

[0168] Application strategy: Adopt symmetrical distribution for avoidance and rationally arrange upper and lower layers;

[0169] Results: The labels for the two lines are located on the top and bottom sides respectively, maintaining a symmetrical distribution; the avoidance process is as follows: Figure 8 As shown, the comparison before and after the avoidance is as follows: Figure 9 As shown.

[0170] Example 3: Label Avoidance in Hybrid Charts (Bar Charts)

[0171] Displaying infrastructure investment (bar chart) and year-on-year growth rate (line chart):

[0172] The data is configured as follows:

[0173]

[0174] Processing flow:

[0175] Collect 16 labels (8 x-axis positions × 2 types);

[0176] Identify chart type: a mix of bar and line charts;

[0177] Conflict detection: Two instances of mixed-type overlap were detected;

[0178] Application strategy: Use an iterative optimizer for coordinated avoidance, prioritizing keeping bar chart labels unchanged and line chart labels downwards;

[0179] Results: The two types of labels were clearly separated, each maintaining a close connection with the data; the avoidance process was as follows: Figure 10 As shown, the comparison before and after the avoidance is as follows: Figure 11 As shown.

Claims

1. A method for intelligently avoiding data labels in ECharts hybrid charts, characterized in that, Includes the following steps: S1. Extract the data points corresponding to the supported chart types from the chart configuration object and ECharts instance data series, and construct a label configuration array containing text content, original coordinates and attribute information; S2. Measure the text size using the Canvas API, calculate the bounding box of each label based on the original coordinates, and perform spatial conflict detection based on the number of labels and the bounding boxes to generate a conflict mapping table; S3. Based on the chart type and the conflict mapping table, different avoidance strategies are used for collaborative processing of different types of label conflicts to obtain the adjusted optimal label position; S4. Update the optimal label position to the ECharts configuration to generate the optimal chart display configuration.

2. The ECharts hybrid chart data label intelligent avoidance method according to claim 1, characterized in that: In step S1, the method for constructing the tag configuration array includes: S1.1 Obtain the chart configuration object and ECharts instance data series, and traverse all data series in the chart configuration object to filter out the target data series whose chart type is line chart or bar chart; S1.2 For each data point in the target data series, extract the value of the data point, convert the data coordinates of the data point into pixel coordinates through the coordinate transformation interface provided by the data visualization library instance, and construct a label configuration object with the value and the pixel coordinates; S1.3 Gather all the constructed tag configuration objects to form a tag configuration array.

3. The ECharts hybrid chart data label intelligent avoidance method according to claim 2, characterized in that: In step S1, and in step S1.2, the label configuration object includes a unique identifier, label text, and location information. The unique identifier is generated based on the chart type, series index, and data index of the current data series. The label text is a string representation of the numerical value, and the location information is composed of the pixel coordinates.

4. The ECharts hybrid chart data label intelligent avoidance method according to claim 1, characterized in that: In step S2, the method for calculating the bounding box includes: S2.1.1 Obtain the data labels and corresponding data coordinates from the label configuration array, wherein the data coordinates include data index and value; S2.1.2 The data coordinates are converted into pixel coordinates in the chart canvas using the coordinate transformation method of the chart instance, and the pixel coordinates are determined as the center point of the bounding box of the data label; S2.1.3 Based on the text content, font size, and font family of the data tag, measure the text width of the text content using the Canvas API; S2.1.4 Calculate the width and height of the bounding box based on the text width and the preset inner margin parameters, and calculate the coordinates of the upper left corner of the bounding box based on the center point of the bounding box, the width, and the height, so as to obtain the space occupied by the data label in the chart.

5. The ECharts hybrid chart data label intelligent avoidance method according to claim 4, characterized in that: In step S2, the method for generating the conflict mapping table includes: S2.2.1 Obtain the number of tags and the information of the bounding box; S2.2.2 Determine whether the number of tags in the tag configuration array is greater than a preset threshold; S2.2.3 If the number of tags is less than or equal to the preset threshold, a brute-force detection algorithm is used to determine whether there is overlap between every two bounding boxes of tags; S2.2.4 If the number of tags is greater than the preset threshold, a spatial index is established by a quadtree spatial partitioning algorithm. By judging the quadrant to which the tag bounding box belongs or spans, only the overlapping relationship of tags in the same quadrant and adjacent quadrants is detected. S2.2.5 Record all detected overlapping label pairs and their overlap status and generate a conflict mapping table, which is used to indicate the spatial conflict relationship between all labels in the chart.

6. The ECharts hybrid chart data label intelligent avoidance method according to claim 1, characterized in that: In step S3, the steps of the differentiated avoidance strategy include: S3.1 Identify the type of the series in the chart, wherein the chart type includes a single chart type and a mixed chart type, wherein the single chart type is a bar chart or a line chart, and the mixed chart type is a combination of bar chart and line chart; S3.2 Based on the x-axis coordinates and the conflict mapping table, group the overlapping labels; S3.3 For overlapping labels of multiple bar charts at the same x-axis position, a symmetrical distribution avoidance strategy is adopted; for overlapping labels of multiple line charts at the same x-axis position, a vertical layering strategy is adopted; for overlapping labels of bar charts and line charts in mixed charts, a collaborative avoidance strategy is adopted.

7. The ECharts hybrid chart data label intelligent avoidance method according to claim 6, characterized in that: In step S3.3, the symmetrical distribution avoidance strategy is as follows: according to the series index order of the tags within the group, the tags are alternately assigned upward and downward offsets in the vertical direction; wherein, tags with even-numbered indices receive a first upward offset, and tags with odd-numbered indices receive a second downward offset. The vertical layering strategy is as follows: based on the series index order of the tags within a group, the tags are alternately assigned upward and downward layering offsets in the vertical direction, so that tags of different series form a clear hierarchy in the vertical direction. The collaborative avoidance strategy is as follows: uniformly adjust the bar chart labels upward by the third offset, and uniformly adjust the line chart labels downward by the fourth offset; or calculate the optimal label position through an iterative optimizer.

8. The ECharts hybrid chart data label intelligent avoidance method according to claim 7, characterized in that: In step S3.3, the iterative optimizer calculation step includes: Calculate the priority of each tag, whereby the priority is determined based on the absolute value of the data corresponding to the tag; sort the tags in descending order of priority; when multiple tags have the same processing priority, determine the order of the tags based on the absolute value of their data values ​​from largest to smallest; and perform position adjustment operations on each tag sequentially according to the sorted order. S3.3.1 The original position coordinates of the label are used as the reference position; S3.3.2 Select each search direction from the preset direction set in descending order of preset direction weights; S3.3.3 For the currently selected search direction, starting from the initial offset distance with a preset step size, the offset distance is gradually increased until the preset maximum search distance is reached. In each step, the candidate position coordinates are calculated, where the candidate position coordinates = reference position coordinates + unit direction vector of the search direction × current offset distance; S3.3.4 Perform a validity check on the coordinates of each candidate position. The validity check includes: determining whether the candidate position is within the boundary of the chart canvas and determining whether the candidate position collides with the label of the determined position; and taking the candidate positions that pass the validity check as valid candidate positions. S3.3.5 For the valid candidate positions, calculate a comprehensive score based on their offset distance and the preset directional weight of the corresponding search direction, wherein the comprehensive score increases as the offset distance decreases and as the directional weight increases; S3.3.6 Determine the optimal position of the currently processed tag as the valid candidate position with the highest comprehensive score to obtain the optimal tag position; S3.3.7 During the search process, if the comprehensive score of any of the valid candidate positions reaches a preset score threshold, then the valid candidate position is determined as the optimal position of the current label and the search for that label is terminated.

9. The ECharts hybrid chart data label intelligent avoidance method according to claim 7, characterized in that: In step S3.3.5, the comprehensive score is calculated as follows: Score = (1 - distance / maxDistance) × W d + D w × W dir Where distance is the offset distance; maxDistance is the maximum search distance; Dw is the direction weight of the current search direction; W d For distance factor weights, W dir The directional factor weights vary depending on the search direction, with the upper direction having the highest weight and the lower direction having the lowest weight.

10. An ECharts hybrid chart data label intelligent avoidance system, to implement the ECharts hybrid chart data label intelligent avoidance method according to any one of claims 1-9, characterized in that, include: The label collection and bounding box calculation module is used to extract label configurations from chart instances and calculate space usage. The chart scene recognition module is used to identify the current combination of chart types; The collision detection module is used to detect spatial overlap between tags; The multi-strategy collaborative avoidance module is used to implement corresponding avoidance strategies based on different chart scenarios; The configuration generation module is used to output the final chart configuration that conforms to the ECharts specification.

Images