Front-end development method and device of data visualization view, medium and equipment

Abstract

The invention provides a front-end development method and device for a data visualization view, a medium and equipment. The method comprises the following steps: providing a component library function area, so that a person selects a required component from a component library in the component library function area and drags the required component into a canvas; providing an attribute panel to enable the personnel to configure the styles of the components in the style configuration area, synchronously updating the configured styles to the corresponding layers in the canvas after the styles of the components are configured, and enabling the personnel to configure the data sources in the data configuration area; taking each layer on the canvas and the configuration information on the attribute panel as the configuration information of a data visualization view, and storing the configuration information in a database; and providing a preview button, and when the preview button is triggered, loading the configuration information of the data visualization view from the database, so that the data visualization view is displayed on the browser page. According to the embodiment of the invention, human resources for view development can be saved, the efficiency is improved, and personnel with high professional degree are not needed.

Description

Technical Field

[0001] The present invention relates to the field of front-end development technology, and in particular to a front-end development method, device, medium, and equipment for a data visualization view. Background Art

[0002] Compared with traditional charts and data dashboards, today's data visualization is committed to using a more vivid and friendly form to instantly present the business situation hidden behind the ever-changing and complex data. Whether in the fields of retail, logistics, electricity, water conservancy, environmental protection, or transportation, using interactive real-time data visualization applications to help business personnel discover and diagnose business problems is becoming an indispensable part of big data solutions. The development of traditional data visualization displays is time-consuming and labor-intensive, making it difficult to effectively reuse code resources and requiring high professionalism from developers. Summary of the invention

[0003] In response to at least one of the above technical problems, an embodiment of the present invention provides a front-end development method, device, medium, and equipment for a data visualization view.

[0004] According to a first aspect, a front-end development method for a data visualization view provided by an embodiment of the present invention is performed by a data visualization editor, and the method includes:

[0005] A component library function area is provided, so that personnel can select required components from the component library in the component library function area according to data visualization requirements and drag them into the canvas, and each component dragged into the canvas becomes a layer on the canvas;

[0006] Provide a property panel, the property panel includes a style configuration area and a data configuration area, so that personnel can configure the style of the component in the style configuration area, and after the component style configuration is completed, the configured style is synchronously updated to the corresponding layer in the canvas, and personnel can configure the data source in the data configuration area, the data source is the data source of the data visualization view to be completed;

[0007] Using each layer on the canvas and configuration information on the property panel as configuration information of a data visualization view, and saving the configuration information of the data visualization view to a database;

[0008] A preview button is provided, and when the preview button is triggered, configuration information of the data visualization view is loaded from the database so that the data visualization view is displayed on the browser page.

[0009] In one embodiment, before providing the component library function area, the method further includes: when the data visualization editor is opened, providing a canvas background configuration page, so that a person can configure the canvas on the canvas background configuration page.

[0010] In one embodiment, the component library includes at least one of a chart component, a multimedia component, a map component, a table component and a material library component.

[0011] In one embodiment, the style configuration area includes basic style configuration options and personalized style configuration options, so that a person can configure the common style of a component in the basic style configuration options and configure the personalized style of a component in the personalized style configuration options.

[0012] In one embodiment, the data configuration area provides a static data source configuration method and an interface data source configuration method; wherein the static data source configuration method refers to a configuration method of manually inputting data from a person or obtaining data from a local location, and the interface data source configuration method refers to a configuration method of obtaining data from a backend through an interface access address.

[0013] In one embodiment, the visual editor supports operations of deleting, copying, pinning, pinning, moving up one layer, and moving down one layer on the layer on the canvas; the visual editor supports the function of displaying the real-time coordinates of the layer on the canvas and supports auxiliary lines for auxiliary alignment.

[0014] In one embodiment, the method further comprises:

[0015] Providing at least one visualization template; wherein the visualization template refers to a basic template example of a pre-configured data visualization view;

[0016] When a person selects a visualization template from the at least one visualization template, the selected visualization template is loaded, so that the person can adjust the loaded visualization template according to data visualization requirements to obtain a desired data visualization view.

[0017] According to a second aspect, a front-end development device for a data visualization view provided by an embodiment of the present invention is deployed on a data visualization editor, and the device includes:

[0018] A first providing module is used to provide a component library function area, so that personnel can select required components from the component library in the component library function area according to data visualization requirements and drag them into the canvas, and each component dragged into the canvas becomes a layer on the canvas;

[0019] A second providing module is used to provide a property panel, wherein the property panel includes a style configuration area and a data configuration area, so that a person can configure the style of a component in the style configuration area, and after the style configuration of the component is completed, the configured style is synchronously updated to the corresponding layer in the canvas, and the person can configure a data source in the data configuration area, wherein the data source is the data source of the data visualization view to be completed;

[0020] A data saving module, used to use the configuration information of each layer on the canvas and on the property panel as the configuration information of the data visualization view, and save the configuration information of the data visualization view to a database;

[0021] The view preview module is used to provide a preview button. When the preview button is triggered, the configuration information of the data visualization view is loaded from the database so that the data visualization view is displayed on the browser page.

[0022] In one embodiment, the device may further include:

[0023] The canvas configuration module is used to provide a canvas background configuration page when the data visualization editor is opened before the first providing module provides the component library function area, so that the personnel can configure the canvas on the canvas background configuration page.

[0024] In one embodiment, the component library includes at least one of a chart component, a multimedia component, a map component, a table component and a material library component.

[0025] In one embodiment, the style configuration area includes basic style configuration options and personalized style configuration options, so that a person can configure the common style of a component in the basic style configuration options and configure the personalized style of a component in the personalized style configuration options.

[0026] In one embodiment, the data configuration area provides a static data source configuration method and an interface data source configuration method; wherein the static data source configuration method refers to a configuration method of manually inputting data from a person or obtaining data from a local location, and the interface data source configuration method refers to a configuration method of obtaining data from a backend through an interface access address.

[0027] In one embodiment, the visual editor supports operations of deleting, copying, pinning, pinning, moving up one layer, and moving down one layer on the layer on the canvas; the visual editor supports the function of displaying the real-time coordinates of the layer on the canvas and supports auxiliary lines for auxiliary alignment.

[0028] In one embodiment, the apparatus further comprises:

[0029] A template modification module is used to provide at least one visualization template; wherein the visualization template refers to a basic template example of a pre-configured data visualization view; when a person selects a visualization template from the at least one visualization template, the selected visualization template is loaded so that the person can adjust the loaded visualization template according to the data visualization requirements to obtain the desired data visualization view.

[0030] According to a third aspect, an embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed in a computer, enables the computer to execute the method provided in the first aspect.

[0031] According to a fourth aspect, an embodiment of the present invention provides a computing device, including a memory and a processor, wherein the memory stores executable code, and when the processor executes the executable code, the method provided in the first aspect is implemented.

[0032] The front-end development method, device, medium, and equipment of the data visualization view provided by the embodiment of the present invention can select the required components from the component library in the component library function area according to the data visualization requirements and drag them to the canvas, configure the style of the component in the style configuration area, and synchronize the configured style to the corresponding layer in the canvas after the component style configuration is completed, and configure the data source in the data configuration area. Based on the configuration information of each layer on the canvas and on the property panel as the configuration information of the data visualization view, and save the configuration information of the data visualization view to the database, the development of a data visualization view is realized. Moreover, the effect of the data visualization view can be seen on the browser page by triggering the preview button. It can be seen that the embodiment of the present invention supports the development of data visualization views by dragging components. That is, by simply dragging, style, and data source configuration, a data visualization view can be obtained, which can be easily completed without programming, which can improve the versatility of the development of data visualization views, save human resources and improve development efficiency, and can be realized without the need for highly professional personnel. BRIEF DESCRIPTION OF THE DRAWINGS

[0033] Figure 1 A schematic diagram of a process flow of a front-end development method for a data visualization view in one embodiment of the present invention;

[0034] Figure 2 It is a structural block diagram of a front-end development device for a data visualization view in one embodiment of the present invention. DETAILED DESCRIPTION

[0035] In a first aspect, an embodiment of the present invention provides a front-end development method for a data visualization view, the method being executed by a data visualization editor, see Figure 1 The method comprises the following steps S110 to S140:

[0036] S110, providing a component library function area, so that a person can select a required component from a component library in the component library function area according to data visualization requirements and drag it to a canvas, and each component dragged to the canvas becomes a layer on the canvas;

[0037] Among them, the data visualization editor has multiple functional areas, including the canvas, component library functional area, property panel, etc.

[0038] In actual scenarios, users can select the required components from the component library in the component library function area and drag the components onto the canvas to achieve certain data visualization functions. The components dragged onto the canvas become a layer on the canvas.

[0039] In one embodiment, the component library may include at least one of a chart component, a multimedia component, a map component, a table component and a material library component.

[0040] Here, the chart component refers to a component that displays data in the form of icons, for example, a component that displays data in the form of a bar chart, a pie chart, a line chart or other forms.

[0041] The multimedia component refers to a component that adds multimedia information to the canvas, such as video, picture, text, music, etc.

[0042] The map component refers to a component that adds map information to the canvas.

[0043] The table component refers to a component for adding a table to the canvas.

[0044] Among them, the material library component refers to the component for adding materials on the canvas, and the material refers to the material required for data visualization processing.

[0045] In one embodiment, before providing the component library function area in S110, the method may further include: when the data visualization editor is opened, providing a canvas background configuration page, so that a person can configure the canvas on the canvas background configuration page.

[0046] That is, when a user opens a data visualization editor, the data visualization editor may provide a canvas background configuration page, so that the user may configure the canvas on the canvas background configuration page, for example, configure parameters such as the resolution and size of the canvas.

[0047] In one embodiment, the visual editor supports operations of deleting, copying, pinning, pinning, moving up one layer, and moving down one layer on the layer on the canvas; the visual editor supports the function of displaying the real-time coordinates of the layer on the canvas and supports auxiliary lines for auxiliary alignment.

[0048] For example, right-clicking a layer will display a list of operation options, including delete, copy, pin to top, pin to bottom, move up one layer, and move down one layer. Users can select one of the operation options to operate the layer.

[0049] When a component is dragged onto the canvas and becomes a layer, the coordinates of the layer will be displayed in real time to help people understand the location information of the layer. In addition, the data visualization editor also has the function of auxiliary alignment using auxiliary lines, which can be used to achieve layer alignment.

[0050] S120, providing a property panel, the property panel including a style configuration area and a data configuration area, so that a person can configure the style of a component in the style configuration area, and after the style configuration of the component is completed, the configured style is synchronously updated to the corresponding layer in the canvas, and the person can configure a data source in the data configuration area, the data source being the data source of the data visualization view to be completed;

[0051] It can be seen that users can configure the style of components in the style configuration area of ​​the property panel, for example, configure the size, color, font, color, spacing, position and other properties of the component. When the user completes the style configuration of a component in the style configuration area, the corresponding layer of the component on the canvas will be synchronously updated to the configured style. Users can configure the data source in the data configuration area. The so-called data source refers to the source of data for visualization processing.

[0052] In one embodiment, the style configuration area includes basic style configuration options and personalized style configuration options, so that a person can configure the common style of a component in the basic style configuration options and configure the personalized style of a component in the personalized style configuration options.

[0053] Among them, the basic style configuration options refer to the configuration options of the general style. Users can configure the general style of the component on the basic style configuration options, such as the left margin, right margin, width, height, etc. of the layer. The personalized style configuration options refer to the configuration options of the personalized style. Users can configure the personalized style of the component on the personalized style configuration options. For example, if the color of component a is red and the style of component b is blue, they can configure it on the personalized style configuration options.

[0054] In one embodiment, the data configuration area provides a static data source configuration method and an interface data source configuration method; wherein the static data source configuration method refers to a configuration method of manually inputting data from a person or obtaining data from a local location, and the interface data source configuration method refers to a configuration method of obtaining data from a backend through an interface access address.

[0055] Among them, users can use the user-entered data or local data as the data source of the data visualization view through the static data source configuration method. Specifically, you can use the bin-code-editor plug-in to generate an edit box to edit static data. Users can also use the backend data source corresponding to the interface access address as the data source of the data visualization view through the interface data source configuration method. Specifically, users only need to enter the interface access address, and then call the interface to obtain the backend data source.

[0056] S130, using each layer on the canvas and the configuration information on the property panel as the configuration information of the data visualization view, and saving the configuration information of the data visualization view to a database;

[0057] It can be seen that the user forms at least one layer on the canvas by dragging at least one component, and then configures the style and data source on the property panel. Each layer on the canvas and each piece of information configured on the property panel are used as the configuration information of the data visualization view to form a data package, which is saved in the back-end database. At this point, a data visualization view is configured.

[0058] Among them, the data visualization view can be called the big screen.

[0059] S140. Provide a preview button. When the preview button is triggered, load the configuration information of the data visualization view from the database so that the data visualization view is displayed on the browser page.

[0060] It can be seen that when the user clicks the preview button, the configuration information of the data visualization view can be obtained from the database, so that the effect of the data visualization view will be displayed on the browser page. If it is not satisfied, you can continue to adjust and modify it. That is, the embodiment of the present invention supports previewing the edited data visualization view at any time, and independently opening the data visualization view in the page to view the view projection effect.

[0061] Based on the above steps S110 to S140, a data visualization view can be configured and previewed. Another way to generate a data visualization view is to make certain adjustments based on an existing data visualization view to obtain a data visualization view that the user wants. To this end, in one embodiment, the method may also include:

[0062] 1. Provide at least one visualization template; wherein the visualization template refers to a basic template example of a pre-configured data visualization view;

[0063] 2. When a person selects a visualization template from the at least one visualization template, the selected visualization template is loaded, so that the person can adjust the loaded visualization template according to data visualization requirements to obtain a desired data visualization view.

[0064] That is, the data visualization editor can provide one or more visualization templates, which are pre-configured basic template examples. Specifically, multiple basic template examples can be pre-configured for different business scenarios. The user selects a visualization template from these visualization templates as needed. After the visualization template is loaded, the user can adjust the visualization template as needed to obtain the data visualization view the user wants.

[0065] Among them, since at least one visualization template is pre-configured, a professional data visualization dashboard can be built by simply modifying the visualization template, so that it can be quickly put into use.

[0066] It can be seen that the embodiments of the present invention provide two methods for developing large-screen visualization pages.

[0067] The data visualization view can visualize the data in the pre-configured data source in the form of chart components in the data visualization view.

[0068] Among them, the embodiment of the present invention supports operations such as creating, editing, previewing, deleting, and sharing data visualization views. It also supports configuring the resolution size of the data visualization view, and the generated data visualization view supports adaptive display on screens with different resolutions during preview. It also supports displaying the view list under the current user's authority in the form of thumbnails. The embodiment of the present invention classifies each component, and reduces the complexity of using the data visualization editor by classifying the components, thereby improving the configuration efficiency.

[0069] In actual scenarios, the front-end engineering framework of the data visualization editor can use the vue front-end development framework, use the vue-cli scaffolding to build the front-end project of the data visualization editor, and use webpack to package and build. The embodiment of the present invention also introduces a variety of related plug-ins, among which the main plug-in libraries used are: (1) vuedraggable: a vue drag plug-in based on Sortable.js; (2) element-ui: a set of front-end ui components based on the MVVM framework Vue open source; (3) vue-echarts: a packaged vue plug-in developed based on ECharts v4.0.1+; (4) vue-router: a front-end routing tool provided by Vue, which realizes page routing control, partial refresh and on-demand loading, builds single-page applications, and realizes front-end and back-end separation.

[0070] When encapsulating a component, define the component's name, icon, configuration, data, and coordinates. The component uses the vue-echarts component library to display data in a chart. When dragging, use the vuedraggable plug-in to implement the dragging function. The component vue-ruler-tool can be used to implement web ruler auxiliary lines. The vue-echarts component implements the chart drawing function. The v-chart component is used to encapsulate the chart component. Use npm to install related components and plug-ins.

[0071] In actual scenarios, the toolbar is located at the top of the data visualization editor. You can use the functions provided by the toolbar to perform operations such as saving and previewing on the large screen. All configuration data of the large screen will be saved to the backend database by calling the interface. Each update operation in the data visualization editor will call the interface to update the configuration information of the large screen in the backend database. After clicking the view save button, the save interface will be called to save the data visualization configuration data to the database; clicking the preview button will retrieve the configuration data of the large screen, load the view in the canvas according to the configuration data, and create a new browser tab for display.

[0072] It can be seen that the embodiment of the present invention supports the development of a large data visualization screen by dragging components, that is, building a visualization application through a graphical interface. It can be seen that a data visualization view can be obtained by using a simple drag method, style and data source configuration, which can be easily completed without programming. It can be seen that the method provided based on the embodiment of the present invention can improve the versatility of the development of data visualization views, and it can be realized without the need for highly professional personnel.

[0073] In a second aspect, an embodiment of the present invention provides a front-end development device for a data visualization view, wherein the device is deployed on a data visualization editor, see Figure 2, the device 100 comprises:

[0074] A first providing module 110 is used to provide a component library function area, so that a person can select a required component from a component library in the component library function area according to data visualization requirements and drag it to a canvas, and each component dragged to the canvas becomes a layer on the canvas;

[0075] A second providing module 120 is used to provide a property panel, wherein the property panel includes a style configuration area and a data configuration area, so that a person can configure the style of a component in the style configuration area, and after the style configuration of the component is completed, the configured style is synchronously updated to the corresponding layer in the canvas, and the person can configure a data source in the data configuration area, wherein the data source is the data source of the data visualization view to be completed;

[0076] A data saving module 130, used to use the configuration information of each layer on the canvas and on the property panel as the configuration information of the data visualization view, and save the configuration information of the data visualization view to a database;

[0077] The view preview module 140 is used to provide a preview button. When the preview button is triggered, the configuration information of the data visualization view is loaded from the database so that the data visualization view is displayed on the browser page.

[0078] In one embodiment, the device may further include:

[0079] The canvas configuration module is used to provide a canvas background configuration page when the data visualization editor is opened before the first providing module provides the component library function area, so that the personnel can configure the canvas on the canvas background configuration page.

[0080] In one embodiment, the component library includes at least one of a chart component, a multimedia component, a map component, a table component and a material library component.

[0081] In one embodiment, the style configuration area includes basic style configuration options and personalized style configuration options, so that a person can configure the common style of a component in the basic style configuration options and configure the personalized style of a component in the personalized style configuration options.

[0082] In one embodiment, the data configuration area provides a static data source configuration method and an interface data source configuration method; wherein the static data source configuration method refers to a configuration method of manually inputting data from a person or obtaining data from a local location, and the interface data source configuration method refers to a configuration method of obtaining data from a backend through an interface access address.

[0083] In one embodiment, the visual editor supports operations of deleting, copying, pinning, pinning, moving up one layer, and moving down one layer on the layer on the canvas; the visual editor supports the function of displaying the real-time coordinates of the layer on the canvas and supports auxiliary lines for auxiliary alignment.

[0084] In one embodiment, the apparatus further comprises:

[0085] A template modification module is used to provide at least one visualization template; wherein the visualization template refers to a basic template example of a pre-configured data visualization view; when a person selects a visualization template from the at least one visualization template, the selected visualization template is loaded so that the person can adjust the loaded visualization template according to the data visualization requirements to obtain the desired data visualization view.

[0086] It is understandable that the explanation, specific implementation, beneficial effects, examples, etc. of the relevant contents in the device provided in the embodiment of the present invention can be found in the corresponding parts of the method provided in the first aspect, and will not be repeated here.

[0087] In a third aspect, an embodiment of the present invention provides a computer-readable medium, on which computer instructions are stored. When the computer instructions are executed by a processor, the processor executes the method provided in the first aspect.

[0088] Specifically, a system or device equipped with a storage medium can be provided, on which software program code that implements the functions of any of the above-mentioned embodiments is stored, and a computer (or CPU or MPU) of the system or device can be enabled to read and execute the program code stored in the storage medium.

[0089] In this case, the program code itself read from the storage medium can realize the function of any one of the above-mentioned embodiments, and thus the program code and the storage medium storing the program code constitute a part of the present invention.

[0090] The storage medium embodiments for providing the program code include a floppy disk, a hard disk, a magneto-optical disk, an optical disk (such as CD-ROM, CD-R, CD-RW, DVD-ROM, DVD-RAM, DVD-RW, DVD+RW), a magnetic tape, a non-volatile memory card, and a ROM. Alternatively, the program code can be downloaded from a server computer by a communication network.

[0091] In addition, it should be clear that the functions of any of the above embodiments can be implemented not only by executing the program code read by the computer, but also by enabling an operating system operating on the computer to complete part or all of the actual operations based on instructions from the program code.

[0092] In addition, it can be understood that the program code read from the storage medium is written to a memory provided in an expansion board inserted into the computer or to a memory provided in an expansion module connected to the computer, and then based on the instructions of the program code, a CPU installed on the expansion board or expansion module is enabled to perform part or all of the actual operations, thereby realizing the functions of any of the above-mentioned embodiments.

[0093] It is understandable that the explanation, specific implementation methods, beneficial effects, examples, etc. of the relevant contents in the computer-readable medium provided in the embodiment of the present invention can be found in the corresponding parts of the method provided in the first aspect, and will not be repeated here.

[0094] In a fourth aspect, an embodiment of the present specification provides a computing device, including a memory and a processor, wherein the memory stores executable code, and when the processor executes the executable code, it implements the method in any embodiment of the specification.

[0095] It is understandable that the explanation, specific implementation, beneficial effects, examples, etc. of the relevant contents in the computing device provided in the embodiment of the present invention can be found in the corresponding parts of the method provided in the first aspect, and will not be repeated here.

[0096] Each embodiment in this specification is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0097] Those skilled in the art should be aware that in one or more of the above examples, the functions described in the present invention can be implemented by hardware, software, widgets, or any combination thereof. When implemented by software, these functions can be stored in a computer-readable medium or transmitted as one or more instructions or codes on a computer-readable medium.

[0098] The specific implementation methods described above further illustrate the objectives, technical solutions and beneficial effects of the present invention in detail. It should be understood that the above description is only a specific implementation method of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc. made on the basis of the technical solution of the present invention should be included in the scope of protection of the present invention.

Claims

1. A front-end development method for a data visualization view, characterized in that: The method is performed by a data visualization editor, and the method includes: A component library function area is provided, so that personnel can select required components from the component library in the component library function area according to data visualization requirements and drag them into the canvas, and each component dragged into the canvas becomes a layer on the canvas; Provide a property panel, the property panel includes a style configuration area and a data configuration area, so that personnel can configure the style of the component in the style configuration area, and after the component style configuration is completed, the configured style is synchronously updated to the corresponding layer in the canvas, and personnel can configure the data source in the data configuration area, the data source is the data source of the data visualization view to be completed; Using each layer on the canvas and configuration information on the property panel as configuration information of a data visualization view, and saving the configuration information of the data visualization view to a database; A preview button is provided, and when the preview button is triggered, configuration information of the data visualization view is loaded from the database so that the data visualization view is displayed on the browser page.

2. The method according to claim 1, characterized in that Before providing the component library function area, the method further includes: when the data visualization editor is opened, providing a canvas background configuration page, so that a person can configure the canvas on the canvas background configuration page.

3. The method according to claim 1, characterized in that The component library includes at least one of a chart component, a multimedia component, a map component, a table component and a material library component.

4. The method according to claim 1, characterized in that The style configuration area includes basic style configuration options and personalized style configuration options, so that a person can configure the common style of a component in the basic style configuration options and configure the personalized style of a component in the personalized style configuration options.

5. The method according to claim 1, characterized in that The data configuration area provides a static data source configuration method and an interface data source configuration method; wherein the static data source configuration method refers to a configuration method in which the data source is manually input by personnel or obtained locally, and the interface data source configuration method refers to a configuration method in which the data source is obtained from the back end through an interface access address.

6. The method according to claim 1, characterized in that The visual editor supports operations of deleting, copying, pinning, pinning, moving up one layer, and moving down one layer on the canvas; the visual editor supports the function of displaying the real-time coordinates of the layers on the canvas and supports auxiliary alignment functions with auxiliary lines.

7. The method according to claim 1, characterized in that Also includes: Providing at least one visualization template; wherein the visualization template refers to a basic template example of a pre-configured data visualization view; When a person selects a visualization template from the at least one visualization template, the selected visualization template is loaded, so that the person can adjust the loaded visualization template according to data visualization requirements to obtain a desired data visualization view.

8. A front-end development device for a data visualization view, characterized in that: The device is deployed on a data visualization editor, and includes: A first providing module is used to provide a component library function area, so that personnel can select required components from the component library in the component library function area according to data visualization requirements and drag them into the canvas, and each component dragged into the canvas becomes a layer on the canvas; A second providing module is used to provide a property panel, wherein the property panel includes a style configuration area and a data configuration area, so that a person can configure the style of a component in the style configuration area, and after the style configuration of the component is completed, the configured style is synchronously updated to the corresponding layer in the canvas, and the person can configure a data source in the data configuration area, wherein the data source is the data source of the data visualization view to be completed; A data saving module, used to use the configuration information of each layer on the canvas and on the property panel as the configuration information of the data visualization view, and save the configuration information of the data visualization view to a database; The view preview module is used to provide a preview button. When the preview button is triggered, the configuration information of the data visualization view is loaded from the database so that the data visualization view is displayed on the browser page.

9. A computer-readable storage medium, characterized in that: A computer program is stored thereon, and when the computer program is executed in a computer, the computer is caused to execute the method according to any one of claims 1 to 7.

10. A computing device, characterized in that: The method comprises a memory and a processor, wherein the memory stores executable codes, and when the processor executes the executable codes, the method according to any one of claims 1 to 7 is implemented.

Images