Front-end development method and system for realizing data visualization editor based on vue

Abstract

The invention relates to the technical field of computers, in particular to a front-end development method and system for achieving a data visualization editor based on vue, and the method comprises the following steps: building a front-end engineering project; implementing a canvas area; packaging the components of the single component library; a static data configuration function is realized; realizing an interface data configuration function; a view storage and preview function is realized; the front-end development method and system for realizing the data visualization editor based on the vue have the beneficial effects that dragging of a component graph layer in the canvas is supported, real-time coordinate change when the graph layer in the canvas is dragged is supported, auxiliary alignment of an auxiliary line is realized, a view editing effect is previewed at any time, and the development efficiency is improved. Two data configuration modes of static data and interface data are supported, components in a component library can be flexibly managed, free packaging can be carried out according to service requirements, components in a page can be flexibly arranged in a dragging mode, the actual screen projection effect can be checked at any time through a preview function, and timely adjustment can be carried out according to the effect.

Description

Technical Field

[0001] This invention relates to the field of computer technology, specifically to a front-end development method and system for implementing a data visualization editor based on Vue. Background Art

[0002] Compared to traditional charts and data dashboards, today's data visualization aims to present business insights hidden behind rapidly changing and complex data in a more vivid and user-friendly way. Whether in retail, logistics, power, water conservancy, environmental protection, or transportation, interactive real-time data visualization applications are increasingly becoming an indispensable part of big data solutions, helping business personnel discover and diagnose business problems.

[0003] Traditional data visualization development methods are time-consuming and labor-intensive, make it difficult to effectively reuse code resources, and require a high level of expertise from developers. Summary of the Invention

[0004] The purpose of this invention is to provide a front-end development method and system for implementing a data visualization editor based on Vue, so as to solve the problems mentioned in the background art.

[0005] To achieve the above objectives, the present invention provides the following technical solution: a front-end development method for implementing a data visualization editor based on Vue, the method comprising the following steps:

[0006] Set up the front-end project;

[0007] Implement the canvas area;

[0008] Encapsulate a single component library component;

[0009] Implement static data configuration functionality;

[0010] Implement interface data configuration functionality;

[0011] Implement view saving and preview functions.

[0012] Preferably, the specific steps for building a front-end project include:

[0013] Use vue-cli scaffolding to build a data visualization editor front-end project, bundle and build it with webpack, and import relevant plugins with npm.

[0014] Preferably, the specific operations for implementing the canvas area include:

[0015] The interface uses a div to reserve a canvas area, and uses the vue-ruler-tool plugin to implement the ruler function. It obtains the array of components in the current view canvas through the interface and defines them as widgets. It encapsulates widget components to display individual components, and iterates through the widgets array in the canvas div to display the components in the canvas one by one.

[0016] Preferably, the specific operations for encapsulating a single component library component include:

[0017] Organize the component types in the component library and divide them into five categories based on their functions: charts, multimedia, maps, tables, and resource libraries. These are then encapsulated into components that can be directly imported when dragged and dropped onto the canvas. During encapsulation, the component's name, icon, configuration, data, and coordinates need to be defined. The components use the echarts component library to implement chart functionality and use watch deep listening to achieve real-time view refresh of chart data.

[0018] Preferably, the specific operations for implementing the static data configuration function include: the component supports configuring static data, the static large screen effect diagram is generated by configuring static data, and the bin-code-editor plugin is used to generate an edit box for editing static data when configuring static data;

[0019] The specific steps to implement the interface data configuration function include: the component supports configuring interfaces, and you can simply enter the interface access address to call the interface and obtain the interface data;

[0020] The specific operations to implement the view save and preview functions include: after clicking the view save button, the save interface will be called to save the data visualization configuration data to the database. During preview, the configuration data of the view will be retrieved based on the view code as a parameter. Based on the configuration data, the view will be loaded in the canvas and a new browser tab will be created for display.

[0021] A front-end development system for implementing a data visualization editor based on Vue.js, the system comprising:

[0022] Use the Vue CLI scaffolding tool to build the front-end project framework, and use Webpack to bundle and build the project;

[0023] Import and manage various plugins and libraries required by the project through npm, including but not limited to vue-ruler-tool and echarts, to support the implementation of project functions;

[0024] Design and implement a central canvas area, define the canvas style using Vue components and CSS styles, and provide ruler functionality using the vue-ruler-tool plugin to support the layout and positioning of data visualization components;

[0025] It provides a flexible component library covering five major categories of components: charts, multimedia, maps, tables, and material libraries. Each component has a name, icon, configuration options, data interface, and location attributes, and supports adding components to the canvas by dragging and dropping.

[0026] The component integrates the echarts charting library to implement complex charting functions, and uses Vue's watch mechanism to deeply monitor data changes, enabling real-time refreshing of chart data and view updates.

[0027] Preferably, the system also includes a static data configuration function: providing a user-friendly interface that allows users to configure the static data of components through the bin-code-editor plugin's edit box; the configured data can be directly applied to component display, supporting the generation of static large-screen effect diagrams, and meeting the display requirements that do not require real-time data updates.

[0028] Preferably, the system also includes an interface data configuration function: it supports users to configure external data interface addresses for components; the system automatically calls these interfaces to obtain real-time data and passes the data to the corresponding components for display, thereby achieving a data-driven dynamic visualization effect.

[0029] Preferably, the system also includes view saving and preview functions: design and implement a view saving interface to allow users to save the current canvas configuration data, including component layout, configuration options, and data interfaces, to the server database; provide a view preview function, where users can input view code or select a saved view, and the system will reload the view in the canvas according to the view configuration data and display the preview effect in a new browser tab.

[0030] Preferably, the system has high scalability and customizability, supporting the enrichment of the data visualization editor's functionality by adding new component types or extending the functionality of existing components; it provides detailed development documentation and user manuals to help developers get started quickly and system users use the data visualization editor efficiently.

[0031] Compared with the prior art, the present invention has the following beneficial effects:

[0032] This invention proposes a front-end development method and system for implementing a data visualization editor based on Vue.js. It supports dragging and dropping component layers on the canvas, real-time coordinate changes and alignment with guide lines when dragging layers on the canvas, real-time preview of view editing effects, and support for both static and API data configuration methods. It allows for flexible management of components in the component library, free encapsulation according to business needs, flexible layout of components on the page through dragging and dropping, and real-time viewing of the actual projection effect through the preview function, with timely adjustments based on the results. BRIEF DESCRIPTION OF THE DRAWINGS

[0033] Figure 1 This is a flowchart of the method of the present invention;

[0034] Figure 2 This is a schematic diagram illustrating the page layout effect of the present invention. DETAILED DESCRIPTION

[0035] To make the objectives, technical solutions, and advantages of the present invention clear and complete, the embodiments of the present invention will be further described in detail below with reference to the accompanying drawings. It should be understood that the specific embodiments described herein are only some, not all, embodiments of the present invention, and are merely illustrative of the embodiments of the present invention. They are not intended to limit the embodiments of the present invention. All other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0036] Example 1, please refer to Figures 1 to 2 This invention provides a technical solution: a front-end development method for implementing a data visualization editor based on Vue, the method comprising the following steps:

[0037] 1. Set up the front-end project

[0038] Use vue-cli scaffolding to build a data visualization editor front-end project, bundle and build it with webpack, and import relevant plugins with npm;

[0039] 2. Implement the canvas area

[0040] A div is used to reserve a canvas area in the center of the interface, and the vue-ruler-tool plugin is used to implement the ruler function. The array of components in the current view canvas is obtained through an interface and defined as widgets. Widget components are encapsulated to display individual components. The widgets array is traversed in the canvas div to display the components in the canvas one by one.

[0041] 3. Encapsulate individual component library components

[0042] Organize the component types in the component library and divide them into five categories based on their functions: charts, multimedia, maps, tables, and resource libraries. These are then encapsulated into components that can be directly imported when dragged and dropped onto the canvas. During encapsulation, the component's name, icon, configuration, data, and coordinates need to be defined. The components use the echarts component library to implement chart functionality and use watch deep listening to achieve real-time view refresh of chart data.

[0043] 4. Implement static data configuration function

[0044] The component supports configuring static data, which allows for the generation of static dashboard mockups. When configuring static data, the bin-code-editor plugin generates an edit box for editing the static data.

[0045] 5. Implement interface data configuration function

[0046] The component supports configuring interfaces; simply enter the interface access address to call the interface and retrieve the interface data.

[0047] 6. Implement view saving and preview functions.

[0048] Clicking the view save button will call the save interface to save the data visualization configuration data to the database. During preview, the configuration data of the view is retrieved based on the view code as a parameter. The view is then loaded in the canvas and displayed in a new browser tab based on the configuration data.

[0049] Example 2, based on Example 1, proposes a front-end development system for implementing a data visualization editor using Vue.js. The system includes:

[0050] Use the Vue CLI scaffolding tool to build the front-end project framework, and use Webpack to bundle and build the project;

[0051] Import and manage various plugins and libraries required by the project through npm, including but not limited to vue-ruler-tool and echarts, to support the implementation of project functions;

[0052] Design and implement a central canvas area, define the canvas style using Vue components and CSS styles, and provide ruler functionality using the vue-ruler-tool plugin to support the layout and positioning of data visualization components;

[0053] It provides a flexible component library covering five major categories of components: charts, multimedia, maps, tables, and material libraries. Each component has a name, icon, configuration options, data interface, and location attributes, and supports adding components to the canvas by dragging and dropping.

[0054] The component integrates the echarts charting library to implement complex charting functions, and uses Vue's watch mechanism to deeply monitor data changes, enabling real-time refreshing of chart data and view updates.

[0055] The system also includes a static data configuration function: it provides a user-friendly interface that allows users to configure the static data of components through the bin-code-editor plugin's edit box; the configured data can be directly applied to component display, supports the generation of static large screen effect diagrams, and meets the display needs that do not require real-time data updates.

[0056] The system also includes interface data configuration functionality: it supports users in configuring external data interface addresses for components; the system automatically calls these interfaces to obtain real-time data and passes the data to the corresponding components for display, achieving data-driven dynamic visualization effects.

[0057] The system also includes view saving and preview functions: a view saving interface is designed and implemented, allowing users to save the current canvas configuration data, including component layout, configuration options, and data interfaces, to the server database; a view preview function is provided, allowing users to input view code or select a saved view, and the system will reload the view in the canvas according to the view configuration data and display the preview effect in a new browser tab.

[0058] The system is highly scalable and customizable, supporting the enrichment of the data visualization editor's functionality by adding new component types or extending the functionality of existing components; it provides detailed development documentation and user manuals to help developers get started quickly and system users use the data visualization editor efficiently.

[0059] Example 3, based on Example 2, proposes the implementation of view saving and preview functions:

[0060] 1. View saving function

[0061] Step description:

[0062] User action: After completing the data visualization editing, the user clicks the "Save View" button.

[0063] Data processing: The system first collects the configuration information of all components on the current canvas, including component type, position, size, configuration options (such as chart type, data source, etc.), static data or interface data address, etc.

[0064] Organize this information into configuration data in JSON format.

[0065] Data writing: Call the save interface provided by the backend and send the configuration data in JSON format as the request body to the server.

[0066] After receiving the data, the server saves it to the database and returns a successful save response to the front end.

[0067] Front-end feedback: After receiving the successful save response, the front-end displays a message indicating that the save was successful to the user.

[0068] Example of data parameters (JSON format):

[0069]

[0070]

[0071] 2. View Preview Function

[0072] Step description: User operation: The user clicks the "Preview View" button, or enters the view code to select a saved view.

[0073] Data Acquisition: The system sends a request to the backend based on the view code or user selection to obtain the configuration data of the corresponding view.

[0074] The backend retrieves the configuration data from the database and returns it to the frontend.

[0075] Data loading: After receiving the configuration data, the front end parses the JSON data and reloads the view on the canvas according to the component configuration information in the data.

[0076] For components that need to call APIs to retrieve data, the system automatically initiates requests to obtain real-time data and updates the component display.

[0077] Preview: The completed view is displayed in a new browser tab, allowing users to preview the effect.

[0078] Example of data parameters (same as above, this is the configuration data generated when the view is saved).

[0079] This example details how to implement view saving and preview functionality in the Vue data visualization editor, including key steps such as user operation, data processing, data writing, front-end feedback, and data loading, and provides examples of data parameters.

[0080] While embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions, and variations may be made to these embodiments without departing from the principles and spirit of the invention, and that the scope of the invention is defined by the appended claims and their equivalents.

Claims

1. A front-end development method for implementing a data visualization editor based on Vue, characterized in that: The method comprises the following steps: Build front-end engineering projects; Implement the canvas area; Encapsulate a single component library component; Realize static data configuration function; Realize interface data configuration function; Implement view saving and preview functions.

2. According to claim 1, a front-end development method for implementing a data visualization editor based on Vue is characterized in that: The specific operations of building a front-end engineering project include: Use vue-cli scaffolding to build the data visualization editor front-end project, webpack packaging and construction, and npm to introduce related plug-ins.

3. According to claim 1, a front-end development method for implementing a data visualization editor based on Vue is characterized in that: The specific operations to implement the canvas area include: A div is used to reserve the canvas area in the center of the interface, and the vue-ruler-tool plug-in is used to implement the ruler function. The component array in the current view canvas is obtained through the interface and defined as widgets. The widget component is encapsulated to display a single component. The widgets array is traversed in the canvas div to display the components in the canvas one by one.

4. According to claim 1, a front-end development method for implementing a data visualization editor based on Vue is characterized in that: The specific operations of encapsulating a single component library component include: Sort out the component types in the component library, divide the components in the component library into five categories according to their functions: charts, multimedia, maps, tables, and material libraries, and encapsulate them into components. They can be directly introduced when dragging them to the canvas. When encapsulating, you need to define the component name, icon, configuration, data, and coordinates. The echarts component library is used inside the component to implement the chart function, and the real-time view refresh of the chart data is achieved through watch deep monitoring.

5. According to claim 1, a front-end development method for implementing a data visualization editor based on Vue is characterized in that: The specific operations to implement the static data configuration function include: the component supports the configuration of static data, the generation of static large-screen effect pictures is completed by configuring static data, and when configuring static data, the bin-code-editor plug-in is used to generate an edit box to edit static data; The specific operations to implement the interface data configuration function include: the component supports the configuration interface, and the interface access address is input to call the interface to obtain the interface data; The specific operations to implement the view saving and preview functions include: after clicking the view save button, the save interface will be called to save the data visualization configuration data to the database; during preview, the configuration data of the view will be retrieved based on the view code as a parameter; the view will be loaded into the canvas based on the configuration data and a new browser tab will be created for display.

6. A front-end development system for implementing a data visualization editor based on Vue according to the front-end development method for implementing a data visualization editor based on Vue according to any one of claims 1 to 5, characterized in that: The system comprises: Use Vue CLI scaffolding tool to build the front-end project framework, and use Webpack to package and build the project; Introduce and manage various plug-ins and libraries required for the project through npm, including but not limited to vue-ruler-tool and echarts, to support the implementation of project functions; Design and implement a central canvas area, use Vue components and CSS styles to define the canvas style, and combine the vue-ruler-tool plug-in to provide a ruler function to support the layout and positioning of data visualization components; Provides a flexible component library, covering five categories of components: charts, multimedia, maps, tables, and material libraries. Each component has a name, icon, configuration options, data interface, and location attributes, and supports adding components on the canvas by dragging and dropping. The component integrates the echarts chart library to implement complex chart functions, and deeply monitors data changes through Vue's watch mechanism to achieve real-time refresh of chart data and view update.

7. According to claim 6, a front-end development system for implementing a data visualization editor based on Vue is characterized in that: The system also includes a static data configuration function: it provides a user-friendly interface that allows users to configure the static data of components through the bin-code-editor plug-in editing box; the configured data can be directly applied to component display, supporting the generation of static large-screen renderings to meet display requirements that do not require real-time data updates.

8. According to claim 6, a front-end development system for implementing a data visualization editor based on Vue, characterized in that: The system also includes an interface data configuration function: it supports users to configure external data interface addresses for components; the system automatically calls these interfaces to obtain real-time data, and passes the data to the corresponding components for display, achieving data-driven dynamic visualization effects.

9. According to claim 6, a front-end development system for implementing a data visualization editor based on Vue, characterized in that: The system also includes view saving and preview functions: design and implement a view saving interface, allowing users to save the configuration data of the current canvas, including component layout, configuration options, and data interface, to the server database; provide a view preview function, where users enter the view code or select a saved view, and the system reloads the view in the canvas according to the view configuration data, and displays the preview effect in a new browser tab.

10. According to claim 6, a front-end development system for implementing a data visualization editor based on Vue, characterized in that: The system is highly scalable and customizable, and supports enriching the functionality of the data visualization editor by adding new component types or extending the functionality of existing components. It provides detailed development documentation and user manuals to help developers get started quickly and system users use the data visualization editor efficiently.

Images