First, the coordinates of the ECharts map need to be stored in a geoCoord attribute, which is a dictionary object of JS and consists of key/value pairs. The key represents the name of the point, while the value represents the coordinates of the point, which consists of latitude and longitude. It is an array, such as [136.00, 32.00], which represents a coordinate.
Elements needing attention in map types.
Title: Title, showing the name represented by this map.
Title: {
Text: "White clouds illuminate China",
Subtext:' Qingda. Cloud',
Sublink:'',
X:' center',
Y:' top',
textStyle: {
Color:' #fff'
}
}
Toolbox: Toolbar, which displays some displayed tools, such as zooming in and out, viewing data sets, downloading pictures, etc.
Toolbox: {
Xiu: Really,
Function: {
Mark: {show: true},
dataView: { show: true，readOnly: false }，
Restore: {show: true},
saveAsImage: { show: true }
}
}
Legend: icon display. When there are multiple maps in the series, this value is used to display icons of multiple maps, which can be displayed horizontally and vertically.
Legend: {
X:' left',
Y:' top',
Data: ['online',' offline'], //Online and offline correspond to the names of the series.
SelectedMode: false,//Select floating.
textStyle: {
Color:' #fff'
}
}
Series: Map display, which is used to display maps on top of each other. You can define multiple maps, with the first at the top, and so on.
Series: [
//Default
{
Name,' bottom template',
Type: Map,
Map type: "China",
Data: provinceMap,
GeoCoord: source,
Project style: {
Normal: {
Color: bgColor,
borderColor: "#eee "，
Label: {
Xiu: Really,
textStyle: {
Color: "#fff"
}
}
}, emphasizing: {color: "rgba( 128, 128, 128, 0.5)"}
},
}]
MarkPoint: Point identification is used to identify points on the map. These points are usually stored in a geoCoord object, which is a dictionary and was introduced at the beginning of the article.
Mark point: {//Dynamic label
Large: true,//This option, the pause will automatically become invalid.
symbolSize: 2，
Project style: {
Normal: {
Shadow blur: 2,
Shadow color:' rgba(37,140,249,0.8)',
Color: onColor
}
},
Data: []
}
Data objects in markPoint are points that need to be displayed on this map. This is a character array used to store the keys in geoCoord!
SetOption: Adds a map object to the specified map object.
var myChart = echarts . init(document . getelementbyid(' main '))；
var option = { }；
MyChart.setOption (option);
Dynamically build point markers on the map.
The general idea is to dynamically pay the points to be marked to the data objects of geoCoord and markPoint, so that the points can be dynamically marked on the map.
$.get("/map/GetOffMap "，function (data) {
For (variable i in data) {
Options. Series [0]. GeoCoord[data[i]. Longitude+"_"+data [i]. Latitude] = [parseFloat(data[i]. longitude), parseFloat(data[i]). Latitude)];
Option.series [1]. markpoint.data.push ({name: data [i]. Longitude+"_"+data [i]. Latitude});
}
MyChart.setOption (option);