CN106708896A - ECharts map displaying method and device - Google Patents
ECharts map displaying method and device Download PDFInfo
- Publication number
- CN106708896A CN106708896A CN201510791847.0A CN201510791847A CN106708896A CN 106708896 A CN106708896 A CN 106708896A CN 201510791847 A CN201510791847 A CN 201510791847A CN 106708896 A CN106708896 A CN 106708896A
- Authority
- CN
- China
- Prior art keywords
- echarts
- maps
- value
- coordinate value
- geographic position
- 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
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/29—Geographical information databases
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Remote Sensing (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
Abstract
The invention discloses an ECharts map displaying method and device. The method comprises the steps that a mouse operation event is detected on an Echarts map; if the mouse operation event is detected on the Echarts map, the initial coordinate value and end coordinate value of the mouse operation event on a page are determined; the target range is determined according to the initial coordinate value and the end coordinate value, wherein the target range is the corresponding range determined on canvas where the Echarts map is located according to the initial coordinate value and end coordinate value; a geographic position name corresponding to the target range on the Echarts map is determined, and target data corresponding to the geographic position name is displayed. Accordingly, the problem that in related technologies, due to the fact that related data of multiple selected areas cannot be viewed in the Echarts map, the user experience is low is solved.
Description
Technical field
The application is related to map field, in particular to the display methods and device of a kind of ECharts maps.
Background technology
Business level data drawing list (Enterprise Charts, abbreviation ECharts) is a based on HTML5Canvas
Enterprise-level chart storehouse, the map components provided convenience in Echarts charts, the map components can according to country,
Display data is carried out in province, districts and cities region, and the map provided based on Echarts is referred to as into Echarts maps.In reality
In system, it is frequently used Echarts maps and shows business datum from the dimension in geographical position.National maps are used on the page
Show map according to province, user can one by one obtain the correlation of each geographical position administrative region from Echarts maps
Data, however, user but cannot simultaneously check the related data including multiple geographical position administrative regions, i.e., in Echarts
The related data in selected multiple regions cannot be checked in map, causes user experience relatively low.
For, due to the related data in selected multiple regions cannot be checked in Echarts maps, causing in correlation technique
The relatively low problem of user experience, not yet proposes effective solution at present.
The content of the invention
The main purpose of the application is the display methods and device for providing a kind of ECharts maps, to solve related skill
Due to the related data in selected multiple regions cannot be checked in ECharts maps in art, cause user experience compared with
Low problem.
To achieve these goals, according to the one side of the application, there is provided a kind of display side of ECharts maps
Method.The method includes：Mouse action event is detected on Echarts maps；If detected on Echarts maps
Mouse action event, determines origin coordinates value of the mouse action event on the page and terminates coordinate value；Sat according to starting
Scale value and termination coordinate value determine target zone, wherein, target zone is to be existed according to origin coordinates value and termination coordinate value
The corresponding scope determined on canvas painting canvas residing for Echarts maps；And determine target zone in Echarts maps
Upper corresponding geographic position name, and show the corresponding target data of geographic position name.
Further, determine that target zone includes according to origin coordinates value and termination coordinate value：Obtain Echarts maps institute
Elements of a fix value of the canvas painting canvas at place on the page；First object is calculated according to origin coordinates value and elements of a fix value
Coordinate value, wherein, first object coordinate value is that origin coordinates value is right on the canvas painting canvas residing for Echarts maps
The coordinate value answered；Second coordinates of targets value is calculated according to termination coordinate value and elements of a fix value, wherein, the second target is sat
Scale value is to terminate coordinate value corresponding coordinate value on the canvas painting canvas residing for Echarts maps；And according to first
Coordinates of targets value and the second coordinates of targets value determine target zone.
Further, before detecting mouse action event on Echarts maps, the method also includes：Determine Echarts
All of geographic position name on map；Obtain each geographic position name on Echarts maps respectively using preset interface
The corresponding coordinate value on the canvas painting canvas residing for Echarts maps；And by all of geography on Echarts maps
Each geographic position name correspondence on the canvas painting canvas residing for Echarts maps in location name and Echarts maps
Coordinate value store to presetting database.
Further, it is determined that target zone corresponding geographic position name on Echarts maps includes：In preset data
The coordinate value in target zone is searched in storehouse；And obtain the coordinate value for finding corresponding geography in presetting database
Location name.
Further, the corresponding target data of displaying geographic position name includes：Corresponding with geographic position name many
Determine target data in kind data；Object listing is created, wherein, object listing includes geographic position name and geography
The corresponding target data of location name；And display target list.
To achieve these goals, according to the another aspect of the application, there is provided a kind of display dress of ECharts maps
Put.The device includes：Detection unit, for detecting mouse action event on Echarts maps；First determining unit,
In the case of detecting mouse action event on Echarts maps, mouse action event rising on the page is determined
Beginning coordinate value and termination coordinate value；Second determining unit, for determining target according to origin coordinates value and termination coordinate value
Scope, wherein, target zone is the canvas according to residing for origin coordinates value and termination coordinate value in Echarts maps
The corresponding scope determined on painting canvas；And the 3rd determining unit, for determining target zone correspondence on Echarts maps
Geographic position name, and show the corresponding target data of geographic position name.
Further, the second determining unit includes：First acquisition module, for obtaining the canvas residing for Echarts maps
Elements of a fix value of the painting canvas on the page；First computing module, for being calculated according to origin coordinates value and elements of a fix value
First object coordinate value, wherein, first object coordinate value is origin coordinates value in the canvas residing for Echarts maps
Corresponding coordinate value on painting canvas；Second computing module, for calculating the second mesh according to termination coordinate value and elements of a fix value
Mark coordinate value, wherein, the second coordinates of targets value is to terminate coordinate value on the canvas painting canvas residing for Echarts maps
Corresponding coordinate value；And first determining module, for being determined according to first object coordinate value and the second coordinates of targets value
Target zone.
Further, the device also includes：4th determining unit, for determining all of geographical position on Echarts maps
Put title；Acquiring unit, is existed for being obtained each geographic position name on Echarts maps respectively using preset interface
Corresponding coordinate value on canvas painting canvas residing for Echarts maps；And memory cell, for by Echarts maps
Each geographic position name is residing for Echarts maps on upper all of geographic position name and Echarts maps
Corresponding coordinate value is stored to presetting database on canvas painting canvas.
Further, the 3rd determining unit includes：Searching modul, for being searched in target zone in presetting database
Coordinate value；And second acquisition module, for obtaining the coordinate value for finding corresponding geography in presetting database
Location name.
Further, the 3rd determining unit includes：Second determining module, for corresponding with geographic position name many
Determine target data in kind data；Creation module, for creating object listing, wherein, object listing includes geography
Location name and the corresponding target data of geographic position name；And display module, for display target list.
By the application, using following steps：Mouse action event is detected on Echarts maps；If in Echarts
Mouse action event is detected on map, origin coordinates value of the mouse action event on the page is determined and is terminated coordinate value；
Target zone is determined according to origin coordinates value and termination coordinate value, wherein, target zone is according to origin coordinates value and end
The corresponding scope that only coordinate value determines on the canvas painting canvas residing for Echarts maps；And determine that target zone exists
Corresponding geographic position name on Echarts maps, and show the corresponding target data of geographic position name, solve phase
Due to the related data in selected multiple regions cannot be checked in ECharts maps in the technology of pass, cause Consumer's Experience
The relatively low problem of degree.By calculating the coordinate range of target zone (selection area scope) on Echarts maps, obtain
The geographic position name included in selection area is taken, so as to show the corresponding target data of geographic position name, is realized
The related data in selected multiple regions can be checked in ECharts maps, and then has reached lifting user experience
Effect.
Brief description of the drawings
The accompanying drawing for constituting the part of the application is used for providing further understanding of the present application, the schematic reality of the application
Apply example and its illustrate for explaining the application, do not constitute the improper restriction to the application.In the accompanying drawings：
Fig. 1 is the flow chart of the display methods of the ECharts maps according to the embodiment of the present application；And
Fig. 2 is the schematic diagram of the display device of the ECharts maps according to the embodiment of the present application.
Specific embodiment
It should be noted that in the case where not conflicting, the feature in embodiment and embodiment in the application can phase
Mutually combination.Describe the application in detail below with reference to the accompanying drawings and in conjunction with the embodiments.
In order that those skilled in the art more fully understand application scheme, below in conjunction with the embodiment of the present application
Accompanying drawing, is clearly and completely described to the technical scheme in the embodiment of the present application, it is clear that described embodiment
The only embodiment of the application part, rather than whole embodiments.Based on the embodiment in the application, ability
The every other embodiment that domain those of ordinary skill is obtained under the premise of creative work is not made, should all belong to
The scope of the application protection.
It should be noted that term " first ", " in the description and claims of this application and above-mentioned accompanying drawing
Two " it is etc. for distinguishing similar object, without for describing specific order or precedence.It should be appreciated that this
The data that sample is used can be exchanged in the appropriate case, so as to embodiments herein described herein.Additionally, term
" comprising " and " having " and their any deformation, it is intended that covering is non-exclusive to be included, for example, comprising
The process of series of steps or unit, method, system, product or equipment are not necessarily limited to those steps clearly listed
Rapid or unit, but may include not listing clearly or intrinsic for these processes, method, product or equipment
Other steps or unit.
According to embodiments herein, there is provided a kind of display methods of ECharts maps.
Fig. 1 is the flow chart of the display methods of the ECharts maps according to the embodiment of the present application.As shown in figure 1, should
Method is comprised the following steps：
Step S101, detects mouse action event on Echarts maps.
The map components provided convenience in Echarts charts, the map components can provide according to country, province,
Districts and cities carry out in region display data, and the map provided based on Echarts is referred to as into Echarts maps in this application.This
The browser page that the page referred in application each means.
Before detecting mouse action event on Echarts maps, Echarts maps are initialized in the page.To at this
In application Echarts maps initialize is the process that Echarts maps are drawn out on browser page,
In order to subsequently obtain the coordinate corresponding with its of the geographic position name on Echarts maps, it is therefore desirable to right on the page
Echarts maps are initialized.
Alternatively, in the display methods of the Echarts maps that the embodiment of the present application is provided, examined on Echarts maps
Before surveying mouse action event, the method also includes：Determine all of geographic position name on Echarts maps；Utilize
Preset interface obtains on Echarts maps each geographic position name in the canvas painting canvas residing for Echarts maps respectively
Upper corresponding coordinate value；And by all of geographic position name on Echarts maps and Echarts maps each ground
Reason location name corresponding coordinate value on the canvas painting canvas residing for Echarts maps is stored to presetting database.
For example, on Echarts maps including Beijing, Tianjin, Tangshan, Baoding etc. geographic position name, according to actual
Geographic position name obtains the city and has been drawn on map actually from the interface getPosByGeoName of Echarts
Actual coordinate, that is, get actual coordinate of the Beijing on canvas painting canvas for (116.46,39.92), Tianjin exists
Actual coordinate on canvas painting canvas is (117.2,39.13), and actual coordinate of the Tangshan on canvas painting canvas is
(118.02,39.63), actual coordinate of the Baoding on canvas painting canvas is (115.48,38.85) etc., will
Beijing and its corresponding coordinate value, Tianjin and its corresponding coordinate value etc. are stored to presetting database.
Under application scenes, user may in ECharts maps selection area, check the correlation of selection area
Data, user's selection area is typically by pressing left mouse button, do not unclamp left button and in ECharts body of a map or charts
Dragging mouse, then unclamps mouse, by this process come selected target region.
In this application, will be detected on Echarts maps (or monitor) left mouse button be clicked, left mouse button quilt
Persistently press and mouse is dragged in ECharts body of a map or charts, then left mouse button is released the event of whole process
Referred to as mouse action event.
Step S102, if detecting mouse action event on Echarts maps, determines mouse action event in page
Origin coordinates value and termination coordinate value on face.
If being detected on Echarts maps, left mouse button is clicked, left mouse button is persistently pressed and in ECharts
Mouse is dragged in body of a map or chart, and then left mouse button is released the event of whole process, that is, detect mouse action thing
Part, determines origin coordinates value of the mouse action event on the page and terminates coordinate value.In this application, in Echarts
The point that left mouse button is clicked on map is designated as A, and point A is the upper left corner of the target area of frame choosing, on Echarts ground
Left mouse button is released and is designated as B on figure, and point B is the lower right corner of the target area of frame choosing.That is point A is mouse behaviour
Make origin coordinates value of the event on the page, point B is termination coordinate value of the mouse action event on the page.
For example, the point A (origin coordinates value) that left mouse button is clicked on Echarts maps is (120px, 20px),
Unit is px on the page, i.e., when frame favored area starts, apart from the page left side, distance is：120px；Mouse distance
Page top distance is 20px.The point B (termination coordinate value) that left mouse button is released on Echarts maps is (300
Px, 210px), i.e., at the end of frame favored area, apart from the page left side, distance is：300px；Mouse is apart from page top
Portion's distance is 210px.
Step S103, target zone is determined according to origin coordinates value and termination coordinate value, wherein, according to target zone
The corresponding scope that origin coordinates value and termination coordinate value determine on the canvas painting canvas residing for Echarts maps.
Alternatively, in the display methods of the Echarts maps that the embodiment of the present application is provided, according to origin coordinates value and end
Only coordinate value determines that target zone includes：Positioning of the canvas painting canvas residing for Echarts maps on the page is obtained to sit
Scale value；First object coordinate value is calculated according to origin coordinates value and elements of a fix value, wherein, first object coordinate value is
Origin coordinates value corresponding coordinate value on the canvas painting canvas residing for Echarts maps；According to termination coordinate value and calmly
Position coordinate value calculates the second coordinates of targets value, wherein, the second coordinates of targets value is termination coordinate value in Echarts maps institute
Corresponding coordinate value on the canvas painting canvas at place；And mesh is determined according to first object coordinate value and the second coordinates of targets value
Mark scope.
For example, the elements of a fix of the Canvas painting canvas on the page are (100px, 10px), i.e. Canvas painting canvas distance
Page left side distance is 100px, and Canvas painting canvas is 10px, the mouse on Echarts maps apart from page top distance
The point A (origin coordinates value) that mark left button is clicked is (120px, 20px), the left mouse button on Echarts maps
The point B (termination coordinate value) being released is (300px, 210px), according to origin coordinates value and elements of a fix value meter
Calculate first object coordinate value, that is, detect mouse be pressed left button when, the left side distance of light subject distance canvas painting canvas is
120-100=20px；Distance on the upside of canvas painting canvas is 20-10=10px；Sat according to coordinate value and positioning is terminated
Scale value calculates the second coordinates of targets value, that is, when detecting left mouse button and being released, the left side of light subject distance canvas painting canvas
Distance is 300-100=200px；Distance on the upside of canvas painting canvas is 210-10=200px；According to first object
Coordinate value and the second coordinates of targets value determine that target zone is：20<=x<=200,10<=y<=200, wherein, x
It is abscissa, y is ordinate, every coordinate for meeting this target zone is all the coordinate chosen by frame.
Step S104, determines target zone corresponding geographic position name on Echarts maps, and show geographical position
Put the corresponding target data of title.
Alternatively, in the display methods of the Echarts maps that the embodiment of the present application is provided, determine that target zone exists
Corresponding geographic position name includes on Echarts maps：The coordinate value in target zone is searched in presetting database；
And obtain the coordinate value for finding corresponding geographic position name in presetting database.Displaying geographic position name pair
The target data answered includes：Determine target data in various data corresponding with geographic position name；Create target column
Table, wherein, object listing includes geographic position name and the corresponding target data of geographic position name；And display
Object listing.
For example, target zone is 20<=x<=200,10<=y<=200, searched in target zone in presetting database
Coordinate value；Find in presetting database (116.46,39.92), (117.2,39.13), (118.02,39.63),
(115.48,38.85) etc. coordinate obtains above-mentioned coordinate value in presetting database correspondingly in target zone
Reason location name, it is Beijing, Tianjin, Tangshan, Baoding etc. to get the corresponding geographic position name of above-mentioned coordinate value.
Be stored with various data corresponding with Beijing, Tianjin, Tangshan, Baoding etc. area in database, for example, website
Visit capacity, microblogging mood value, site search keyword etc. multiple business data, it is determined that the Beijing for needing to select in frame,
The target data of Tianjin, Tangshan, Baoding etc. area displaying, if target data is website visiting amount, Beijing area
Website visiting amount be the website visiting amount of 879542321, Efficiency in Buildings in Tianjin Area for 51854705, according to the net of Beijing area
Stand visit capacity, website visiting amount of Efficiency in Buildings in Tianjin Area etc. creates object listing, the object listing of establishment is as shown in table 1 below：
Table 1
| Geographic position name | Website visiting amount |
| Beijing | 879542321 |
| Tianjin | 51854705 |
| Tangshan | 35514220 |
| Baoding | 36715986 |
Show the object listing for creating.User can intuitively obtain the related data of frame favored area by object listing,
So as to improve the Experience Degree of user.
In sum, the coordinate range that the application passes through calculation block favored area, obtains the geographical position in frame selection of land graph region
Confidence cease, then display frames choosing region geographical location information related data, so as to realize detailed display frames favored area
Internal details, also for the further detailed displaying of data provides a kind of good interactive mode.
The display methods of the ECharts maps that the embodiment of the present application is provided, detects that mouse is grasped by Echarts maps
Make event；If detecting mouse action event on Echarts maps, mouse action event rising on the page is determined
Beginning coordinate value and termination coordinate value；Target zone is determined according to origin coordinates value and termination coordinate value, wherein, target model
Enclose be according to origin coordinates value and terminate coordinate value in Echarts maps residing for canvas painting canvas on determine corresponding model
Enclose；And determine target zone corresponding geographic position name on Echarts maps, and show geographic position name pair
The target data answered, solves in correlation technique due to that cannot check selected multiple regions in ECharts maps
Related data, causes the problem that user experience is relatively low.By calculating target zone (selected area on Echarts maps
Domain scope) coordinate range, the geographic position name that includes in selection area is obtained, so as to show geographic position name
Corresponding target data, realizes the related data in the multiple regions that can check selected in ECharts maps, enters
And reached the effect of lifting user experience.
It should be noted that can be in such as one group computer executable instructions the step of the flow of accompanying drawing is illustrated
Performed in computer system, and, although logical order is shown in flow charts, but in some cases, can
Shown or described step is performed with different from order herein.
The embodiment of the present application additionally provides a kind of display device of ECharts maps, it is necessary to explanation, the application reality
Apply the ECharts maps of example display device can be used for perform the embodiment of the present application provided for ECharts maps
Display methods.The display device of the ECharts maps for providing the embodiment of the present application below is introduced.
Fig. 2 is the schematic diagram of the display device of the ECharts maps according to the embodiment of the present application.As shown in Fig. 2 should
Device includes：Detection unit 10, the first determining unit 20, the second determining unit 30 and the 3rd determining unit 40.
Detection unit 10, for detecting mouse action event on Echarts maps.
First determining unit 20, in the case of detecting mouse action event on Echarts maps, determines mouse
Origin coordinates value and termination coordinate value of the mark Action Events on the page.
Second determining unit 30, for determining target zone according to origin coordinates value and termination coordinate value, wherein, target
Scope be according to origin coordinates value and terminate coordinate value in Echarts maps residing for canvas painting canvas on determine correspondence
Scope.
3rd determining unit 40, for determining target zone corresponding geographic position name on Echarts maps, and
The corresponding target data of displaying geographic position name.
The display device of the ECharts maps that the embodiment of the present application is provided, by detection unit 10 in Echarts maps
Upper detection mouse action event；First determining unit 20 detects the situation of mouse action event on Echarts maps
Under, determine origin coordinates value of the mouse action event on the page and terminate coordinate value；Second determining unit 30 according to rise
Beginning coordinate value and termination coordinate value determine target zone, wherein, target zone is according to origin coordinates value and terminates coordinate
It is worth the corresponding scope determined on the canvas painting canvas residing for Echarts maps；And the 3rd determining unit 40 determines mesh
Mark scope corresponding geographic position name on Echarts maps, and show the corresponding target data of geographic position name,
Solve in correlation technique due to the related data in selected multiple regions cannot be checked in ECharts maps, cause
The relatively low problem of user experience.By the coordinate that target zone (selection area scope) is calculated on Echarts maps
Scope, obtains the geographic position name included in selection area, so that show the corresponding target data of geographic position name,
The related data in the multiple regions that can check selected in ECharts maps is realized, and then has reached lifting user
The effect of Experience Degree.
Alternatively, in the display device of the ECharts maps that the embodiment of the present application is provided, the second determining unit 30 is wrapped
Include：First acquisition module, for obtaining elements of a fix value of the canvas painting canvas residing for Echarts maps on the page；
First computing module, for calculating first object coordinate value according to origin coordinates value and elements of a fix value, wherein, first
Coordinates of targets value is origin coordinates value corresponding coordinate value on the canvas painting canvas residing for Echarts maps；Second meter
Module is calculated, for calculating the second coordinates of targets value according to termination coordinate value and elements of a fix value, wherein, the second target is sat
Scale value is to terminate coordinate value corresponding coordinate value on the canvas painting canvas residing for Echarts maps；And first determine
Module, for determining target zone according to first object coordinate value and the second coordinates of targets value.
Alternatively, in the display device of the ECharts maps that the embodiment of the present application is provided, the device also includes：The
Four determining units, for determining all of geographic position name on Echarts maps；Acquiring unit, for using default
It is right on the canvas painting canvas residing for Echarts maps that interface obtains each geographic position name on Echarts maps respectively
The coordinate value answered；And memory cell, for by all of geographic position name on Echarts maps and Echarts ground
Each geographic position name corresponding coordinate value on the canvas painting canvas residing for Echarts maps is stored to default on figure
Database.
Alternatively, in the display device of the ECharts maps that the embodiment of the present application is provided, the 3rd determining unit 40 is wrapped
Include：Searching modul, for searching the coordinate value in target zone in presetting database；And second acquisition module,
For obtaining the coordinate value for finding corresponding geographic position name in presetting database.
Alternatively, in the display device of the ECharts maps that the embodiment of the present application is provided, the 3rd determining unit 40 is wrapped
Include：Second determining module, for determining target data in various data corresponding with geographic position name；Create mould
Block, for creating object listing, wherein, object listing includes that geographic position name and geographic position name are corresponding
Target data；And display module, for display target list.
The display device of the ECharts maps includes processor and memory, and above-mentioned detection unit, first determine list
Unit, the second determining unit and the 3rd determining unit etc. are stored in memory, by computing device as program unit
Storage said procedure unit in memory realizes corresponding function.
Kernel is included in processor, is gone in memory to transfer corresponding program unit by kernel.Kernel can set one
Or more, show ECharts maps by adjusting kernel parameter.
Memory potentially includes the volatile memory in computer-readable medium, random access memory (RAM) and/
Or the form, such as read-only storage (ROM) or flash memory (flash RAM) such as Nonvolatile memory, memory includes at least one
Individual storage chip.
Present invention also provides a kind of embodiment of computer program product, when being performed on data processing equipment, fit
In the program code for performing initialization there are as below methods step：Mouse action event is detected on ECharts maps；Such as
Fruit detects mouse action event on ECharts maps, determines origin coordinates value of the mouse action event on the page
With termination coordinate value；Target zone is determined according to origin coordinates value and termination coordinate value, wherein, according to target zone
The corresponding scope that origin coordinates value and termination coordinate value determine on the canvas painting canvas residing for ECharts maps；And
Determine target zone corresponding geographic position name on ECharts maps, and show the corresponding mesh of geographic position name
Mark data.
It should be noted that for foregoing each method embodiment, in order to be briefly described, therefore it is all expressed as one it is
The combination of actions of row, but those skilled in the art should know, and the application is not limited by described sequence of movement
System, because according to the application, some steps can sequentially or simultaneously be carried out using other.Secondly, art technology
Personnel should also know that embodiment described in this description belongs to preferred embodiment, involved action and module
Not necessarily necessary to the application.
In the above-described embodiments, the description to each embodiment all emphasizes particularly on different fields, and does not have the portion described in detail in certain embodiment
Point, may refer to the associated description of other embodiment.
In several embodiments provided herein, it should be understood that disclosed device, can be by other sides
Formula is realized.For example, device embodiment described above is only schematical, such as the division of described unit, only
Only a kind of division of logic function, can there is other dividing mode when actually realizing, such as multiple units or component can
To combine or be desirably integrated into another system, or some features can be ignored, or not perform.
The unit that is illustrated as separating component can be or may not be it is physically separate, it is aobvious as unit
The part for showing can be or may not be physical location, you can with positioned at a place, or can also be distributed to
On multiple NEs.Some or all of unit therein can be according to the actual needs selected to realize the present embodiment
The purpose of scheme.
In addition, during each functional unit in the application each embodiment can be integrated in a processing unit, it is also possible to
It is that unit is individually physically present, it is also possible to which two or more units are integrated in a unit.It is above-mentioned integrated
Unit can both be realized in the form of hardware, it would however also be possible to employ the form of SFU software functional unit is realized.
Obviously, those skilled in the art should be understood that each module or each step of above-mentioned the application can be with general
Computing device realize that they can be concentrated on single computing device, or be distributed in multiple computing device institutes
On the network of composition, alternatively, they can be realized with the executable program code of computing device, it is thus possible to
It is stored in being performed by computing device in storage device, or they is fabricated to each integrated circuit die respectively
Block, or the multiple modules or step in them are fabricated to single integrated circuit module to realize.So, the application
Any specific hardware and software is not restricted to combine.
The preferred embodiment of the application is the foregoing is only, the application is not limited to, for those skilled in the art
For member, the application can have various modifications and variations.It is all within spirit herein and principle, made it is any
Modification, equivalent, improvement etc., should be included within the protection domain of the application.
Claims (10)
1. a kind of display methods of Echarts maps, it is characterised in that including：
Mouse action event is detected on Echarts maps；
If detecting the mouse action event on the Echarts maps, the mouse action event is determined
Origin coordinates value and termination coordinate value on the page；
Target zone is determined according to the origin coordinates value and the termination coordinate value, wherein, the target zone
It is the canvas painting canvas according to residing for the origin coordinates value and the termination coordinate value in the Echarts maps
The corresponding scope of upper determination；And
Determine the target zone corresponding geographic position name on the Echarts maps, and show describedly
The corresponding target data of reason location name.
2. method according to claim 1, it is characterised in that according to the origin coordinates value and the termination coordinate
Value determines that target zone includes：
Obtain canvas painting canvas residing for Echarts maps elements of a fix value on the page；
First object coordinate value is calculated according to the origin coordinates value and the elements of a fix value, wherein, described the
One coordinates of targets value is the origin coordinates value corresponding on the canvas painting canvas residing for the Echarts maps
Coordinate value；
Second coordinates of targets value is calculated according to the termination coordinate value and the elements of a fix value, wherein, described the
Two coordinates of targets values are that the termination coordinate value is corresponding on the canvas painting canvas residing for the Echarts maps
Coordinate value；And
The target zone is determined according to the first object coordinate value and the second coordinates of targets value.
3. method according to claim 1, it is characterised in that mouse action event is detected on Echarts maps
Before, methods described also includes：
Determine all of geographic position name on the Echarts maps；
Each geographic position name is obtained on the Echarts maps respectively using preset interface in the Echarts
Corresponding coordinate value on canvas painting canvas residing for map；And
By each geographical position on all of geographic position name on the Echarts maps and the Echarts maps
Title corresponding coordinate value on the canvas painting canvas residing for the Echarts maps is put to store to presetting database.
4. method according to claim 3, it is characterised in that determine the target zone in the Echarts maps
Upper corresponding geographic position name includes：
The coordinate value in the target zone is searched in the presetting database；And
The coordinate value that acquisition finds corresponding geographic position name in the presetting database.
5. method according to claim 1, it is characterised in that the corresponding number of targets of the displaying geographic position name
According to including：
Determine target data in various data corresponding with the geographic position name；
Object listing is created, wherein, the object listing includes the geographic position name and the geographical position
Put the corresponding target data of title；And
Show the object listing.
6. a kind of display device of Echarts maps, it is characterised in that including：
Detection unit, for detecting mouse action event on Echarts maps；
First determining unit, the situation for detecting the mouse action event on the Echarts maps
Under, determine origin coordinates value of the mouse action event on the page and terminate coordinate value；
Second determining unit, for determining target zone according to the origin coordinates value and the termination coordinate value,
Wherein, the target zone is in the Echarts maps according to the origin coordinates value and the termination coordinate value
The corresponding scope determined on residing canvas painting canvas；And
3rd determining unit, for determining the target zone corresponding geographical position on the Echarts maps
Title, and show the corresponding target data of the geographic position name.
7. device according to claim 6, it is characterised in that second determining unit includes：
First acquisition module, for obtaining the canvas painting canvas residing for the Echarts maps on the page
Elements of a fix value；
First computing module, sits for calculating first object according to the origin coordinates value and the elements of a fix value
Scale value, wherein, the first object coordinate value is the origin coordinates value residing for the Echarts maps
Corresponding coordinate value on canvas painting canvas；
Second computing module, sits for calculating the second target according to the termination coordinate value and the elements of a fix value
Scale value, wherein, the second coordinates of targets value is the termination coordinate value residing for the Echarts maps
Corresponding coordinate value on canvas painting canvas；And
First determining module, for determining institute according to the first object coordinate value and the second coordinates of targets value
State target zone.
8. device according to claim 6, it is characterised in that described device also includes：
4th determining unit, for determining all of geographic position name on the Echarts maps；
Acquiring unit, for obtaining each geographic position name on the Echarts maps respectively using preset interface
The corresponding coordinate value on the canvas painting canvas residing for the Echarts maps；And
Memory cell, for by all of geographic position name on the Echarts maps and the Echarts ground
Each geographic position name corresponding coordinate value on the canvas painting canvas residing for the Echarts maps is deposited on figure
Store up to presetting database.
9. device according to claim 8, it is characterised in that the 3rd determining unit includes：
Searching modul, for searching the coordinate value in the target zone in the presetting database；And
Second acquisition module, for obtaining the coordinate value for finding corresponding geographical position in the presetting database
Put title.
10. device according to claim 6, it is characterised in that the 3rd determining unit includes：
Second determining module, for determining target data in various data corresponding with the geographic position name；
Creation module, for creating object listing, wherein, the object listing includes the geographical position name
Claim target data corresponding with the geographic position name；And
Display module, for showing the object listing.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510791847.0A CN106708896A (en) | 2015-11-17 | 2015-11-17 | ECharts map displaying method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510791847.0A CN106708896A (en) | 2015-11-17 | 2015-11-17 | ECharts map displaying method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN106708896A true CN106708896A (en) | 2017-05-24 |
Family
ID=58933317
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510791847.0A Pending CN106708896A (en) | 2015-11-17 | 2015-11-17 | ECharts map displaying method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106708896A (en) |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108170352A (en) * | 2017-11-29 | 2018-06-15 | 石化盈科信息技术有限责任公司 | A kind of Orientation on map method and system |
| CN108959471A (en) * | 2018-06-20 | 2018-12-07 | 重庆市地理信息中心 | A kind of range control method of spatial data |
| CN109522532A (en) * | 2017-09-19 | 2019-03-26 | 北京国双科技有限公司 | A kind of calculation method and device of line chart selection range |
| CN109903671A (en) * | 2019-04-09 | 2019-06-18 | 吉旗（成都）科技有限公司 | A kind of route methods of exhibiting based on Echart |
| CN112099893A (en) * | 2020-09-21 | 2020-12-18 | 郑州唐迈信息科技有限公司 | Map drill-down visualization method capable of accelerating map loading |
| CN113407281A (en) * | 2021-06-23 | 2021-09-17 | 重庆卡歌科技有限公司 | Dynamic visual three-dimensional display method for new land and sea channel service based on data application |
| CN114648603A (en) * | 2022-05-19 | 2022-06-21 | 杭州比智科技有限公司 | Method and system for realizing fly-line dynamic effect based on canvas and echarts |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101192215A (en) * | 2006-11-24 | 2008-06-04 | 中国科学院声学研究所 | Information aggregation and enquiry method based on geographic coordinates |
| US20090216722A1 (en) * | 2008-02-22 | 2009-08-27 | Samsung Electronics Co., Ltd. | Method and apparatus for querying digital records |
| CN104820684A (en) * | 2015-04-21 | 2015-08-05 | 武大吉奥信息技术有限公司 | Fast on-line analysis processing method based on spatial position |
-
2015
- 2015-11-17 CN CN201510791847.0A patent/CN106708896A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101192215A (en) * | 2006-11-24 | 2008-06-04 | 中国科学院声学研究所 | Information aggregation and enquiry method based on geographic coordinates |
| US20090216722A1 (en) * | 2008-02-22 | 2009-08-27 | Samsung Electronics Co., Ltd. | Method and apparatus for querying digital records |
| CN104820684A (en) * | 2015-04-21 | 2015-08-05 | 武大吉奥信息技术有限公司 | Fast on-line analysis processing method based on spatial position |
Non-Patent Citations (1)
| Title |
|---|
| 于坤: "《JavaScript基础与案例开发详解》", 31 January 2014 * |
Cited By (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109522532A (en) * | 2017-09-19 | 2019-03-26 | 北京国双科技有限公司 | A kind of calculation method and device of line chart selection range |
| CN109522532B (en) * | 2017-09-19 | 2022-11-04 | 北京国双科技有限公司 | Method and device for calculating selection range of line drawing frame |
| CN108170352A (en) * | 2017-11-29 | 2018-06-15 | 石化盈科信息技术有限责任公司 | A kind of Orientation on map method and system |
| CN108959471A (en) * | 2018-06-20 | 2018-12-07 | 重庆市地理信息中心 | A kind of range control method of spatial data |
| CN108959471B (en) * | 2018-06-20 | 2019-07-02 | 重庆市地理信息中心 | A kind of range control method of spatial data |
| CN109903671A (en) * | 2019-04-09 | 2019-06-18 | 吉旗（成都）科技有限公司 | A kind of route methods of exhibiting based on Echart |
| CN112099893A (en) * | 2020-09-21 | 2020-12-18 | 郑州唐迈信息科技有限公司 | Map drill-down visualization method capable of accelerating map loading |
| CN113407281A (en) * | 2021-06-23 | 2021-09-17 | 重庆卡歌科技有限公司 | Dynamic visual three-dimensional display method for new land and sea channel service based on data application |
| CN113407281B (en) * | 2021-06-23 | 2022-11-11 | 重庆卡歌科技有限公司 | Dynamic visual three-dimensional display method for new land and sea channel service based on data application |
| CN114648603A (en) * | 2022-05-19 | 2022-06-21 | 杭州比智科技有限公司 | Method and system for realizing fly-line dynamic effect based on canvas and echarts |
| CN114648603B (en) * | 2022-05-19 | 2022-08-05 | 杭州比智科技有限公司 | Method and system for realizing fly-line dynamic effect based on canvas and echarts |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106708896A (en) | ECharts map displaying method and device | |
| CN107908677B (en) | Cell source of houses methods of exhibiting and device based on intelligent terminal | |
| CN103383773B (en) | The remote sensing satellite image of a kind of dynamic extraction Image Control Point is the most just penetrating framework and the method for correction | |
| CN104281701B (en) | Multiscale Distributed Spatial data query method and system | |
| CN104199891B (en) | Data processing method and device for thermodynamic chart | |
| CN104408185B (en) | The link clicks amount methods of exhibiting and device of webpage thermodynamic | |
| WO2014113709A2 (en) | Searching and determining active area | |
| CN105989082A (en) | Report view generation method and apparatus | |
| CN105022818A (en) | Tile map storing and loading method | |
| CN104239431B (en) | Three-dimension GIS model display methods and device | |
| CN106775600A (en) | The processing method and processing device of HTML5 canvas painting canvas | |
| CN104462526B (en) | More people towards high-resolution remote sensing image cooperate with rapid vector method online | |
| CN104850649B (en) | A kind of method and system that point of interest sampling is carried out on map | |
| CN105447035B (en) | data scanning method and device | |
| CN105956018A (en) | Massive associated data analysis and visualization implementation method based on cloud computing platform | |
| CN114254584A (en) | Comparison method, modeling method and device of chip products and storage medium | |
| CN109508417A (en) | Method, apparatus, electronic equipment and the readable storage medium storing program for executing of recommended | |
| CN105989146A (en) | Object display method and apparatus | |
| CN103617221B (en) | Software recommendation method and software recommendation system | |
| CN107066582A (en) | Realize the method and device that virtual resource is recommended | |
| CN107437367B (en) | Method and device for selecting labels | |
| CN106323266A (en) | POI position information processing method and device | |
| CN109857895A (en) | Stereoscopic vision search method and system based on polycyclic road view convolutional neural networks | |
| CN108198011B (en) | Method, system and terminal equipment for generating order | |
| CN104850623A (en) | Dynamic extension method and system for multidimensional data analysis model |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information |
Address after: 100083 No. 401, 4th Floor, Haitai Building, 229 North Fourth Ring Road, Haidian District, Beijing Applicant after: Beijing Guoshuang Technology Co.,Ltd. Address before: 100086 Cuigong Hotel, 76 Zhichun Road, Shuangyushu District, Haidian District, Beijing Applicant before: Beijing Guoshuang Technology Co.,Ltd. |
|
| CB02 | Change of applicant information | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20170524 |
|
| RJ01 | Rejection of invention patent application after publication |