CN111176634A - Method and device for configurable embeddable high-tube view - Google Patents
Method and device for configurable embeddable high-tube view Download PDFInfo
- Publication number
- CN111176634A CN111176634A CN202010050935.6A CN202010050935A CN111176634A CN 111176634 A CN111176634 A CN 111176634A CN 202010050935 A CN202010050935 A CN 202010050935A CN 111176634 A CN111176634 A CN 111176634A
- Authority
- CN
- China
- Prior art keywords
- echarts
- display control
- page
- display
- module
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 29
- 230000000007 visual effect Effects 0.000 claims abstract description 7
- 238000011161 development Methods 0.000 abstract description 5
- 230000009286 beneficial effect Effects 0.000 abstract 1
- 238000010586 diagram Methods 0.000 description 6
- 230000000694 effects Effects 0.000 description 2
- 230000007812 deficiency Effects 0.000 description 1
- 238000005538 encapsulation Methods 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a method and a device for configuring an embeddable high-pipe view, which comprises the following steps: s1, setting a data set configuration component of the echarts display control on a page, and preparing data of the echarts display control; s2, adjusting the attributes of the echarts display control on a page editing panel; s3, a new window is created on the page creation panel, the echarts display control is configured on the new window, and the view page is displayed. The invention has the beneficial effects that: 1. changing the original code writing mode of the three steps, only writing an sql query statement in the first step, and operating the subsequent steps in a page selection configuration mode; 2. the difficulty of understanding different block codes by developers is reduced, and the development efficiency is improved; 3. under the condition that the number of echarts display controls required by a high-pipe view is large, the method can be quickly realized in a configuration mode, and the repeated writing of similar codes is avoided; 4. and a more visual configuration mode is provided, and the user experience is improved.
Description
Technical Field
The invention relates to the technical field of view configuration display, in particular to a method and a device for configurable embeddable high-pipe views.
Background
The existing high-management view generally adopts codes written directly in an application system, firstly, a required data set is queried by writing an sql database query statement, then the data set is encapsulated into a data object set of java programming language, then the data object set is transmitted to a page, a Jsp page programming language transmits the data object set to an echarts display control on the page, and simultaneously, the attributes of the echarts display control such as component type, height, width, style, title and the like are adjusted, and finally, the echarts display control on the Jsp page is displayed by an operating system browser, but the method has the following problems: 1. the development difficulty is high, the query statement of the sql database is written, the java programming language is written, the data object set is packaged and processed, and the jsp page is edited and echarts display control attributes, each step involves a plurality of code writing works, the codes are required to be modified when adjustment is carried out each time, the risk of modification errors exists, and maintenance personnel are required to be familiar with the programming languages to modify the codes; 2. the repeatability is high, and for the condition that a plurality of echarts display controls exist on one page, developers need to repeat the development process for many times, and the efficiency is low.
Disclosure of Invention
It is an object of the present invention to overcome the above-mentioned deficiencies and to provide a method and apparatus for configurable embeddable high-tube views.
The technical scheme adopted by the invention for realizing the purpose is as follows: a method of configurable embeddable high pipe views, comprising the steps of:
s1, setting a data set configuration component of the echarts display control on a page, and preparing data of the echarts display control;
s2, adjusting the attributes of the echarts display control on a page editing panel;
s3, a new window is created on the page creation panel, the echarts display control is configured on the new window, and the view page is displayed.
Further, in S1: and editing sql query statements, query conditions, page display field descriptions and field display styles on the page through the data set configuration component.
Further, in S2: and adjusting basic properties, titles, visual areas, X axes, Y axes, legends, prompts and tools of the echarts display controls through the editing panel.
Further, in S2: the existing properties of the echarts presentation control are listed in each type of property of the edit panel.
Further, in S3: the new window is provided with a configuration button and the configured echarts presentation control of S2 is selected by clicking the configuration button.
Further, in S3: the new window properties may be set when the creation panel creates a new window.
Furthermore, the new window is a horizontal rectangular grid, and the height of the rectangular grid and the number of the rectangular grid cells are arranged on the creation panel.
The device comprises an echarts display control data preparation module, an echarts display control attribute adjustment module and an echarts display control display module which are arranged on a page, wherein the echarts display control data preparation module is used for preparing data of an echarts display control, the echarts display control attribute adjustment module is used for adjusting the attribute of the echarts display control presented by the echarts display control data preparation module, and the echarts display control display module is used for displaying the echarts display control configured by the echarts display control attribute adjustment module.
Further, the echarts display control data preparation module comprises an sql query statement editing module, a query condition editing module, and a page display field description and field display style editing module.
Compared with the prior art, the method and the device for configuring the embeddable high-pipe view have the advantages that at least the following effects are realized:
1. changing the original code writing mode of the three steps, only writing an sql query statement in the first step, and operating the subsequent steps in a page selection configuration mode;
2. the difficulty of understanding different block codes by developers is reduced, and the development efficiency is improved;
3. under the condition that the number of echarts display controls required by a high-pipe view is large, the method can be quickly realized in a configuration mode, and the repeated writing of similar codes is avoided;
4. and a more visual configuration mode is provided, and the user experience is improved.
Drawings
The accompanying drawings, which are included to provide a further understanding of the invention and are incorporated in and constitute a part of this specification, illustrate embodiments of the invention and together with the description serve to explain the invention and not to limit the invention.
FIG. 1 is a step diagram of a method of configuring an insertable tall tube view of the present invention.
FIG. 2 is a schematic view of an apparatus of the present invention configurable to provide a view of an insertable superior vessel.
Fig. 3 is a schematic diagram of an implementation of step S1 of a method of configuring an embeddable high pipe view of the present invention.
Fig. 4 is a schematic diagram of an implementation of step S2 of a method of configuring an embeddable high pipe view of the present invention.
Fig. 5 is a schematic diagram of an implementation of step S3 of a method of configuring an embeddable high pipe view of the present invention.
Fig. 6 is a schematic diagram of an implementation of step S3 of a method for configurable embeddable high-pipe views of the present invention to create new window properties.
Fig. 7 is a schematic diagram of an implementation of the new window of step S3 in the method for configuring an embeddable high pipe view according to the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention is further described in detail with reference to the following embodiments and accompanying fig. 1-7, but not limited thereto.
Referring to fig. 1, the present invention is a method of configuring an insertable tall tube view, comprising the steps of:
s1, setting a data set configuration component of an echarts display control on a page, preparing data of the echarts display control, editing sql query statements on the page through the data set configuration component, editing query conditions, and editing page display field description and field display styles;
s2, adjusting the attributes of the echarts display control on a page editing panel, adjusting the basic attributes, the title, the visual area, the X axis, the Y axis, the legend, the prompt and the tool of the echarts display control through the editing panel, and listing the existing attributes of the echarts display control in each type of attributes of the editing panel;
s3, a new window is created on the page creation panel, the attribute of the new window can be set when the new window is created on the page creation panel, the new window is a transverse rectangular grid, the height of the rectangular grid and the number of the rectangular grid grids are set on the creation panel, a configuration button is arranged on the new window, an echarts display control configured in S2 is selected by clicking the configuration button to display a view page, and through the method, new windows are continuously added, and the configuration is carried out step by step, so that a complete high-pipe view page can be displayed.
Referring to fig. 2, the invention relates to a device for a configurable embeddable high-pipe view, which comprises an echarts display control data preparation module, an echarts display control attribute adjustment module and an echarts display control display module, which are arranged on a page, wherein the echarts display control data preparation module is used for preparing data of an echarts display control, and comprises an sql query statement editing module, a query condition editing module, a page display field description and field display style editing module, the echarts display control attribute adjustment module is used for adjusting attributes of the echarts display control presented by the echarts display control data preparation module, and the echarts display control display module is used for displaying the echarts display control configured by the echarts display control attribute adjustment module.
Referring to fig. 3, when writing an sql database query statement and writing a java programming language encapsulation processing data object set, a data set configuration component of an echarts display control is set on a page, so that the sql query statement is edited on the page, a query condition is edited, and page display field description and data format type are edited.
Referring to fig. 4, in the step of editing echarts display control attributes on a jsp page, the attributes of the echarts display control, such as basic attributes, titles, visual areas, X-axes, Y-axes, legends, prompts, tools, and the like, are adjusted on a page editing panel, and existing attributes of the echarts display control are listed for each type of attributes, so that adjustment is facilitated, and all the attributes are edited more intuitively than those of the echarts display control which is directly encoded on the page.
Referring to fig. 5-7, after editing the attributes of the echarts display controls is completed, a page editing function is provided, a new window is created on the page creation panel, that is, a horizontal rectangular grid is newly added, the height of the rectangular grid is set, the grid is divided into a plurality of small grids, a configuration button is clicked on the newly added small grid, the echarts display controls configured in step S2 are selected, the square grids are continuously and newly increased through the above method, and the configuration is performed step by step, so that a complete high-pipe view page can be displayed.
Compared with the prior art, the method and the device for configuring the embeddable high-pipe view have the advantages that at least the following effects are realized:
1. changing the original code writing mode of the three steps, only writing an sql query statement in the first step, and operating the subsequent steps in a page selection configuration mode;
2. the difficulty of understanding different block codes by developers is reduced, and the development efficiency is improved;
3. under the condition that the number of echarts display controls required by a high-pipe view is large, the method can be quickly realized in a configuration mode, and the repeated writing of similar codes is avoided;
4. and a more visual configuration mode is provided, and the user experience is improved.
The above description is only for the preferred embodiment of the present invention, but the scope of the present invention is not limited thereto, and any person skilled in the art should be able to cover the technical solutions and the inventive concepts of the present invention within the technical scope of the present invention.
Claims (9)
1. A method of configurable embeddable high pipe views, comprising the steps of:
s1, setting a data set configuration component of the echarts display control on a page, and preparing data of the echarts display control;
s2, adjusting the attributes of the echarts display control on a page editing panel;
s3, a new window is created on the page creation panel, the echarts display control is configured on the new window, and the view page is displayed.
2. The method of claim 1, wherein in S1: and editing sql query statements, query conditions, page display field descriptions and field display styles on the page through the data set configuration component.
3. The method of claim 1, wherein in S2: and adjusting basic properties, titles, visual areas, X axes, Y axes, legends, prompts and tools of the echarts display controls through the editing panel.
4. The method of claim 1, wherein in S2: the existing properties of the echarts presentation control are listed in each type of property of the edit panel.
5. The method and apparatus of claim 1, wherein in S3: the new window is provided with a configuration button and the configured echarts presentation control of S2 is selected by clicking the configuration button.
6. The method of claim 1, wherein in S3: the new window properties may be set when the creation panel creates a new window.
7. The method of claim 6, wherein the new window is a transverse rectangular grid, and the height of the rectangular grid and the number of rectangular grid cells are provided in the creation panel.
8. The device is characterized by comprising an echarts display control data preparation module, an echarts display control attribute adjustment module and an echarts display control display module which are arranged on a page, wherein the echarts display control data preparation module is used for preparing data of an echarts display control, the echarts display control attribute adjustment module is used for adjusting the attribute of the echarts display control displayed by the echarts display control data preparation module, and the echarts display control display module is used for displaying the echarts display control configured by the echarts display control attribute adjustment module.
9. The apparatus of claim 8, wherein the echarts presentation control data preparation module comprises an sql query statement editing module, a query condition editing module, a page presentation field description and field presentation style editing module.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010050935.6A CN111176634A (en) | 2020-01-17 | 2020-01-17 | Method and device for configurable embeddable high-tube view |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010050935.6A CN111176634A (en) | 2020-01-17 | 2020-01-17 | Method and device for configurable embeddable high-tube view |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111176634A true CN111176634A (en) | 2020-05-19 |
Family
ID=70649466
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010050935.6A Pending CN111176634A (en) | 2020-01-17 | 2020-01-17 | Method and device for configurable embeddable high-tube view |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111176634A (en) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105843945A (en) * | 2016-04-08 | 2016-08-10 | 联动优势科技有限公司 | Report generation method and system |
| CN106843844A (en) * | 2016-12-26 | 2017-06-13 | 南威软件股份有限公司 | A kind of exhibiting device of self-defined view |
| CN108804513A (en) * | 2018-04-24 | 2018-11-13 | 华东计算技术研究所（中国电子科技集团公司第三十二研究所） | Automatic visual analysis method for big data platform |
| CN109872265A (en) * | 2019-02-28 | 2019-06-11 | 山东浪潮云信息技术有限公司 | A kind of visual government affairs service data analysis method |
| WO2019109485A1 (en) * | 2017-12-08 | 2019-06-13 | 平安科技（深圳）有限公司 | Echarts tool-based chart making method, apparatus and device, and medium |
| CN110286905A (en) * | 2019-06-21 | 2019-09-27 | 北京计算机技术及应用研究所 | A kind of method for exhibiting data based on Echarts |
-
2020
- 2020-01-17 CN CN202010050935.6A patent/CN111176634A/en active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105843945A (en) * | 2016-04-08 | 2016-08-10 | 联动优势科技有限公司 | Report generation method and system |
| CN106843844A (en) * | 2016-12-26 | 2017-06-13 | 南威软件股份有限公司 | A kind of exhibiting device of self-defined view |
| WO2019109485A1 (en) * | 2017-12-08 | 2019-06-13 | 平安科技（深圳）有限公司 | Echarts tool-based chart making method, apparatus and device, and medium |
| CN108804513A (en) * | 2018-04-24 | 2018-11-13 | 华东计算技术研究所（中国电子科技集团公司第三十二研究所） | Automatic visual analysis method for big data platform |
| CN109872265A (en) * | 2019-02-28 | 2019-06-11 | 山东浪潮云信息技术有限公司 | A kind of visual government affairs service data analysis method |
| CN110286905A (en) * | 2019-06-21 | 2019-09-27 | 北京计算机技术及应用研究所 | A kind of method for exhibiting data based on Echarts |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107192393B (en) | A kind of maintenance system and method for road-map-data | |
| CA2625653C (en) | Computer method and apparatus for creating visible graphics by using a graph algebra | |
| US20070005582A1 (en) | Building of database queries from graphical operations | |
| CN111062196A (en) | Batch process flow card generation method based on CAD and Excel | |
| CN110825371B (en) | Method for creating, rendering and interacting button group control based on React | |
| CN109739909A (en) | A kind of methods of exhibiting and system fast implementing data visualization chart based on label | |
| CN106162302B (en) | Layout method and device for Launcher main interface and smart television | |
| CN111158670A (en) | Visual auxiliary software development method and system | |
| CN111176634A (en) | Method and device for configurable embeddable high-tube view | |
| CN113407171A (en) | Power grid dispatching control system graph editing and displaying method | |
| CN114398071A (en) | Control logic configuration implementation method and system of control system | |
| CN107977419B (en) | Nuclear power station DCS operation and maintenance support file identification method and system | |
| CN109948133B (en) | Data form realization method based on Layu | |
| CN116958293A (en) | Flow chart drawing system for planning optimization software | |
| CN107544727A (en) | Cursor positioning method and system, readable storage medium and computer equipment | |
| CN109815977B (en) | Cutting and marking integrated method for mass production of machine learning samples | |
| CN112131759B (en) | Comprehensive environment simulation multi-parameter working condition input system and working condition creation method | |
| CN103809973A (en) | Graphic control interface design system and graphic control interface design operation method thereof | |
| CN110912750B (en) | WEB-based data acquisition management method and device | |
| CN114625740A (en) | Form list custom configuration and grouping display method | |
| CN114385133A (en) | Configuration program and data interactive mapping method of heterogeneous platform of programmable controller | |
| CN107978007B (en) | Method for automatically generating interval diagram in regulation and control integrated system without maintenance | |
| CN112487224B (en) | Point cloud data batch analysis processing method and processing system | |
| CN109814790A (en) | A kind of method of the page scroll interaction of prototype tool | |
| CN114064019A (en) | Grid structured ICD information visual editing method and system |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20200519 |
|
| RJ01 | Rejection of invention patent application after publication |