CN110990431A - Method for realizing synchronous linkage carousel of China map and line graph data - Google Patents
Method for realizing synchronous linkage carousel of China map and line graph data Download PDFInfo
- Publication number
- CN110990431A CN110990431A CN201910765824.0A CN201910765824A CN110990431A CN 110990431 A CN110990431 A CN 110990431A CN 201910765824 A CN201910765824 A CN 201910765824A CN 110990431 A CN110990431 A CN 110990431A
- Authority
- CN
- China
- Prior art keywords
- map
- data
- line graph
- attribute
- line
- 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
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/24—Querying
- G06F16/245—Query processing
- G06F16/2455—Query execution
- G06F16/24564—Applying rules; Deductive queries
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/24—Querying
- G06F16/248—Presentation of query results
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/29—Geographical information databases
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Computational Linguistics (AREA)
- Remote Sensing (AREA)
- Instructional Devices (AREA)
Abstract
The invention discloses a method for realizing synchronous linkage carousel of China map and line graph data, which comprises the following steps: constructing a Chinese map and a line graph configuration, and carrying out initialization processing; processing basic data returned by the background, and assembling to generate a Chinese map and a line graph parameter; carrying out graphic drawing according to the parameters to obtain a Chinese map and a line graph; defining the index of the current threat asset variable as 0, setting the same timer, taking out the longitude and latitude of the threat asset area and drawing the longitude and latitude on a Chinese map at intervals of time period and the current index + 1; and dynamically calling an autoshwtip self-defined function for the line graph in the same timer, calculating dataIndex according to the defined current index and the total number of threat assets, calling a dispatchAction example method, triggering graph behaviors, dynamically displaying prompt information, and realizing synchronous carousel display with the Chinese map.
Description
Technical Field
The invention relates to the technical field of computers, in particular to a method for realizing synchronous linkage carousel of Chinese map and fold line map data based on Echarts.
Background
Developers typically plot data about software products into graphs. The visual display of the data is greatly helpful to the development work. In the context of graphical rendering, developers typically implement using image tool software, such as the open source software Echarts (Enterprise Charts, Business products Chart library). The intelligent data visualization chart is a chart library based on HTML5 Canvas and pure JavaScript, is not dependent on any third-party plug-in, is developed by a hundred-degree front-end data visualization team based on Zrender, provides a data visualization chart which is intuitive, vivid, interactive and individually customizable, and creates basic components such as a coordinate system, a legend, a prompt, a tool box and the like. On the basis, various types of statistical charts such as a line chart, a bar chart, a scatter chart, a K-line chart, a pie chart, a map and the like are expanded.
In the aspect of selection of distribution of threat data of each area, a Chinese map and a broken line graph are one of the prior considerations of developers in product development, and the attacked threat assets and the dynamic broken line trend graph of each area of the Chinese map are displayed in a combined manner, so that the threat data is displayed more intuitively in the aspects of analysis, monitoring and the like, and the requirements of users can be met better. However, Echarts only supports two different legends of a Chinese map and a line graph, does not combine and show the two legends together, does not bind the data of the Chinese map and the data of the line graph together, and uses a timer to realize the effect of synchronous linkage carousel, thereby showing the synchronous change of the data. The synchronous linkage carousel means that after the data of the Chinese map and the line graph are obtained, the data are processed through a function, and after a specific time period t (usually 1s), the data of corresponding time are bound on the Chinese map and the line graph, so that real-time data monitoring and analysis are performed. Therefore, how to realize the synchronous linkage carousel of the Chinese map and the line graph data by utilizing Echarts is a problem to be solved.
Disclosure of Invention
In order to solve the technical problems, the invention provides a method for realizing synchronous linkage carousel of China map and line graph data, which enables threat data to be displayed more intuitively in the aspects of analysis, monitoring and the like, can meet the requirements of users better and improves the user experience.
In order to achieve the technical effects, the invention provides the following technical scheme:
a method for realizing synchronous linkage carousel of China map and line graph data comprises the following steps:
(1) constructing a Chinese map and a line graph configuration, and carrying out initialization processing on the Chinese map and the line graph configuration;
(2) processing basic data returned by the background, and assembling to generate a Chinese map and a line graph parameter;
(3) carrying out graphic drawing according to the parameters of the Chinese map and the parameters of the broken line graph, respectively assigning values to the configuration again, and then transmitting the configuration as parameters through a setOption method to obtain the Chinese map and the broken line graph;
(4) calling a callback function format in a prompt box component to format the data so that the processed data is displayed in the data prompt box in a preset field;
(5) defining the index of the current threat asset variable as 0, setting the same timer, taking the longitude and latitude of the threat asset area out and drawing the longitude and latitude on a Chinese map at intervals of a time period t(s) and the current index + 1;
(6) and dynamically calling an autoshwtip self-defined function for the line graph in the same timer, wherein the function calculates dataIndex according to the defined current index and the total number of threat assets, and calls a dispatchAction example method to trigger diagram behavior, dynamically display prompt information and realize synchronous carousel display with the Chinese map.
The further technical scheme is that the configuration in the step (1) comprises a title component title, a Legend legend component, an x axis and a y axis in a rectangular coordinate system grid, a prompt box component tooltip and series lists series, wherein each series determines the type of an icon thereof through a type, and a geographic coordinate system component geo defines the configuration into data for initialization processing.
Specifically, the configuration items in the step (1) comprise
Title: a title component comprising a main title and an additional title; legend: a legend component; xAxis: the x-axis in the rectangular coordinate system grid; yAxis: a y-axis in a rectangular coordinate system grid; and (2) Series: a sequence list, wherein names are defined through names, and types are defined through types; LineStyle: line style; normal: the color of the line; AreaStyle: a region filling pattern; normal: the color of the region; tack: stacking data; symbol: the type of marking at both ends of the line; ShowSymbol: whether symbol is displayed.
The further technical scheme is that the basic data returned by the background in the step (2) comprise map longitude latitude, threat city and quantity.
The further technical scheme is that the Chinese map and the line graph parameters generated by the assembling in the step (2) are data in json format, and the parameters are one or more of title component attributes, legend component attributes, x-axis attributes in a rectangular coordinate system, y-axis attributes in the rectangular coordinate system, sequence name attributes, sequence type attributes, line pattern attributes, line color attributes, region filling pattern attributes, region color attributes, mark type attributes at two ends of a line, and display pattern attributes of marks at two ends of the line.
Wherein these parameters need to satisfy the following conditions:
there are at least two key-value pairs and the value of each key-value pair is an array.
Each item in the first array is a character string, and no character string is formed by space splicing of other character strings.
Each entry in the remaining array is a number in the form of a string.
First, background data is asynchronously acquired through Ajax, which is a web development technology for asynchronously requesting data and is helpful for improving user experience and page performance. In short, Ajax loads the background data through an asynchronous request and renders it on the web page without the need to refresh the page again. When data needs to be exchanged asynchronously with the server, an XMLHttpRequest object is needed for asynchronous exchange. The main attributes of the XMLHttpRequest object are:
onreadystatechange-event handler for events triggered by each state change.
responseText — a string form of data returned from a server process.
ResponseXML-the DOM compatible document data object returned from the server process.
status-digital codes returned from the server, such as 404 (not found) and 200 (ready).
status Text — string information accompanying a status code.
readyState — object state value. The object state values are the following:
0- (uninitialized) has not called send () method yet
1- (load) has called send () method, is sending a request
2- (load complete) send () method execution complete
3- (Interactive) parsing responsive content
4- (completion) in response to the completion of the content parsing, a call can be made at the client
For the state value of readyState, where the "0" state is the state value that we have automatically after definition, we mostly adopt "4" for the successfully accessed state (get information) to judge. The core of Ajax is a JavaScript object XmlHttpRequest, which provides a smooth interface for sending requests to the server and parsing server responses. The XmlHttpRequest can make requests to the server using JavaScript and process the responses without blocking the user.
JavaScript is a script, a programming language, which can implement complex functions on a web page, and the web page display is no longer simple static information, but real-time content update, interactive maps, 2D/3D animation, scrolling played video, and so on.
JavaScript parsing is a segment-by-segment parsing, not a line-by-line parsing. The function defined by the function statement and the function immediate in the same paragraph is compiled and executed preferentially (the execution is not a calling function), and then other functions are executed.
The method can realize data operation, which is commonly operated by logarithm group, json object, character string, Boolean value, Number and the like. Taking the object array as an example:
an object is actually a way to aggregate many values together, and can be viewed as a mapping of property names to values. The array can be viewed as an ordered set of values, with the position of the elements being the index with which the corresponding value can be found.
The preprocessing of the data includes: 1) special character processing and html escape character processing, time format and unit conversion 2) performing one cycle on background data acquired through ajax, and putting the data of the cycle into an array every cycle 3) performing attribute alignment: aiming at the problem that different data source data are inconsistent in unit, format and precision representation, various regular expressions are defined to match, extract and convert the data so as to unify the description of the regular expressions. 4) A timer is set, which is used to provide that the background data is pulled once per compartment period t(s).
The parameter configurations generated by the processing are data in json format, and the parameters comprise one or more of the following: title component attribute, legend component attribute, x-axis attribute in rectangular coordinate system, y-axis attribute in rectangular coordinate system, sequence name attribute, sequence type attribute, line style attribute, line color attribute, region filling style attribute, region color attribute, data stacking attribute, mark type attribute at two ends of line, display style attribute of mark at two ends of line.
Compared with the prior art, the invention has the following beneficial effects: the method enables threat data to be displayed more visually in the aspects of analysis, monitoring and the like, can meet the requirements of users better, and improves user experience.
Drawings
FIG. 1 is a schematic flow diagram of the present invention;
fig. 2 shows the number of threat assets of each city of the chinese map and trend chart carousel display prompt box data according to an embodiment of the present invention.
Detailed Description
Exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be embodied in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.
Example 1
Fig. 1 is a schematic flow chart of a method for implementing data synchronous linkage carousel of a chinese map and a polyline map based on Echarts according to an embodiment of the present invention, as shown in fig. 1, the method includes:
1. the method comprises the steps of constructing Chinese map and line graph configurations, wherein the configuration option comprises a title component title, a Legend legend component, an x axis and a y axis in a rectangular coordinate system grid, a prompt box component tooltip and series lists series, determining the type of an icon of each series through a type, a geographic coordinate system component geo and the like, and defining the configurations into data for initialization processing.
2. The same basic source data returned by the background is processed in the same method, javascript is used for operating the array and for loop-back, the chinaDataArr, the abscissa and the ordinate empty arrays are defined at the same time, the longitude and latitude push of the map is put into the chinaDataArr array through the for loop-back, and the province data and the threat quantity data are respectively put into the abscissa array and the ordinate array in the same for loop-back.
3. And respectively assigning the parameters of the Chinese map and the parameters of the line graph to the option configuration again, and then transmitting the option configuration as parameters through a setOption method to obtain the Chinese map and the line graph.
Generally, data is required to be visualized and processed, the method is often applied to Echarts, an open source visualization library realized by JavaScript can be smoothly operated on a PC and a mobile device, is compatible with most current browsers (IE8/9/10/11, Chrome, Firefox, Safari and the like), and provides an intuitive, interactive and highly personalized and customized data visualization chart with the bottom layer depending on a lightweight vector graphics library ZRender. Before drawing, I need to prepare a DOM container with a height and a width for ECharts, and then initialize an ECharts instance by an ECharts. init method and generate charts with types of map and line respectively by a setOption method. As shown in fig. 2, city threat asset data of each map of china comes from processing of map basic data, line graph data is generated by reassembling and initializing the basic data, array operation and for loop destruction are performed by using javascript, chinataar, abscissa and ordinate space arrays are defined at the same time, longitude and latitude of the map are pug into the chinataar array through for loop, and province and threat quantity data are respectively put into the abscissa array and the ordinate array in the same for loop.
4. And calling a callback function format in the prompt box component to format the basic data so that the processed basic data is displayed in a data prompt box according to preset field information. The format callback function receives a parameter which is data information to be displayed, corresponding data is taken out, and the carousel data can be displayed in the prompt box.
5. Defining the index of the current threat asset variable as 0, setting a timer, taking the longitude and latitude of the threat asset area out and drawing the longitude and latitude on a Chinese map at intervals of a time period t(s) and the current index + 1. As can be seen from fig. 2, each point on the map is dynamically drawn on the map of china every 1s, which requires setting an initial variable with index of 0, adding 1 every 1s by a timer, taking out the longitude and latitude of the corresponding city, storing the threat data in an array, and then placing the array in series in the option.
6. And dynamically calling an autoshwtip self-defined function for the line graph in the same timer, wherein the function calculates dataIndex according to the defined current index and the total number of threat assets, and calls a dispatchAction embodiment method to trigger graph behavior, dynamically display prompt information and realize synchronous carousel display with the Chinese map. The method is mainly to operate in the same timer, and if two timers are separated, although the period t(s) is set at the same time, the problem of asynchronous data carousel exists due to different JavaScript execution sequences.
Claims (4)
1. A method for realizing synchronous linkage carousel of China map and line graph data is characterized by comprising the following steps:
(1) constructing a Chinese map and a line graph configuration, and carrying out initialization processing on the Chinese map and the line graph configuration;
(2) processing basic data returned by the background, and assembling to generate a Chinese map and a line graph parameter;
(3) carrying out graphic drawing according to the parameters of the Chinese map and the parameters of the line graph, respectively assigning values to the configuration again, and then transmitting the configuration as parameters through a setOption method to obtain the Chinese map and the line graph;
(4) calling a callback function format in a prompt box component to format the data so that the processed data is displayed in the data prompt box in a preset field;
(5) defining the index of the current threat asset variable as 0, setting the same timer, taking the longitude and latitude of the threat asset area out and drawing the longitude and latitude on a Chinese map at intervals of a time period t(s) and the current index + 1;
(6) and dynamically calling an autoshwtip self-defined function for the line graph in the same timer, wherein the function calculates dataIndex according to the defined current index and the total number of threat assets, and calls a Dispatch action example method to trigger graph behavior, dynamically display prompt information and realize synchronous carousel display with the Chinese map.
2. The method for realizing the synchronized linkage carousel of the china map and the line graph data according to claim 1, wherein the configuration in the step (1) includes a title component title, a Legend legend component, an x-axis and a y-axis in a rectangular coordinate system grid, a prompt box component tooltip, and series lists series, each series determines its own icon type through type, and a geographic coordinate system component geo, and the configurations are defined into the data for initialization processing.
3. The method for realizing the synchronized linkage carousel of the china map and the line drawing data according to claim 1, wherein the basic data returned by the background in the step (2) comprises map longitude and latitude, threat city and quantity.
4. The method according to claim 1, wherein the chinese map and the line graph data generated by the assembling in the step (2) are data in json format, and the parameters are one or more of title component attribute, legend component attribute, x-axis attribute in rectangular coordinate system, y-axis attribute in rectangular coordinate system, sequence name attribute, sequence type attribute, line style attribute, line color attribute, region filling style attribute, region color attribute, mark type attribute at two ends of a line, and display style attribute of marks at two ends of a line.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910765824.0A CN110990431A (en) | 2019-08-19 | 2019-08-19 | Method for realizing synchronous linkage carousel of China map and line graph data |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910765824.0A CN110990431A (en) | 2019-08-19 | 2019-08-19 | Method for realizing synchronous linkage carousel of China map and line graph data |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110990431A true CN110990431A (en) | 2020-04-10 |
Family
ID=70081649
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910765824.0A Pending CN110990431A (en) | 2019-08-19 | 2019-08-19 | Method for realizing synchronous linkage carousel of China map and line graph data |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110990431A (en) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112650897A (en) * | 2020-12-23 | 2021-04-13 | 广西交控智维科技发展有限公司 | Information monitoring system and display method based on track asset system |
| CN113742365A (en) * | 2021-09-14 | 2021-12-03 | 盐城工业职业技术学院 | Vehicle utilization data visual dynamic monitoring system and method |
| CN114610802A (en) * | 2022-03-18 | 2022-06-10 | 平安国际智慧城市科技股份有限公司 | Word carousel method, device, equipment and storage medium |
| CN114679613A (en) * | 2022-05-30 | 2022-06-28 | 南斗六星系统集成有限公司 | Intelligent internet vehicle historical data circulating playing method |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6125367A (en) * | 1996-10-23 | 2000-09-26 | Samsung Electronics Co., Ltd. | Map data base management method and system therefor |
| CN109410698A (en) * | 2018-09-19 | 2019-03-01 | 浙江省测绘科学技术研究院 | Data large-size screen monitors method for visualizing and system |
| CN109840929A (en) * | 2017-11-24 | 2019-06-04 | 北京神州泰岳软件股份有限公司 | A kind of method and apparatus for realizing that Dynamic Baseline figure is drawn based on Echarts |
-
2019
- 2019-08-19 CN CN201910765824.0A patent/CN110990431A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6125367A (en) * | 1996-10-23 | 2000-09-26 | Samsung Electronics Co., Ltd. | Map data base management method and system therefor |
| CN109840929A (en) * | 2017-11-24 | 2019-06-04 | 北京神州泰岳软件股份有限公司 | A kind of method and apparatus for realizing that Dynamic Baseline figure is drawn based on Echarts |
| CN109410698A (en) * | 2018-09-19 | 2019-03-01 | 浙江省测绘科学技术研究院 | Data large-size screen monitors method for visualizing and system |
Non-Patent Citations (1)
| Title |
|---|
| 郑州-在路上: "echarts地图定时切换散点及多图表级联联动", 《HTTPS://WWW.CNBLOGS.COM/OORZ/P/9431884.HTML》 * |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112650897A (en) * | 2020-12-23 | 2021-04-13 | 广西交控智维科技发展有限公司 | Information monitoring system and display method based on track asset system |
| CN113742365A (en) * | 2021-09-14 | 2021-12-03 | 盐城工业职业技术学院 | Vehicle utilization data visual dynamic monitoring system and method |
| CN114610802A (en) * | 2022-03-18 | 2022-06-10 | 平安国际智慧城市科技股份有限公司 | Word carousel method, device, equipment and storage medium |
| CN114679613A (en) * | 2022-05-30 | 2022-06-28 | 南斗六星系统集成有限公司 | Intelligent internet vehicle historical data circulating playing method |
| CN114679613B (en) * | 2022-05-30 | 2022-09-20 | 南斗六星系统集成有限公司 | Intelligent internet vehicle historical data circulating playing method |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| TWI808393B (en) | Page processing method, device, apparatus and storage medium | |
| CN110990431A (en) | Method for realizing synchronous linkage carousel of China map and line graph data | |
| US9792354B2 (en) | Context aware user interface parts | |
| US9720658B2 (en) | Application creation method and apparatus | |
| CA2773152C (en) | A method for users to create and edit web page layouts | |
| US8194075B2 (en) | Method and system for generating and displaying an interactive dynamic list view of multiply connected objects | |
| US8711147B2 (en) | Method and system for generating and displaying an interactive dynamic graph view of multiply connected objects | |
| KR101494844B1 (en) | System for Transforming Chart Using Metadata and Method thereof | |
| CN108280026A (en) | Automated testing method and device, storage medium, electronic equipment | |
| US11481948B2 (en) | Method, device and storage medium for generating animation group by synthesizing animation layers based on tree structure relation between behavior information and sub-behavior information | |
| CN107273007B (en) | System and non-transitory computer readable medium for scaling a visualization image | |
| CN102907069A (en) | Method and system for executing a graphics application | |
| CN114357345A (en) | Picture processing method and device, electronic equipment and computer readable storage medium | |
| US20240160410A1 (en) | Application Development Platform, Micro-program Generation Method, and Device and Storage Medium | |
| US10289388B2 (en) | Process visualization toolkit | |
| CN111142984A (en) | Visualized data display method, system, equipment and computer readable storage medium | |
| EP1691278B1 (en) | Method and computer system for editing documents | |
| CN110764762A (en) | Page forming method and device, computer readable storage medium and terminal | |
| CN113064535B (en) | Vernier display method and device for two-dimensional chart, electronic equipment and storage medium | |
| Conversy et al. | Improving modularity of interactive software with the MDPC architecture | |
| JP5817957B2 (en) | Information processing apparatus, information processing method, and program | |
| CN116974670B (en) | Graphical control management method and system based on single chip microcomputer | |
| EP3015977A1 (en) | Rendering a user interface | |
| CN115480672A (en) | High customizable star rating method and device based on Vue + SVG | |
| CN118153533A (en) | Table data processing method and apparatus |
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: 20200410 |
|
| RJ01 | Rejection of invention patent application after publication |