Method and device for solving the fuzziness of ECharts chart in svg mode

Abstract

The embodiment of the present invention provides a method, device and electronic device for solving the fuzziness of ECharts charts in svg mode, belonging to the field of data processing technology, the method comprising: using Reacthooks to initialize the chart when the component is mounted, and re-rendering when the series data changes; dynamically configuring the chart according to the incoming props, and using the setOption method to render the chart after the configuration is completed; processing the incoming series data, adding additional styles and configurations; using the setOption method to render the chart after the configuration is completed; when the chart rendering is completed, using the myChart.on('rendered',()=>{dealPath(chartID);}) method to modify the transform attributes of all path tags under the chart dom, and rounding the transform attribute values ​​to integers. The present invention improves the clarity of ECharts charts in svg mode.

Description

Technical Field

[0001] The present invention relates to the field of data processing technology, and in particular to a method, device and electronic device for solving the fuzziness of an ECharts chart in svg mode. Background Art

[0002] ECharts is an open source visualization chart library that provides a variety of chart types, suitable for displaying large amounts of data, and supports a variety of interactive functions. ECharts can help developers quickly visualize data on Web pages, making data more intuitive and easy to understand.

[0003] ECharts is mainly based on HTML5 Canvas technology for drawing, so it can provide high-performance graphics processing capabilities. In addition, ECharts also supports SVG, so it can perform well on some old browsers that do not support Canvas.

[0004] ECharts is widely used in business monitoring, statistical analysis reports, geographic information systems and other occasions. Especially when real-time data updates are required, ECharts can adapt well to such needs.

[0005] When ECharts charts are rendered using svg, if a part of the chart has a path tag with transform="translate(xy)", if x or y is not an integer, blur will occur in the corresponding direction. The reason for the blur is that part of the graphic may be located in the middle of a pixel, causing the browser to perform anti-aliasing on these boundaries, resulting in blur.

[0006] The above problems become technical problems that need to be solved. Summary of the invention

[0007] In view of this, the embodiments of the present invention provide a method, device and electronic device for solving the problem of blurring of ECharts charts in svg mode, which at least partially solve the problems existing in the prior art.

[0008] In a first aspect, an embodiment of the present invention provides a method for solving the fuzziness of an ECharts chart in svg mode, comprising:

[0009] Use Reacthooks to initialize the chart when the component mounts and re-render when the series data changes;

[0010] Use the echarts library to initialize the chart, set the chart's color, tooltip, legend, x-axis, y-axis, and grid, dynamically configure the chart based on the passed props, and use the setOption method to render the chart after the configuration is complete;

[0011] Process the incoming series data, add additional styles and configurations, customize the content and position of tooltips, implement click events on charts, and support triggering callbacks by clicking on data points;

[0012] Dynamically adjust the position and style of the tooltip, use a custom formatter function to format the axis label and legend text, and use the setOption method to render the chart after configuration is complete;

[0013] After the chart is rendered, use the myChart.on('rendered',()=>{dealPath(chartID);}) method to modify the transform attributes of all path tags under the chart dom, and round the transform attribute values ​​to integers.

[0014] According to a specific implementation of an embodiment of the present disclosure, using Reacthooks to initialize a chart when a component is mounted and re-rendering when series data changes includes:

[0015] When the dependency array of useEffect is empty, initialize the ECharts chart instance;

[0016] Configure the series part of the chart according to the passed seriesDataprop;

[0017] Use useState to store chart status and series data;

[0018] When seriesDataprop changes, update the state and trigger a re-render of the component;

[0019] Each time the state is updated, use chartInstance.setOption() to apply the new configuration.

[0020] According to a specific implementation of an embodiment of the present disclosure, the method of using the echarts library to initialize a chart and set the color, tooltip, legend, x-axis, y-axis and grid of the chart includes:

[0021] Create a new ECharts instance in the DOM element;

[0022] Define a color array and assign the color array to the color configuration item;

[0023] Set the triggering conditions of the tooltip based on the data item, and use a custom formatter function to control the content and layout of the tooltip;

[0024] Set the type of X-axis and Y-axis, and define the position and size of the chart drawing area;

[0025] Combine all configuration items into a configuration object and apply these configurations through chartInstance.setOption(config).

[0026] According to a specific implementation of the embodiment of the present disclosure, the dynamically configuring the chart according to the passed props and rendering the chart using the setOption method after the configuration is completed include:

[0027] Construct the configuration object required by ECharts based on the received props, which contains the necessary configuration items of the chart;

[0028] Use the setOption method to apply the constructed configuration object to the chart instance;

[0029] If props change during the component lifecycle, rebuild the configuration object and call the setOption method again to refresh the chart.

[0030] According to a specific implementation of the embodiment of the present disclosure, the processing of the incoming series data and adding additional styles and configurations includes:

[0031] Analyze the incoming series data structure, determine the data type, and add different colors to different types of data points;

[0032] Configure data labels to display values ​​directly on the chart and set the label's position, font size, and color.

[0033] According to a specific implementation of the embodiment of the present disclosure, the content and position of the customized tooltip implements a click event of the chart and supports triggering a callback by clicking a data point, including:

[0034] Use the formatter function to customize the content of the tooltip. The formatter function receives the data point information that the mouse is hovering over and returns a string. The returned string is displayed in the tooltip.

[0035] Use the position function to adjust the position of the tooltip. The position function receives the current mouse position and returns the position coordinates of the tooltip. ECharts automatically adjusts the position of the tooltip according to the mouse position.

[0036] Register a click event listener on the ECharts chart through chartInstance.on('click', callback). callback is the callback function, which is called when the user clicks the chart.

[0037] In the callback function, access the name, value, and index of the clicked data point, and based on the accessed click data value, jump to the detail page.

[0038] According to a specific implementation of the embodiment of the present disclosure, the custom formatter function is used to format the axis label and the legend text, and after the configuration is completed, the setOption method is used to render the chart, including:

[0039] In the chart configuration options, set the axisLabel property for the X-axis and Y-axis and specify a custom formatter function;

[0040] Use a custom formatter function in the legend configuration to generate legend text containing additional information;

[0041] Use the chartInstance.setOption() method to apply the configuration to the chart instance to complete the rendering of the chart.

[0042] According to a specific implementation of the embodiment of the present disclosure, the axis labels and legend texts are formatted using a custom formatter function, and after the configuration is completed, the chart is rendered using the setOption method, which also includes:

[0043] Construct a chart configuration object option, which includes various chart configuration items;

[0044] Construct the formatter function F to format the axis labels and legend text:

[0045] F(S)=μ+k1*σ+k2*g

[0046] Among them, μ is the mean value of the value in the object option, σ is the standard deviation of the value in the object option, g is the growth rate of the value in the object option, k1 and k2 are weight coefficients

[0047] Use the F function to format axis labels and legend text.

[0048] In a second aspect, an embodiment of the present invention provides a device for solving the fuzziness of an ECharts chart in svg mode, comprising:

[0049] Initial module, using Reacthooks to initialize the chart when the component is mounted, and re-render when the series data changes;

[0050] Configuration module, use echarts library to initialize the chart, set the chart's color, tooltip, legend, x-axis, y-axis and grid, dynamically configure the chart according to the passed props, and use the setOption method to render the chart after the configuration is completed;

[0051] Processing module, which processes the incoming series data, adds additional styles and configurations, customizes the content and position of tooltips, implements click events on charts, and supports triggering callbacks by clicking on data points;

[0052] Adjust the module, dynamically adjust the position and style of the tooltip, use a custom formatter function to format the axis label and legend text, and use the setOption method to render the chart after the configuration is complete;

[0053] Modify the module. After the chart is rendered, use the myChart.on('rendered', ()=>{dealPath(chartID);}) method to modify the transform attributes of all path tags under the chart dom, and round the transform attribute values ​​to integers.

[0054] In a third aspect, an embodiment of the present invention further provides an electronic device, the electronic device comprising:

[0055] at least one processor; and,

[0056] a memory communicatively connected to the at least one processor; wherein,

[0057] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to execute the method for solving the blurriness of the ECharts chart in svg mode in any of the first aspects or any of the implementations of the first aspect.

[0058] In a fourth aspect, an embodiment of the present invention further provides a non-transitory computer-readable storage medium, which stores computer instructions, and the computer instructions are used to enable the computer to execute the method for solving the blurriness of ECharts charts in svg mode in the aforementioned first aspect or any implementation of the first aspect.

[0059] In a fifth aspect, an embodiment of the present invention further provides a computer program product, which includes a computer program stored on a non-transitory computer-readable storage medium, and the computer program includes program instructions. When the program instructions are executed by a computer, the computer executes the method for solving the blurriness of ECharts charts in svg mode in the aforementioned first aspect or any implementation of the first aspect.

[0060] The solution to the fuzzy ECharts chart in svg mode in the embodiment of the present invention includes: using Reacthooks to initialize the chart when the component is mounted, and re-rendering when the series data changes; using the echarts library to initialize the chart, set the chart's color, tooltip, legend, x-axis, y-axis and grid, dynamically configure the chart according to the incoming props, and use the setOption method to render the chart after the configuration is completed; process the incoming series data, add additional styles and configurations, customize the content and position of the tooltip, implement the click event of the chart, and support triggering callbacks by clicking on data points; dynamically adjust the position and style of the tooltip, use a custom formatter function to format the axis label and legend text, and use the setOption method to render the chart after the configuration is completed; when the chart is rendered, use the myChart.on('rendered',()=>{dealPath(chartID);}) method to modify the transform attribute of all path tags under the chart dom, and round the transform attribute value to integers. Through the solution of this application, the clarity of the ECharts chart can be improved. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0062] Figure 1 A schematic flow chart of a method for solving the fuzziness of ECharts charts in svg mode provided by an embodiment of the present invention;

[0063] Figure 2 A schematic flow chart of another method for solving the fuzziness of ECharts charts in svg mode provided by an embodiment of the present invention;

[0064] Figure 3A schematic diagram of the structure of a device for solving the problem of blurring of ECharts charts in svg mode provided by an embodiment of the present invention;

[0065] Figure 4 A schematic diagram of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0066] The embodiments of the present invention are described in detail below with reference to the accompanying drawings.

[0067] The following describes the embodiments of the present disclosure through specific examples, and those skilled in the art can easily understand other advantages and effects of the present disclosure from the contents disclosed in this specification. Obviously, the described embodiments are only a part of the embodiments of the present disclosure, rather than all of the embodiments. The present disclosure can also be implemented or applied through other different specific embodiments, and 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 disclosure. It should be noted that the following embodiments and features in the embodiments can be combined with each other without conflict. Based on the embodiments in the present disclosure, all other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of the present disclosure.

[0068] It should be noted that various aspects of the embodiments within the scope of the appended claims are described below. It should be apparent that the aspects described herein may be embodied in a wide variety of forms, and any specific structure and / or function described herein is merely illustrative. Based on the present disclosure, it should be understood by those skilled in the art that an aspect described herein may be implemented independently of any other aspect, and two or more of these aspects may be combined in various ways. For example, any number of aspects described herein may be used to implement the device and / or practice the method. In addition, other structures and / or functionalities other than one or more of the aspects described herein may be used to implement this device and / or practice this method.

[0069] It should also be noted that the illustrations provided in the following embodiments are only schematic illustrations of the basic concept of the present disclosure. The drawings only show components related to the present disclosure rather than being drawn according to the number, shape and size of components in actual implementation. In actual implementation, the type, quantity and proportion of each component may be changed arbitrarily, and the component layout may also be more complicated.

[0070] Additionally, in the following description, specific details are provided to facilitate a thorough understanding of the examples. However, it will be understood by those skilled in the art that the aspects described may be practiced without these specific details.

[0071] The embodiment of the present disclosure provides a method for solving the problem of blurring of ECharts charts in SVG mode. The method for solving the problem of blurring of ECharts charts in SVG mode provided in this embodiment can be performed by a computing device, which can be implemented as software or a combination of software and hardware, and can be integrated in a server, terminal device, etc.

[0072] See also Figure 1 and Figure 2 , the embodiment of the present disclosure provides a method for solving the fuzziness of ECharts charts in svg mode, including:

[0073] S101, use Reacthooks to initialize the chart when the component mounts, and re-render when the series data changes.

[0074] Specifically, the following steps may be included:

[0075] S1011: Initialize chart

[0076] When the component is mounted (that is, the dependency array of useEffect is empty), the ECharts chart instance is initialized. The initialization process includes setting basic configuration items of the chart, such as color, tooltip, legend, coordinate axis, etc.

[0077] S1012: Dynamically configure charts

[0078] Configure the series part of the chart according to the seriesDataprop passed in. You may also need to configure other chart-related options, such as the formatting function of the tooltip, the text of the legend, etc.

[0079] S1013: Monitor data changes

[0080] Use useState to store the state of the chart, especially the series data. When the seriesDataprop changes, update the state and trigger a re-render of the component.

[0081] S1014: Set chart options

[0082] Each time the state is updated, set the chart options according to the latest state data. Use chartInstance.setOption() to apply the new configuration.

[0083] S102, use the echarts library to initialize the chart, set the chart's color, tooltip, legend, x-axis, y-axis, and grid, dynamically configure the chart according to the passed props, and use the setOption method to render the chart after the configuration is completed.

[0084] A new ECharts instance can be created, usually in a DOM element (such as a div) with a unique id to facilitate subsequent operations.

[0085] Set a series of color schemes for the chart. These colors will be used to distinguish different data series or data points. You can define a color array, for example: ['FF0000', '00FF00', '0000FF'], and assign it to the color configuration item.

[0086] Set the trigger condition of the tooltip, such as based on the data item (trigger:'item') or based on the axis (trigger:'axis'). Customize the formatting of the tooltip content. You can use a custom formatter function to control the content and layout of the tooltip.

[0087] Define the location of the legend (such as top, bottom, left, right) and the data of the legend items. You can choose whether to enable the legend scrolling function, which is very useful when there are many legend items.

[0088] Set the type of the X-axis and Y-axis (such as category axis type:'category', value axis type:'value', etc.). Specify the data range of the axis. For the category axis, this is usually a data array; for the value axis, the range can be specified through the min and max attributes. Adjust the axis scale interval, label format and other details to improve readability and aesthetics.

[0089] Defines the position and size of the chart drawing area, including the distance from the container border (left, right, top, bottom). You can adjust the background color, border and other styles within the grid area.

[0090] According to the chart type (such as bar chart, line chart, etc.), configure the specific data, color, style, etc. of each data series. You can add animation effects, highlight styles, etc. to the data series.

[0091] Combine all configuration items into a configuration object and apply these configurations through chartInstance.setOption(config).

[0092] Receives properties (props) passed from the parent component or other sources. These properties may contain the data required for the chart, color preferences, titles, configuration options for tooltips, etc. Use the methods provided by ECharts to create a chart instance, which is usually bound to a DOM element on the page. Build the configuration object required by ECharts based on the received props. This configuration object should contain all the necessary configuration items for the chart, such as title, legend, tooltip, data series, etc.

[0093] When configuring chart components (such as legends, tooltips, axes, etc.), make sure they are adjusted accordingly based on the data in the props. For example, if there is a color setting in the props, it is applied to the color configuration of the chart; if there is data, it is used to fill the data series.

[0094] Use the setOption method to apply the constructed configuration object to the chart instance. This step will make the chart render in the defined way. If props change during the component lifecycle, you should listen for these changes and update the chart configuration accordingly. Usually this involves rebuilding the configuration object and calling the setOption method again to refresh the chart.

[0095] This process ensures that the chart can be dynamically configured according to the props passed in, and the chart display is automatically updated as the props change. The benefit of this is that the chart can be more flexible and easier to integrate into responsive or dynamically updated application scenarios.

[0096] Through the above steps, you can customize ECharts charts to meet specific needs. The details of specific configuration items can be flexibly adjusted according to actual conditions. For example, if you need to dynamically update chart data, you can reset the configuration items and call the setOption method to refresh the chart when the data changes.

[0097] S103, processes the incoming series data, adds additional styles and configurations, customizes the content and position of the tooltip, implements the click event of the chart, and supports triggering callbacks by clicking on data points.

[0098] Analyze the incoming series data structure and determine the data type (such as bar chart, line chart, pie chart, etc.). The data usually includes fields such as name (series name), data (series data), and type (series type).

[0099] Depending on the characteristics of the series data, you can add additional styles and configurations to it. For example, you can add different colors to different data points, or add animation effects to the data series.

[0100] You can set different styles for each data point, such as changing the shape, size, color, etc. of the marker. This is very useful for highlighting specific data points.

[0101] Data labels can be configured to display values ​​directly on the chart, which is particularly useful when the amount of data is small. You can control the position, font size, color, etc. of the labels.

[0102] For each data point in the series, you can configure a tooltip to provide more detailed information. The tooltip can display different content depending on the data.

[0103] If a chart has multiple series, you can change its appearance by configuring the legend items, such as icon shape, color, etc.

[0104] Depending on the different values ​​of the data, some style parameters are dynamically calculated. For example, if the value is higher than a certain threshold, the color is changed to indicate a warning.

[0105] Take into account the variation in screen sizes and ensure that your charts are styled and configured to work well on different devices.

[0106] For large amounts of data, performance optimization should be considered to avoid excessive DOM operations and redrawing.

[0107] Through the above steps, you can enrich the presentation of charts according to specific business needs, so that they can not only accurately display data, but also attract users' attention in an aesthetically pleasing and intuitive way.

[0108] S104, dynamically adjust the position and style of the tooltip, use a custom formatter function to format the axis label and legend text, and use the setOption method to render the chart after the configuration is completed.

[0109] To dynamically adjust the position and style of the tooltip, use a custom formatter function to format the axis labels and legend text, and finally render the chart using the setOption method, follow these steps:

[0110] 1. Dynamically adjust the position and style of tooltip

[0111] Relative position You can use the position property to define the position of the tooltip relative to the mouse pointer. For example, you can set it to always be a certain distance below the mouse pointer.

[0112] Absolute position You can also use the position attribute to specify the specific coordinate position of the tooltip, such as (x, y).

[0113] Background Color: You can set the background color of the tooltip.

[0114] Border Color: You can set the border color of the tooltip.

[0115] Font style: You can set the font size, color, etc. of the text in the tooltip.

[0116] 2. Custom formatter function

[0117] If the X-axis displays dates, you can convert the dates to a more friendly format, such as "20240919 (Thursday)". If the Y-axis displays values, you can add thousands separators and units as needed, such as "12,345,600 yuan". For very large or very small values, you can use scientific notation, such as "1.23e+06".

[0118] Display the name and value of the data point, such as "Sales: 10,000 yuan." If there are consecutive data points, the growth rate can be calculated and displayed in the legend, such as "Sales: 10,000 yuan (+5%)." You can also display other related data, such as "Sales: 10,000 yuan (average: 9,500 yuan)."

[0119] Configure tooltips in the option object, including position adjustment and style settings. Use custom formatter functions in the x-axis and y-axis configurations to format labels. Use custom formatter functions in the legend configuration to format legend text.

[0120] Use the chartInstance.setOption(option) method to apply the configuration to the chart instance to complete the rendering of the chart.

[0121] Through the above steps, you can dynamically adjust the position and style of the tooltip, and use a custom formatter function to format the axis label and legend text. Finally, apply the configuration to the chart instance through the setOption method to complete the rendering of the chart. This can make the chart more beautiful and informative, and improve the user's understanding and experience.

[0122] S105, after the chart is rendered, use the myChart.on('rendered',()=>{dealPath(chartID);}) method to modify the transform attributes of all path tags under the chart DOM, and round the transform attribute values ​​to integers.

[0123] After the chart is rendered, you can modify all the elements in the chart DOM by listening to the rendered event and calling a processing function when the event is triggered. <path>The transform attribute of the tag is used to round its value to an integer.

[0124] You can listen to the rendered event on the chart instance, which will be triggered after the chart is rendered. When the event is triggered, a processing function dealPath is called and the DOM element ID of the chart is passed as a parameter to the function.

[0125] Furthermore, get the chart's DOM element by the chart's ID, and find all <path>Tags, process each one individually <path>The transform attribute of the tag, extract the coordinate value (usually the parameter of the translation transform) from the transform attribute, round the extracted coordinate value to an integer, reconstruct the transform attribute value with the rounded coordinate value, and set the new transform attribute value back to <path>Label.

[0126] Specifically, you can register a listener for the rendered event on the chart instance myChart. When the chart is rendered, the listener will be triggered and a processing function dealPath will be called, passing the chart's DOM element ID as a parameter.

[0127] Use the JavaScript document.getElementById(chartID) method to get the DOM element of the chart. Use the getElementsByTagName('path') method to get all the elements in the chart DOM. <path>Tag. Iterate through each <path>The tag is checked for a translation attribute. If the translation attribute contains a translation transform, the coordinate values ​​are extracted from it. The extracted coordinate values ​​are rounded to integers. A new transform attribute value is constructed using the rounded coordinate values. The new transform attribute value is set back to the original value using the setAttribute method. <path>Label.

[0128] Through the above steps, you can modify all <path>The transform attribute of the tag rounds its value to an integer, making the rendering of the chart more accurate and stable.

[0129] According to a specific implementation of an embodiment of the present disclosure, using Reacthooks to initialize a chart when a component is mounted and re-rendering when series data changes includes:

[0130] When the dependency array of useEffect is empty, initialize the ECharts chart instance;

[0131] Configure the series part of the chart according to the passed seriesDataprop;

[0132] Use useState to store chart status and series data;

[0133] When seriesDataprop changes, update the state and trigger a re-render of the component;

[0134] Each time the state is updated, use chartInstance.setOption() to apply the new configuration.

[0135] According to a specific implementation of an embodiment of the present disclosure, the method of using the echarts library to initialize a chart and set the color, tooltip, legend, x-axis, y-axis and grid of the chart includes:

[0136] Create a new ECharts instance in the DOM element;

[0137] Define a color array and assign the color array to the color configuration item;

[0138] Set the triggering conditions of the tooltip based on the data item, and use a custom formatter function to control the content and layout of the tooltip;

[0139] Set the type of X-axis and Y-axis, and define the position and size of the chart drawing area;

[0140] Combine all configuration items into a configuration object and apply these configurations through chartInstance.setOption(config).

[0141] According to a specific implementation of the embodiment of the present disclosure, the dynamically configuring the chart according to the passed props and rendering the chart using the setOption method after the configuration is completed include:

[0142] Construct the configuration object required by ECharts based on the received props, which contains the necessary configuration items of the chart;

[0143] Use the setOption method to apply the constructed configuration object to the chart instance;

[0144] If props change during the component lifecycle, rebuild the configuration object and call the setOption method again to refresh the chart.

[0145] According to a specific implementation of the embodiment of the present disclosure, the processing of the incoming series data and adding additional styles and configurations includes:

[0146] Analyze the incoming series data structure, determine the data type, and add different colors to different types of data points;

[0147] Configure data labels to display values ​​directly on the chart and set the label's position, font size, and color.

[0148] According to a specific implementation of the embodiment of the present disclosure, the content and position of the customized tooltip implements a click event of the chart and supports triggering a callback by clicking a data point, including:

[0149] Use the formatter function to customize the content of the tooltip. The formatter function receives the data point information that the mouse is hovering over and returns a string. The returned string is displayed in the tooltip.

[0150] Use the position function to adjust the position of the tooltip. The position function receives the current mouse position and returns the position coordinates of the tooltip. ECharts automatically adjusts the position of the tooltip according to the mouse position.

[0151] Register a click event listener on the ECharts chart through chartInstance.on('click', callback). callback is the callback function, which is called when the user clicks the chart.

[0152] In the callback function, access the name, value, and index of the clicked data point, and based on the accessed click data value, jump to the detail page.

[0153] According to a specific implementation of the embodiment of the present disclosure, the custom formatter function is used to format the axis label and the legend text, and after the configuration is completed, the setOption method is used to render the chart, including:

[0154] In the chart configuration options, set the axisLabel property for the X-axis and Y-axis and specify a custom formatter function;

[0155] Use a custom formatter function in the legend configuration to generate legend text containing additional information;

[0156] Use the chartInstance.setOption() method to apply the configuration to the chart instance to complete the rendering of the chart.

[0157] According to a specific implementation of the embodiment of the present disclosure, the axis labels and legend texts are formatted using a custom formatter function, and after the configuration is completed, the chart is rendered using the setOption method, which also includes:

[0158] Construct a chart configuration object option, which includes various chart configuration items;

[0159] Construct the formatter function F to format the axis labels and legend text:

[0160] F(S)=μ+k1*σ+k2*g

[0161] Among them, μ is the mean value of the value in the object option, σ is the standard deviation of the value in the object option, g is the growth rate of the value in the object option, k1 and k2 are weight coefficients

[0162] Use the F function to format axis labels and legend text.

[0163] Corresponding to the above method embodiment, see Figure 3 The embodiment of the present invention further discloses a device 30 for solving the fuzziness of ECharts charts in svg mode, comprising:

[0164] Initial module 301, using Reacthooks to initialize the chart when the component is mounted, and re-render when the series data changes;

[0165] Configuration module 302, using the echarts library to initialize the chart, set the chart's color, tooltip, legend, x-axis, y-axis, and grid, dynamically configure the chart according to the passed props, and use the setOption method to render the chart after the configuration is completed;

[0166] Processing module 303 processes the incoming series data, adds additional styles and configurations, customizes the content and position of tooltips, implements click events on charts, and supports triggering callbacks by clicking on data points;

[0167] Adjustment module 304, dynamically adjusts the position and style of the tooltip, uses a custom formatter function to format the axis label and legend text, and uses the setOption method to render the chart after the configuration is completed;

[0168] Modify module 305. After the chart is rendered, use the myChart.on('rendered', ()=>{dealPath(chartID);}) method to modify the transform attributes of all path tags under the chart dom, and round the transform attribute values ​​to integers.

[0169] See also Figure 4 The embodiment of the present invention further provides an electronic device 60, the electronic device comprising:

[0170] at least one processor; and,

[0171] a memory communicatively connected to the at least one processor; wherein,

[0172] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the method for solving the blur of the ECharts chart in the svg mode in the aforementioned method embodiment.

[0173] An embodiment of the present invention further provides a non-transitory computer-readable storage medium, which stores computer instructions, and the computer instructions are used to enable the computer to execute the aforementioned method embodiment.

[0174] An embodiment of the present invention also provides a computer program product, which includes a computer program stored on a non-transitory computer-readable storage medium. The computer program includes program instructions. When the program instructions are executed by a computer, the computer executes the method for solving the blurriness of ECharts charts in svg mode in the aforementioned method embodiment.

[0175] Reference below Figure 4 , which shows a schematic diagram of the structure of an electronic device 60 suitable for implementing the embodiment of the present disclosure. The electronic device in the embodiment of the present disclosure may include, but is not limited to, mobile terminals such as mobile phones, notebook computers, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), vehicle terminals (such as vehicle navigation terminals), etc., and fixed terminals such as digital TVs, desktop computers, etc. Figure 4 The electronic device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present disclosure.

[0176] like Figure 4 As shown, the electronic device 60 may include a processing device (e.g., a central processing unit, a graphics processing unit, etc.) 601, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 602 or a program loaded from a storage device 608 into a random access memory (RAM) 603. In the RAM 603, various programs and data required for the operation of the electronic device 60 are also stored. The processing device 601, the ROM 602, and the RAM 603 are connected to each other via a bus 604. An input / output (I / O) interface 605 is also connected to the bus 604.

[0177] Typically, the following devices may be connected to the I / O interface 605: an input device 606 including, for example, a touch screen, a touch pad, a keyboard, a mouse, an image sensor, a microphone, a gage, a gyroscope, etc.; an output device 607 including, for example, a liquid crystal display (LCD), a speaker, a vibrator, etc.; a storage device 608 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 609. The communication device 609 may allow the electronic device 60 to communicate with other devices wirelessly or by wire to exchange data. Although Figure 4 The electronic device 60 is shown with various devices, but it should be understood that it is not required to implement or have all the devices shown. More or fewer devices may be implemented or have instead.

[0178] In particular, according to an embodiment of the present disclosure, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present disclosure includes a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication device 609, or installed from a storage device 608, or installed from a ROM 602. When the computer program is executed by the processing device 601, the above-mentioned functions defined in the method of the embodiment of the present disclosure are executed.

[0179] The above is only a specific embodiment of the present invention, but the protection scope of the present invention is not limited thereto. Any changes or substitutions that can be easily thought of by a person skilled in the art within the technical scope disclosed by the present invention should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.< / path> < / path> < / path> < / path> < / path> < / path> < / path> < / path>

Claims

1. A method for solving the fuzziness of ECharts charts in svg mode, characterized in that: include: Use Reacthooks to initialize the chart when the component mounts and re-render when the series data changes; Use the echarts library to initialize the chart, set the chart's color, tooltip, legend, x-axis, y-axis, and grid, dynamically configure the chart based on the passed props, and use the setOption method to render the chart after the configuration is complete; Process the incoming series data, add additional styles and configurations, customize the content and position of tooltips, implement click events on charts, and support triggering callbacks by clicking on data points; Dynamically adjust the position and style of the tooltip, use a custom formatter function to format the axis label and legend text, and use the setOption method to render the chart after configuration is complete; When the chart is rendered, use the myChart.on('rendered',()=>{dealPath(chartID);}) method to modify the transform attribute of all path tags under the chart DOM, and round the transform attribute values ​​to integers, including: Register a listener for the rendered event on the chart instance myChart. When the chart is rendered, the listener for the rendered event is triggered and the processing function dealPath is called, passing the chart's DOM element ID as a parameter. Use JavaScript's document.getElementById(chartID) method to get the chart's DOM element, and use the getElementsByTagName('path') method to get all the elements in the chart's DOM. <path>Tag, iterate through each <path>The tag is checked for translation, and if the translation attribute contains a translation transform, the coordinate value is extracted from it, the extracted coordinate value is rounded to an integer, a new transform attribute value is constructed using the rounded coordinate value, and the new transform attribute value is set back using the setAttribute method. <path> Label.< / path> < / path> < / path> 2. The method according to claim 1, characterized in that The described use of Reacthooks to initialize the chart when the component mounts and re-render when the series data changes includes: When the dependency array of useEffect is empty, initialize the ECharts chart instance; Configure the series part of the chart according to the passed seriesDataprop; Use useState to store chart status and series data; When seriesDataprop changes, update the state and trigger a re-render of the component; Each time the state is updated, use chartInstance.setOption() to apply the new configuration.

3. The method according to claim 2, characterized in that The echarts library is used to initialize the chart, set the chart's color, tooltip, legend, x-axis, y-axis, and grid, including: Create a new ECharts instance in the DOM element; Define a color array and assign the color array to the color configuration item; Set the triggering conditions of the tooltip based on the data item, and use a custom formatter function to control the content and layout of the tooltip; Set the type of X-axis and Y-axis, and define the position and size of the chart drawing area; Combine all configuration items into a configuration object and apply these configurations through chartInstance.setOption(config).

4. The method according to claim 3, characterized in that The chart is dynamically configured according to the passed props, and the setOption method is used to render the chart after the configuration is completed, including: Construct the configuration object required by ECharts based on the received props, which contains the necessary configuration items of the chart; Use the setOption method to apply the constructed configuration object to the chart instance; If props change during the component lifecycle, rebuild the configuration object and call the setOption method again to refresh the chart.

5. The method according to claim 4, characterized in that The process of processing the incoming series data and adding additional styles and configurations includes: Analyze the incoming series data structure, determine the data type, and add different colors to different types of data points; Configure data labels to display values ​​directly on the chart and set the label's position, font size, and color.

6. The method according to claim 5, characterized in that The content and position of the custom tooltip implement the click event of the chart and support the callback triggered by clicking the data point, including: Use the formatter function to customize the content of the tooltip. The formatter function receives the data point information that the mouse is hovering over and returns a string. The returned string is displayed in the tooltip. Use the position function to adjust the position of the tooltip. The position function receives the current mouse position and returns the position coordinates of the tooltip. ECharts automatically adjusts the position of the tooltip according to the mouse position. Register a click event listener on the ECharts chart through chartInstance.on('click', callback). callback is the callback function, which is called when the user clicks the chart. In the callback function, access the name, value, and index of the clicked data point, and based on the accessed click data value, jump to the detail page.

7. The method according to claim 6, characterized in that The custom formatter function is used to format the axis labels and legend text. After the configuration is completed, the setOption method is used to render the chart, including: In the chart configuration options, set the axisLabel property for the X-axis and Y-axis and specify a custom formatter function; Use a custom formatter function in the legend configuration to generate legend text containing additional information; Use the chartInstance.setOption() method to apply the configuration to the chart instance to complete the rendering of the chart.

8. The method according to claim 7, characterized in that The custom formatter function is used to format the axis labels and legend text. After the configuration is completed, the setOption method is used to render the chart, which also includes: Construct a chart configuration object option, which includes various chart configuration items; Construct the formatter function F to format the axis labels and legend text: F(S)=μ+k1*σ+k2*g Among them, μ is the mean value of the value in the object option, σ is the standard deviation of the value in the object option, g is the growth rate of the value in the object option, k1 and k2 are weight coefficients Use the F function to format axis labels and legend text.

9. A device for solving the problem of blurring ECharts charts in svg mode, characterized in that: include: Initial module, using Reacthooks to initialize the chart when the component is mounted, and re-render when the series data changes; Configuration module, use echarts library to initialize the chart, set the chart's color, tooltip, legend, x-axis, y-axis and grid, dynamically configure the chart according to the passed props, and use the setOption method to render the chart after the configuration is completed; Processing module, which processes the incoming series data, adds additional styles and configurations, customizes the content and position of tooltips, implements click events on charts, and supports triggering callbacks by clicking on data points; Adjust the module, dynamically adjust the position and style of the tooltip, use a custom formatter function to format the axis label and legend text, and use the setOption method to render the chart after the configuration is complete; Modify the module. After the chart is rendered, use the myChart.on('rendered', ()=>{dealPath(chartID);}) method to modify the transform attributes of all path tags under the chart DOM, and round the transform attribute values ​​to integers, including: Register a listener for the rendered event on the chart instance myChart. When the chart is rendered, the listener for the rendered event is triggered and the processing function dealPath is called, passing the chart's DOM element ID as a parameter. Use JavaScript's document.getElementById(chartID) method to get the chart's DOM element, and use the getElementsByTagName('path') method to get all the elements in the chart's DOM. <path>Tag, iterate through each <path>The tag is checked for translation, and if the translation attribute contains a translation transform, the coordinate value is extracted from it, the extracted coordinate value is rounded to an integer, a new transform attribute value is constructed using the rounded coordinate value, and the new transform attribute value is set back using the setAttribute method. <path> Label.< / path> < / path> < / path> 10. An electronic device, characterized in that: The electronic device comprises: at least one processor; and, a memory communicatively connected to the at least one processor; wherein, The memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the method for solving the blurriness of the ECharts chart in svg mode as described in any one of claims 1 to 8.

Images