Chart processing method and device, electronic equipment and storage medium

Abstract

The invention provides a chart processing method and apparatus, an electronic device and a storage medium. The method comprises the steps of obtaining data of a chart; a chart is generated based on the data of the chart and current chart parameters related to the chart, the chart is displayed in a main component, and chart configuration options are written into the data of the main component; under the condition that operation information of chart configuration options in the main component is obtained, the chart parameters are updated based on the operation information; and updating the chart based on the updated chart parameters and the data of the chart, and displaying the updated chart in the main component, so that different types of charts can be switched and displayed more quickly.

Description

Technical Field

[0001] The present application belongs to the technical field of chart processing, and in particular, relates to a chart processing method, device, electronic device and storage medium. Background Art

[0002] With the rapid development of Internet technology, data visualization has been widely used. When displaying data on a large screen or displaying certain data in a more intuitive way, you need to convert the data into a certain chart. In related technologies, the chart plug-in echarts is used to build charts, but only one legend can be configured at a time. If you want to switch between multiple legend effects, you need to modify the configuration item code again, which is quite cumbersome. Summary of the invention

[0003] The embodiments of the present application provide a method, device, electronic device and storage medium for processing a chart, which can realize faster switching and display of different types of charts.

[0004] According to a first aspect of the present application, an embodiment of the present application provides a method for processing a chart, including:

[0005] Get the data for the chart;

[0006] generating a chart based on the data of the chart and current chart parameters related to the chart, and displaying the chart in a main component, wherein the data of the main component has chart configuration options written therein;

[0007] In case of acquiring operation information of the chart configuration option in the main component, updating the chart parameters based on the operation information;

[0008] The chart is updated based on the updated chart parameters and the data of the chart, and the updated chart is displayed in the main component.

[0009] In some embodiments, the method further comprises:

[0010] In the case where operation information for dragging the chart displayed in the main component to the main page is obtained, determining a stop position in the main page based on the operation information;

[0011] The chart is inserted at the stop position.

[0012] In some embodiments, inserting the chart at the stop position comprises:

[0013] Create a chart container at the stop position;

[0014] Insert the chart into the chart container.

[0015] In some embodiments, the method further comprises:

[0016] Monitor whether the data of the chart changes;

[0017] When there is a change in the data of the chart, the chart in the main component is updated based on the change information, and the chart in the chart container is updated.

[0018] In some embodiments, the method further comprises:

[0019] In response to the operation information for changing the size of the chart container, the size of the chart container is changed to change the size of the chart.

[0020] In some embodiments, inserting the chart at the stop position comprises:

[0021] converting the diagram into a picture;

[0022] Insert the picture at the stop position.

[0023] In some embodiments, the method further comprises:

[0024] Create a vue project, add a main component and a main page component to the vue project, add chart configuration options to the main component, add a chart container to the main page component, and add operation options to the container, wherein the chart configuration options include: options for selecting a chart type and / or options for selecting a chart style.

[0025] According to a second aspect of the present application, an embodiment of the present application provides a diagram processing device, including:

[0026] The acquisition module is used to obtain the data of the chart;

[0027] A generating module, used for generating a chart based on the data of the chart and current chart parameters related to the chart, and displaying the chart in a main component, wherein the data of the main component has chart configuration options written therein;

[0028] A first updating module is used to update the chart parameters based on the operation information of the chart configuration option in the main component when the operation information is obtained;

[0029] The second updating module is used to update the chart based on the updated chart parameters and the data of the chart, and display the updated chart in the main component.

[0030] According to the third aspect of the present application, an embodiment of the present application provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements any of the methods described above when executing the computer program.

[0031] According to a fourth aspect of the present application, an embodiment of the present application provides a chart display system, comprising: an electronic device and a display device, wherein the electronic device is communicatively connected to the display device.

[0032] According to a fifth aspect of the present application, an embodiment of the present application provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method described in any one of the above is implemented.

[0033] According to the sixth aspect of the present application, an embodiment of the present application provides a computer program product, which, when executed on a terminal device, enables the electronic device to execute any of the methods described above.

[0034] Compared with the prior art, the embodiments of the present invention have the following beneficial effects:

[0035] The method for processing a chart provided in an embodiment of the present application obtains chart data; generates a chart based on the chart data and current chart parameters related to the chart, and displays the chart in a main component, wherein chart configuration options are written in the data of the main component; upon obtaining operation information of the chart configuration options in the main component, updates the chart parameters based on the operation information; updates the chart based on the updated chart parameters and the chart data, and displays the updated chart in the main component, thereby enabling faster switching and display of different types of charts.

[0036] It can be understood that the beneficial effects of the second to sixth aspects mentioned above can be found in the relevant description of the first aspect mentioned above, and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0038] Figure 1 A schematic diagram of a flowchart for implementing a method for processing a chart provided for the implementation of this application;

[0039] Figure 2A schematic diagram of a display interface provided in an embodiment of the present application;

[0040] Figure 3 A schematic diagram of the structure of a diagram processing device provided in an embodiment of the present application;

[0041] Figure 4 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0042] In the following description, specific details such as specific system structures, technologies, etc. are provided for the purpose of illustration rather than limitation, so as to provide a thorough understanding of the embodiments of the present application. However, it should be clear to those skilled in the art that the present application may also be implemented in other embodiments without these specific details. In other cases, detailed descriptions of well-known systems, devices, circuits, and methods are omitted to prevent unnecessary details from obstructing the description of the present application.

[0043] It should be understood that when used in the present specification and the appended claims, the term "comprising" indicates the presence of described features, wholes, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, wholes, steps, operations, elements, components and / or combinations thereof.

[0044] It should also be understood that the term “and / or” used in the specification and appended claims refers to any and all possible combinations of one or more of the associated listed items, and includes these combinations.

[0045] As used in the specification of this application and the appended claims, the term "if" can be interpreted as "when" or "uponce" or "in response to determining" or "in response to processing of the diagram" depending on the context. Similarly, the phrase "if it is determined" or "if the diagram is processed to" can be interpreted as meaning "uponce it is determined" or "in response to determining" or "uponce the diagram is processed to" or "in response to processing of the diagram" depending on the context.

[0046] In addition, in the description of the present application specification and the appended claims, the terms "first", "second", "third", etc. are only used to distinguish the descriptions and cannot be understood as indicating or implying relative importance.

[0047] References to "one embodiment" or "some embodiments" etc. described in the specification of this application mean that one or more embodiments of the present application include specific features, structures or characteristics described in conjunction with the embodiment. Therefore, the phrases "in one embodiment", "in some embodiments", "in some other embodiments", "in some other embodiments", etc. appearing in different places in this specification do not necessarily refer to the same embodiment, but mean "one or more but not all embodiments", unless otherwise specifically emphasized in other ways.

[0048] Based on the technical problems of the related technologies, the embodiments of the present application provide a method for processing a chart that can be applied to electronic devices such as mobile phones, tablet computers, wearable devices, vehicle-mounted devices, augmented reality (AR) / virtual reality (VR) devices, laptop computers, ultra-mobile personal computers (UMPC), netbooks, personal digital assistants (PDA), etc. The embodiments of the present application do not impose any restrictions on the specific types of electronic devices.

[0049] The functions implemented by the chart processing method provided in the embodiment of the present application can be implemented by calling program codes by a processor of an electronic device, wherein the program codes can be stored in a computer storage medium.

[0050] The present application embodiment provides a method for processing a chart. Figure 1 A schematic diagram of the implementation flow of a method for processing a chart provided for the implementation of this application, such as Figure 1 As shown, the processing methods of the chart include:

[0051] Step S101, obtaining chart data.

[0052] In the embodiment of the present application, the data of the chart includes basic elements such as title, legend, coordinate axis, data point or data series, and optional elements such as grid lines, data labels, comments or notes. It can be stored in a database, API or other data source, and the electronic device can obtain the data of the chart from the database, API or other data source. Specifically, the electronic device can execute a data query or request and store the obtained data in a data structure for subsequent use.

[0053] Step S102, generating a chart based on the data of the chart and current chart parameters related to the chart, and displaying the chart in a main component, wherein the data of the main component has chart configuration options written into it.

[0054] In the embodiment of the present application, the chart parameter is a chart configuration, for example, such as chart type, style, axis label, etc. Specifically, the chart type includes a bar chart, a line chart, and a pie chart. The chart style may include: color, font, border, etc. The chart style is the color, font, border, etc. of the chart corresponding to the chart type.

[0055] The current chart parameters can be those selected by the user through the chart configuration options, or they can be the default chart parameters.

[0056] In the embodiment of the present application, a suitable chart library is selected according to the application requirements. As an example, the chart library includes Chart.js, ECharts, Highcharts, D3.js, etc., which can provide a variety of chart types and flexible customization options. According to the chart type, the collected data is processed as necessary, such as sorting, grouping, calculating the average, etc. Use the API provided by the selected chart library, configure the chart according to the chart parameters determined in the previous order, call the generation function of the chart library, and generate the chart based on the configuration and data.

[0057] In the embodiment of the present application, the main component is a component that occupies a core position and performs the main function in the application or interface layout. As an example, the main component can be the focus of any user interaction, such as a navigation bar, a main content area, a toolbar, etc.

[0058] In the embodiment of the present application, the generated chart object is embedded into the main component. This can be done by rendering the chart as an HTML element (such as <canvas> 、 <svg>etc.), and insert it into the specified position in the DOM to achieve it.

[0059] Step S103, when the operation information of the chart configuration option in the main component is obtained, the chart parameters are updated based on the operation information.

[0060] In the embodiment of the present application, an event listener needs to be set on the chart to capture the operation information generated when the user interacts with the chart, wherein the operation information includes information such as user clicks, drags, zooms, and selections.

[0061] In an embodiment of the present application, the electronic device is able to parse the operation information to determine the user's specific intentions and the chart parameters that need to be updated. The user can select information such as the chart type and chart style through the chart configuration options. When the user selects the chart type and chart style, the chart parameters will be updated. The updated chart parameters include the chart type, axis range, legend display, data point style (such as color, size), etc. Once the parameters that need to be updated are determined, the electronic device will call the API or method provided by the chart library to apply the new parameter values ​​to the chart. Respond to user changes to the chart configuration options (such as selecting different types of charts, changing colors or axis labels, etc.), and update the chart parameters to reflect these changes.

[0062] In the embodiment of the present application, when the operation information of the chart configuration options in the main component is obtained, the function of updating the chart parameters based on the operation information is realized. In this way, the user can be provided with the ability to interact with the chart, so that they can dynamically adjust the display and presentation of the chart according to their needs.

[0063] Step S104, updating the chart based on the updated chart parameters and the chart data, and displaying the updated chart in the main component.

[0064] In an embodiment of the present application, updating a chart based on updated chart parameters includes applying the updated chart parameters to the chart object. This may include setting new axis ranges, adjusting the chart type, updating data point styles, etc. Ensure that all updates are correctly reflected in the configuration or state of the chart object.

[0065] In the embodiment of the present application, redrawing the chart: calling the rendering or redrawing function provided by the chart library to redraw the chart according to the updated parameters and data set. This process may include clearing old chart elements, creating new chart elements, setting styles and animations, etc.

[0066] In the embodiment of the present application, the redrawn chart object is embedded into the main component, replacing the original chart display area, and ensuring that the layout and size of the chart are coordinated with other parts of the main component to provide a good visual experience.

[0067] The method for processing a chart provided in an embodiment of the present application obtains chart data; generates a chart based on the chart data and current chart parameters, and displays the chart in a main component; upon obtaining operation information of a chart configuration option in the main component, updates the chart parameters based on the operation information; updates the chart based on the updated chart parameters and the chart data, and displays the updated chart in the main component, thereby enabling faster switching and display of different types of charts.

[0068] According to the present application, the method for processing a chart also includes a function of dragging a chart from a main component to a main page. Such an interactive method can increase the flexibility of data visualization and the user's personalized customization capability.

[0069] In some embodiments, the method for processing a chart further includes:

[0070] Step S105, when operation information for dragging the chart displayed in the main component to the main page is obtained, determining a stop position in the main page based on the operation information;

[0071] In this step, the user can operate to drag the chart displayed in the main component to the main page. In this case, the electronic device can obtain the operation information of dragging the chart displayed in the main component to the main page. The operation can be implemented by mouse or touch.

[0072] In this step, when the user releases the mouse (or ends the touch), the electronic device can monitor the event and mark the end of the drag operation. At this moment, the final position of the chart on the main page, i.e. the stop position, is obtained.

[0073] In this step, the stopping position when the user drags the chart from the main component to the main page can be accurately determined, which provides necessary information and preparation for the subsequent insertion of the chart at the stopping position.

[0074] Step S106, inserting a chart at the stop position.

[0075] In this step, you can open the function of inserting a chart by clicking the "Insert" button on the menu bar or toolbar and then selecting "Chart". In some cases, you may need to select the data area first and then click the option to insert the chart. Or you can drag and drop the chart to a precise location. This drag-and-drop function enhances the flexibility and user experience of the application, allowing users to freely organize and display data according to their needs.

[0076] In these embodiments, through the above steps, the function of dragging a chart in the main component to the main page can be realized, and it is ensured that the chart can be correctly displayed and interacted in the new position. This insertion function enhances the flexibility of the application and the user experience, allowing users to freely organize and display data according to their needs.

[0077] According to the present application, step S106, inserting a chart at the stop position, is refined into two specific sub-steps to more accurately describe the process of inserting a chart at the stop position.

[0078] The following is a detailed description of these two sub-steps:

[0079] In some embodiments, step S106, inserting a chart at the stop position, includes:

[0080] Step S1061, creating a chart container at the stop position.

[0081] In this step, you can create a new element (such as a div) in the DOM tree of the main page or document as a container for the chart. Set the style properties of the container, such as width, height, margin, padding, border, etc., to ensure that it can adapt to the size and layout requirements of the chart. Insert the container element into the designated position (i.e., the stop position) of the main page or document. This usually involves modifying the DOM structure to add the container element to the corresponding parent element.

[0082] Step S1062: inserting the chart into the chart container.

[0083] In this step, if the chart is a separate DOM element or component, it can be moved directly into the chart container. This usually involves modifying the chart's DOM structure, removing it from its original location and inserting it into the new container.

[0084] In this step, if the chart is generated by a JavaScript charting library, you need to call the charting library's API to render the chart into a specified container. This usually involves passing the container's DOM element as a parameter to the charting library's rendering function.

[0085] In these embodiments, through the above two sub-steps, a chart container can be successfully created at the stop position, and the chart can be inserted into the container, so as to provide users with a more flexible and personalized data visualization experience and make the layout and style of the chart more controllable.

[0086] According to the present application, step S106, inserting a chart at the stop position, is further refined into converting the chart into a picture and inserting the picture at the stop position. This method is particularly useful when dealing with complex charts or when it is necessary to ensure that the chart maintains a consistent appearance across different devices or software. The following is a detailed explanation of this sub-step:

[0087] In some embodiments, step S106, inserting a chart at the stop position, includes:

[0088] Step S1063, converting the chart into a picture.

[0089] In this step, convert the rendered chart to an image format using an appropriate library or API. This can be an image in PNG, JPEG, SVG, etc. For canvas elements, you can use the toDataURL() method to export the canvas content as an image data URL. For svg elements, you may need to convert the SVG to canvas first and then export it to an image, or use a dedicated library such as svg-to-img to convert it directly.

[0090] In this step, the converted image data is saved on the electronic device or as temporary data in the memory for subsequent use.

[0091] Step S1064: Insert the picture to the stop position.

[0092] In this step, the image is inserted to the stop position according to the user's drag operation or other input methods.

[0093] In these embodiments, through these two sub-steps, step S106 successfully converts the chart into a picture and inserts the picture into the stop position. The advantage of this method is that once the chart is converted into a picture, it can be processed, transmitted and displayed like any other picture without worrying about compatibility issues between different devices or software.

[0094] According to this application, the chart processing method also adds a monitoring and response mechanism for data changes to ensure that the chart can be updated in real time or on demand to reflect the latest data status. The following is a detailed explanation of this new step:

[0095] In some embodiments, the method for processing a chart further includes:

[0096] Step S107, monitoring whether there is any change in the chart data.

[0097] In this step, first, you need to determine the data source of the chart, which can be static data, data returned by an API interface, database query results, etc.

[0098] According to the type of data source, set the corresponding monitoring mechanism. For example, if the data is pushed in real time via WebSocket, you need to set the WebSocket listener; if the data is stored in a local variable, you can monitor data changes by setting getter / setter or using the responsive system of frameworks such as Vue and React.

[0099] In this step, the monitored chart data can be compared with the old data to determine whether the chart data has changed.

[0100] Record change information (optional):

[0101] If necessary, you can record specific information about data changes, such as the changed data item, the time of change, etc. This information can be used for subsequent logging, error tracking, or user notification.

[0102] Step S108, when there is a change in the data of the chart, the chart in the main component is updated based on the change information, and the chart in the chart container is updated.

[0103] In this step, the steps involved in updating the state of the main component are: in your main component (which may be a Vue component, a React component, or another type of component), update the obtained change information to the state or properties of the component. This usually involves modifying the component's data, state, or props properties to contain the latest data set.

[0104] In this step, steps are involved in preparing the chart update: Prepare the chart update based on the updated data. This may include pre-processing, formatting or conversion of the data to ensure that they meet the requirements of the chart library.

[0105] In this step, there are steps to call the chart library API or update the chart component: If you use a chart library (such as ECharts, Chart.js, Highcharts, etc.) directly to draw the chart, you need to call the API provided by the chart library to update the chart. These APIs usually allow passing new data sets and other configuration options to re-render the chart. If you are working in a more advanced component framework (such as using React to encapsulate the chart component), you may need to update the state or props of the component to trigger the component's re-rendering process.

[0106] In this step, the steps involved in updating the chart in the chart container are: the chart library or chart component will usually automatically handle the rendering of the chart in the container. However, in some cases, you may need to intervene in this process manually. For example, if the size of the chart's container has changed (and you are not using a responsive layout), you may need to call the chart library's resize method to ensure that the chart fills the container correctly. In addition, if the chart is inserted as an image (although this is less common), you will need to regenerate the chart image and insert it into the container to replace the old image.

[0107] In these embodiments, through the above steps, the chart processing method can respond to data changes in real time or on demand, ensuring that the chart always displays the latest data status. This is particularly important for application scenarios that require real-time monitoring of data changes (such as financial analysis, real-time monitoring systems, etc.).

[0108] According to this application, the chart processing method also includes the function of responding to the change of the size of the chart container. This means that when the user or application logic changes the size of the chart container, the chart itself will also adjust its size accordingly to maintain the adaptability and readability of the content. The following is a detailed explanation of this step:

[0109] In some embodiments, the method for processing a chart further includes:

[0110] Step S109 , in response to the operation information for changing the size of the chart container, changing the size of the chart container to change the size of the chart.

[0111] In this step, when the container size changes, the listener will capture relevant operation information, such as the new width and height values. This information will be used to adjust the size and layout of the chart later.

[0112] In this step, update the chart container size: Update the size of the chart container based on the captured operation information. This usually involves modifying the container's CSS style properties (such as width and height). If the chart container is created dynamically (such as dynamically added to the DOM via JavaScript), you may need to directly modify the properties of its DOM element.

[0113] In this step, resize the chart: After the chart container size changes, the chart needs to be resized accordingly to ensure that the chart content can be fully displayed in the container and maintain the appropriate proportion and clarity. This usually involves calling the chart library API to re-render the chart and pass the new container size as a parameter. If the chart is inserted as an image, it may be necessary to regenerate the chart image to fit the new container size and replace the old image in the container.

[0114] In these embodiments, through the above steps, the chart processing method can respond to changes in the size of the chart container and automatically adjust the size and layout of the chart to provide a better user experience and data visualization effect.

[0115] According to this application, in the chart processing method including the Vue.js framework, how to set up the infrastructure in the Vue project, including creating a project, adding components, and configuring chart-related options and containers. The following is a detailed explanation of the steps:

[0116] In some embodiments, the method for processing a chart further includes:

[0117] Step S100, create a vue project, add a main component and a main page component to the vue project, add chart configuration options to the main component, add a chart container to the main page component, and add operation options to the container, wherein the chart configuration options include: options for selecting a chart type and / or options for selecting a chart style.

[0118] In this step, you will be prompted to create a Vue project. Specifically, you can use Vue CLI (Vue's command line tool) or other Vue project generators to create a new Vue project. Run a command such as vue create my-chart-project, where my-chart-project is the name of your project. Select project configurations such as Babel, Router, Vuex, etc. (Choose according to your needs. For simple chart display, Router and Vuex may not be needed).

[0119] In this step, the steps of adding the main component are included. Specifically, in a Vue project, the main component is usually a container component that contains other subcomponents. It is responsible for the layout and logic of the entire page. Create a new Vue file in the src / components directory, such as MainChartComponent.vue, as the main component. In the main component, define the options of the chart, which will control the type and style of the chart. For example, you can define a chartOptions object that contains properties such as chartType (chart type options) and chartStyle (chart style options).

[0120] In this step, you will add the main page component. Specifically, the main page component (such as App.vue or another custom page component) is the Vue component that the user sees first. In the main page component, you can import and register the main component so that you can use it in the template. In the template of the main page component, add a container element for displaying the chart (such as ) and assign it a unique ID or class name so that it can be styled later using CSS.

[0121] In this step, you need to add operation options to the chart container. Specifically, the operation options may include buttons, drop-down menus, and other UI elements for switching chart types, modifying chart styles, or adjusting chart data. These operation options can be added directly to the template of the main page component or as part of the main component, depending on your design requirements. Make sure to bind appropriate event handlers to these operation options so that the chart configuration options can be updated or other logic can be executed when the user interacts.

[0122] In this step, the detailed configuration steps of the chart configuration options include: In the main component, configure the chartOptions object in detail according to business needs. The chartType option can be an enumeration value or a string to specify the type of chart (such as line chart, bar chart, pie chart, etc.). The chartStyle option can be an object containing various properties that control the style of the chart (such as color, font, border, etc.). Depending on the selected chart library (such as ECharts, Chart.js, etc.), these options may need to follow specific formats and naming conventions.

[0123] In these embodiments, through the above steps, a structure including chart configuration options and containers can be created and configured in the Vue project, laying a foundation for subsequent data processing and chart updating.

[0124] Based on the above embodiments, Figure 2 A schematic diagram of a display interface provided in an embodiment of the present application is shown as follows: Figure 2 As shown, the display interface includes: the relative position relationship between the main page and the main component.

[0125] Based on the above embodiments, the present application further provides a method for processing a chart, including:

[0126] Step 1: Data acquisition and processing.

[0127] Connect to the database: Use an appropriate database connection library (such as mysql or mysql2 library in Node.js) to connect to the MySQL database.

[0128] Query data: Execute SQL queries according to business needs to obtain the data that needs to be converted into charts.

[0129] Data processing: Determine the data on the x-axis and y-axis based on the data type (such as line chart, bar chart), and may also require data preprocessing (such as sorting, filtering, aggregation, etc.).

[0130] Step 2, Vue project and component encapsulation.

[0131] Create a Vue project: Create a new Vue project using a tool like Vue CLI or Vite.

[0132] Encapsulate the main component of the chart:

[0133] Create a chart main component (such as ChartComponent.vue) in the src / components directory.

[0134] Set multiple tabs in the component to select chart type and style.

[0135] Initialize the options object in the data function, which will be used to configure various options of the chart (such as xAxis, yAxis, series, etc.).

[0136] Make sure that the configuration items in options correspond to the options under the style tab, and assign values ​​dynamically through parameter passing or Vuex.

[0137] Step 3: Chart rendering and monitoring.

[0138] Create a chart container: Define a DOM element as the container of the chart in the Vue template.

[0139] Initialize the ECharts instance: In the mounted lifecycle hook of the component, get the DOM element of the chart container and initialize the ECharts instance.

[0140] Set the listener: Use Vue's watch property or computed property to listen to the changes of options. Once options change, call ECharts's setOption method to re-render the chart.

[0141] Step 4: User interaction and configuration update.

[0142] Add click events: Add click event listeners for the options under Type Tab and Style Tab.

[0143] Update configuration: When a click event is triggered, update the corresponding configuration item in the options object (such as series.type or series.itemStyle.color) according to the clicked button or option.

[0144] Re-render the chart: Since changes to options are being watched, the chart will automatically re-render to reflect the new configuration.

[0145] Step 5, chart dragging function.

[0146] Add drag events: Add mousedown, mousemove, and mouseup event listeners to the chart container.

[0147] Drag logic:

[0148] On a mousedown event, the initial mouse position is recorded and a drag handle or border may be displayed.

[0149] In the mousemove event calculate the distance the mouse has moved and update the chart container's position accordingly.

[0150] On mouseup, stops dragging and possibly removes the drag handle or border.

[0151] Page layout adjustment: Update the page layout based on the position at the end of the drag to ensure that the chart is placed in the correct position.

[0152] Step 6, adjust the chart size.

[0153] Sizing logic: Similar to the dragging function, add the ability to drag edges or corners of the chart container to allow users to change the size of the chart by dragging these edges or corners.

[0154] Update configuration items: pass the adjusted chart size as a parameter to the corresponding configuration items in options (such as grid.width and grid.height), and re-render the chart to reflect the size change.

[0155] In some embodiments, step 5 may also be replaced by step 5'.

[0156] Step 5', convert the chart into a picture.

[0157] Rendering charts: First, use a chart library such as ECharts on the server or client to render the required charts.

[0158] Generate image:

[0159] Client generation: You can use the getDataURL method provided by ECharts, which can render the chart into a Base64-encoded image URL. Then, you can set this URL to The src attribute of the tag, or dynamically inserted into the page via JavaScript.

[0160] Server-side generation: If chart rendering and conversion require higher performance or need to process large amounts of data, you can use Node.js combined with ECharts (which may require a server-side rendering library such as node-canvas) or other chart libraries on the server to generate image files and send the file path or URL to the client.

[0161] Insert picture: Insert the generated picture into The tag is inserted into the specified position of the page.

[0162] Step 6 can be replaced by Step 6': Resize the image.

[0163] Since the image has been inserted into the page, what needs to be adjusted now is the image element ( labels), not the size of the chart container.

[0164] Add drag functionality (optional): If you want to allow users to resize images by dragging, you can Add mousedown, mousemove, and mouseup event listeners to the tag, and update the image’s width and height attributes in the event handlers or use the CSS transform:scale() attribute (but note that transform:scale() changes the visual size of the image without changing its physical size, which may affect the layout).

[0165] Directly set the size: You can also provide user interface elements (such as sliders, input boxes, etc.) to allow users to directly enter or select the new size of the image and dynamically update it through JavaScript The width and height attributes of the tag.

[0166] In these embodiments, when choosing whether to convert a chart into a picture, it is necessary to weigh the pros and cons according to the specific application scenario and requirements. If the chart content does not need to be updated in real time and the user is mainly concerned with the visual display, then this method will be a good choice. However, if the chart needs to interact with the user or the data needs to be updated in real time, it may be more appropriate to keep the chart as a dynamic element.

[0167] According to this application, by combining the componentization and responsiveness of Vue and the powerful chart rendering capabilities of ECharts, a flexible and user-friendly chart configuration and display system is implemented. By monitoring changes in configuration items and adding interactive functions such as dragging and resizing, users can easily customize charts as needed and place them anywhere on the page.

[0168] It should be understood that the size of the serial numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

[0169] According to the aforementioned embodiments, the embodiments of the present application provide a device for processing a chart, and the modules included in the device, as well as the units included in the modules, can be implemented by a processor in a computer device; of course, they can also be implemented by a specific logic circuit; in the implementation process, the processor can be a central processing unit (CPU, Central Processing Unit), a microprocessor (MPU, Microprocessor Unit), a digital signal processor (DSP, Digital Signal Processing) or a field programmable gate array (FPGA, Field Programmable Gate Array), etc.

[0170] The present application embodiment provides a diagram processing device. Figure 3 A schematic diagram of a diagram processing device provided in an embodiment of the present application is shown in FIG. Figure 3 As shown, the diagram processing device 400 includes:

[0171] An acquisition module 401 is used to acquire data of a chart;

[0172] A generating module 402, for generating a chart based on the data of the chart and current chart parameters related to the chart, and displaying the chart in a main component, wherein the data of the main component has chart configuration options written therein;

[0173] A first updating module 403 is used to update the chart parameters based on the operation information of the chart configuration option in the main component when the operation information is obtained;

[0174] The second updating module 404 is used to update the chart based on the updated chart parameters and the data of the chart, and display the updated chart in the main component.

[0175] In some embodiments, the method further comprises:

[0176] In the case where operation information for dragging the chart displayed in the main component to the main page is obtained, determining a stop position in the main page based on the operation information;

[0177] The chart is inserted at the stop position.

[0178] In some embodiments, inserting the chart at the stop position comprises:

[0179] Create a chart container at the stop position;

[0180] Insert the chart into the chart container.

[0181] In some embodiments, the method further comprises:

[0182] Monitor whether the data of the chart changes;

[0183] When there is a change in the data of the chart, the chart in the main component is updated based on the change information, and the chart in the chart container is updated.

[0184] In some embodiments, the method further comprises:

[0185] In response to the operation information for changing the size of the chart container, the size of the chart container is changed to change the size of the chart.

[0186] In some embodiments, inserting the chart at the stop position comprises:

[0187] converting the diagram into a picture;

[0188] Insert the picture at the stop position.

[0189] In some embodiments, the method further comprises:

[0190] Create a vue project, add a main component and a main page component to the vue project, add chart configuration options to the main component, add a chart container to the main page component, and add operation options to the container, wherein the chart configuration options include: options for selecting a chart type and / or options for selecting a chart style.

[0191] It should be noted that the information interaction, execution process, etc. between the above-mentioned devices / units are based on the same concept as the method embodiment of the present application. Their specific functions and technical effects can be found in the method embodiment part and will not be repeated here.

[0192] in addition, Figure 3 The processing device of the chart shown may be a software unit, a hardware unit, or a combination of software and hardware units built into an existing electronic device, or may be integrated into the electronic device as an independent pendant, or may exist as an independent terminal device.

[0193] The technicians in the relevant field can clearly understand that for the convenience and simplicity of description, only the division of the above-mentioned functional units and modules is used as an example for illustration. In practical applications, the above-mentioned function allocation can be completed by different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiment can be integrated in a processing unit, or each unit can exist physically separately, or two or more units can be integrated in one unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of software functional units. In addition, the specific names of the functional units and modules are only for the convenience of distinguishing each other, and are not used to limit the scope of protection of this application. The specific working process of the units and modules in the above-mentioned system can refer to the corresponding process in the aforementioned method embodiment, which will not be repeated here.

[0194] Figure 4 This is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. Figure 4 As shown, the electronic device 3 of this embodiment may include: at least one processor 30 ( Figure 4 Only one processor 30 is shown in the figure), a memory 31, and a computer program 32 stored in the memory 31 and executable on at least one processor 30. When the processor 30 executes the computer program 32, the steps in any of the above-mentioned method embodiments are implemented. For example, Figure 1 Steps S101 to S104 in the illustrated embodiment. Alternatively, when the processor 30 executes the computer program 32, the functions of each module / unit in the above-mentioned device embodiments are implemented, for example Figure 3 Functions of modules 401 to 404 are shown.

[0195] Exemplarily, the computer program 32 may be divided into one or more modules / units, one or more modules / units are stored in the memory 31, and are executed by the processor 30 to complete the present application. One or more modules / units may be a series of computer program 32 instruction segments capable of completing specific functions, and the instruction segments are used to describe the execution process of the computer program 32 in the electronic device 3.

[0196] An embodiment of the present application provides a chart display system, including: an electronic device and a display device, wherein the electronic device is communicatively connected to the display device.

[0197] The embodiment of the present application further provides a computer-readable storage medium, which stores a computer program 32. When the computer program 32 is executed by the processor 30, the steps in the above-mentioned method embodiments can be implemented.

[0198] An embodiment of the present application provides a computer program product. When the computer program product runs on an electronic device, the electronic device can implement the steps in the above-mentioned method embodiments when executing the computer program product.

[0199] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. According to this understanding, the present application implements all or part of the processes in the above-mentioned embodiment method, which can be completed by instructing the relevant hardware through a computer program 32, and the computer program 32 can be stored in a computer-readable storage medium, and the computer program 32 can implement the steps of the above-mentioned various method embodiments when executed by the processor 30. Among them, the computer program 32 includes computer program code, and the computer program code can be in source code form, object code form, executable file or some intermediate form. The computer-readable medium may at least include: any entity or device capable of carrying the computer program code to the terminal, a recording medium, a computer memory, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, Random Access Memory), an electric carrier signal, a telecommunication signal, and a software distribution medium. For example, a USB flash drive, a mobile hard disk, a magnetic disk or an optical disk. In some jurisdictions, according to legislation and patent practice, computer-readable media cannot be electric carrier signals and telecommunication signals.

[0200] In the above embodiments, the description of each embodiment has its own emphasis. For parts that are not described or recorded in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0201] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0202] In the embodiments provided in the present application, it should be understood that the disclosed devices / network equipment and methods can be implemented in other ways. For example, the device / network equipment embodiments described above are merely schematic. For example, the division of the modules or units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0203] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0204] The embodiments described above are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, a person skilled in the art should understand that the technical solutions described in the aforementioned embodiments may still be modified, or some of the technical features may be replaced by equivalents. Such modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application, and should all be included in the protection scope of the present application. < / svg> < / canvas>

Claims

1. A method for processing a chart, characterized in that: include: Get the data for the chart; generating a chart based on the data of the chart and current chart parameters related to the chart, and displaying the chart in a main component, wherein the data of the main component has chart configuration options written therein; In case of acquiring operation information of the chart configuration option in the main component, updating the chart parameters based on the operation information; The chart is updated based on the updated chart parameters and the data of the chart, and the updated chart is displayed in the main component.

2. The method according to claim 1, characterized in that The method further comprises: In the case where operation information for dragging the chart displayed in the main component to the main page is obtained, determining a stop position in the main page based on the operation information; The chart is inserted at the stop position.

3. The method according to claim 2, characterized in that The inserting the chart at the stop position comprises: Create a chart container at the stop position; Insert the chart into the chart container.

4. The method according to claim 3, characterized in that The method further comprises: Monitor whether the data of the chart changes; When there is a change in the data of the chart, the chart in the main component is updated based on the changed information, and the chart in the chart container is updated.

5. The method according to claim 4, characterized in that The method further comprises: In response to the operation information for changing the size of the chart container, the size of the chart container is changed to change the size of the chart.

6. The method according to claim 2, characterized in that The inserting the chart at the stop position comprises: converting the diagram into a picture; Insert the picture at the stop position.

7. The method according to any one of claims 1 to 6, characterized in that: The method also includes: creating a Vue project, adding a main component and a main page component in the Vue project, adding a chart configuration option in the main component, adding a chart container in the main page component, and adding operation options for the container, wherein the chart configuration options include: options for selecting a chart type and / or options for selecting a chart style.

8. A diagram processing device, characterized in that: include: The acquisition module is used to obtain the data of the chart; A generating module, used for generating a chart based on the data of the chart and current chart parameters related to the chart, and displaying the chart in a main component, wherein the data of the main component has chart configuration options written therein; A first updating module is used to update the chart parameters based on the operation information of the chart configuration option in the main component when the operation information is obtained; The second updating module is used to update the chart based on the updated chart parameters and the data of the chart, and display the updated chart in the main component.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the method according to any one of claims 1 to 7 is implemented.

10. A chart display system, characterized in that: include: An electronic device and a display device, wherein the electronic device is communicatively connected with the display device.

11. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

Images