preface
Through a simple case, I hope to help students like me who are new to Echarts map development and do not know where to start in the face of many configuration items in the document.
Examples include drawing maps using the Charts component (GEO), annotating with effectScatter with ripple effects animation, simple style modification, and realizing common requirements such as displaying different colors according to data values, triggering prompt box with mouse movement, customizing prompt box and clicking to jump.
preview
start
Download echarts: copy the echarts.min.js file from dist to github
Create new HTML and introduce echarts.min.js
<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> Map </title> </head> <body> <script SRC ="./echarts.min.js"></script>
</body>
</html>
Copy the code
If you want to draw a general bar chart, line chart, you just need to import Echarts, map also need to import a map file.
Copy China. js to /map/js/ directory and import it. You can see that there are also js of world map and provincial map in this directory, which map you need to draw and import corresponding JS from here. The case uses China map.
Prepare a wide and tall container DOM for plotting
<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> Map annotation </title> </head> <body> <div id="china" style="width: 900px; height: 600px">
</div>
<script src="./echarts.min.js"></script>
<script src="./china.js"></script>
</body>
</html>
Copy the code
Get the DOM and pass it into echarts init to initialize the echarts instance.
<script>
var china = document.getElementById('china');
var chinaMap = echarts.init(china);
</script>
Copy the code
Create a configuration item and pass it through the instance’s setOption method to draw the diagram.
<script>
var china = document.getElementById('china');
var chinaMap = echarts.init(china);
var option = {
}
chinaMap.setOption(option);
</script>
Copy the code
The diagram is ready to be drawn, but the configuration items are still empty, so nothing is displayed on the page. Just add the required configuration items. When I first looked at the document I thought it was textAlign, but when I tried it I realized it was left control
var option = {
title: {
text: 'Air Quality in China',
left: 'center'}},Copy the code
var option = {
title: {
text: 'Air Quality in China',
left: 'center'
},
geo: {
map: 'china'},},},}Copy the code
The map now appears with some default effects
var option = {
title: {
text: 'Air Quality in China',
left: 'center'
},
geo: {
map: 'china',
silent: trueItemStyle: {color:'# 004981', // Background color borderColor:'RGB (54192118).// Border color}},}Copy the code
var option = {
title: {
text: 'Air Quality in China',
left: 'center'
},
geo: {
map: 'china',
silent: true,
itemStyle: {
color: '# 004981',
borderColor: 'RGB (54192118).
}
},
series: [
{
type: 'effectScatter'// Specify the type of graph: scatter graph with ripple effect for coordinateSystem:'geo'}]}Copy the codeThe core of the chart is, of course, the data to be displayed. The data is configured in the data attribute of each item of series and on the map. The first two items of the default value are latitude and longitude, and the third item is other data.
[[12,32], [43,23], [123,43]]Copy the code
In addition to the longitude and latitude, we also need the name of the city and the pollution degree of the city, so we can write it in the form of objects. We found the coordinates of three cities randomly from the Internet. By default, the chart reads the first two terms of value as latitude and longitude coordinates, so you can see that the dots have already appeared on the map.
var option = {
title: {
text: 'Air Quality in China',
left: 'center'
},
geo: {
map: 'china',
silent: true,
itemStyle: {
color: '# 004981',
borderColor: 'RGB (54192118).
}
},
series: [
{
type: 'effectScatter',
coordinateSystem: 'geo',
data: [
{
name: 'Shanghai', value: [121.47,31.23, 55]}, {name:'Beijing', value: [116.40,39.90, 110]}, {name:'chongqing', value: [106.55,29.56, 32] // Value: [106.55,29.56, 32]Copy the code
Add a tooltip component to display data details when the mouse moves over the annotation point, using the Tooltip configuration item.
var option = {
title: {
text: 'Air Quality in China',
left: 'center'}, tooltip: {}, // Configure tooltip box geo: {map:'china',
silent: true,
itemStyle: {
color: '# 004981',
borderColor: 'RGB (54192118).
}
},
series: [
{
type: 'effectScatter',
coordinateSystem: 'geo',
data: [
{
name: 'Shanghai', value: [121.47,31.23, 55]}, {name:'Beijing', value: [116.40,39.90, 110]}, {name:'chongqing', value: [106.55,29.56, 32]}]}Copy the code
The contents of the tooltip can be customized using formatter in the tooltip, which receives a parameter when formatter is a function and retrieves information about the current coordinate point
var option = {
title: {
text: 'Air Quality in China',
left: 'center'}, // Customize the tooltip: {formatter:function(params) {
var value = params.value;
var a = '< br > < a href = "http://www.baidu.com" style = "color: red" > view details < / a >'
return params.name + ':' + value[2] + a;
}
},
geo: {
map: 'china',
silent: true,
itemStyle: {
color: '# 004981',
borderColor: 'RGB (54192118).
}
},
series: [
{
type: 'effectScatter',
coordinateSystem: 'geo',
data: [
{
name: 'Shanghai', value: [121.47,31.23, 55]}, {name:'Beijing', value: [116.40,39.90, 110]}, {name:'chongqing', value: [106.55,29.56, 32]}]}Copy the codeThe tooltip will now be our own custom, but trying to click on the button will not be there, so we need to add two more configurations to the tooltip
var option = {
title: {
text: 'Air Quality in China',
left: 'center'
},
tooltip: {
alwaysShowContent: true// The prompt box always displays (no longer disappears when the mouse mouse leaves).true// Allow the prompt box to be clicked formatter:function(params) {
var value = params.value;
var a = '< br > < a href = "http://www.baidu.com" style = "color: red" > view details < / a >'
return params.name + ':' + value[2] + a;
}
},
geo: {
map: 'china',
silent: true,
itemStyle: {
color: '# 004981',
borderColor: 'RGB (54192118).
}
},
series: [
{
type: 'effectScatter',
coordinateSystem: 'geo',
data: [
{
name: 'Shanghai', value: [121.47,31.23, 55]}, {name:'Beijing', value: [116.40,39.90, 110]}, {name:'chongqing', value: [106.55,29.56, 32]}]}Copy the code
At this point, the data is displayed correctly, and the function of clicking to jump has been realized. There is still no need to display the marking points in different colors according to different pollution levels, so we need to return to the configuration item of series for data. ItemStyle can be used to configure the display style of each item, color is the color of the point, and the formatter can be written as a function to retrieve the contents of each item, simply by returning a different color value based on the value.
var option = {
title: {
text: 'Air Quality in China',
left: 'center'
},
tooltip: {
alwaysShowContent: true,
enterable: true,
formatter: function(params) {
var value = params.value;
var a = '< br > < a href = "http://www.baidu.com" style = "color: red" > view details < / a >'
return params.name + ':' + value[2] + a;
}
},
geo: {
map: 'china',
silent: true,
itemStyle: {
color: '# 004981',
borderColor: 'RGB (54192118).
}
},
series: [
{
type: 'effectScatter',
coordinateSystem: 'geo', itemStyle: {// Configure the style of each data point color:function(params) {
var color = ' ';
var value = params.value;
if(value[2] < 50) {
color = 'green'
}
if(value[2] >= 50 && value[2] < 100) {
color = 'yellow'
}
if(value[2] >= 100) {
color = 'red'
}
return color;
}
},
data: [
{
name: 'Shanghai', value: [121.47,31.23, 55]}, {name:'Beijing', value: [116.40,39.90, 110]}, {name:'chongqing', value: [106.55,29.56, 32]}]}Copy the code
complete
Ok, I’m new to Echarts too, please point out if there is any error, finally attached the full code
<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> Map annotation </title> </head> <body> <div id="china" style="width: 900px; height: 600px">
</div>
<script src="./echarts.min.js"></script>
<script src="./china.js"></script>
<script>
var china = document.getElementById('china');
var chinaMap = echarts.init(china);
var option = {
title: {
text: 'Air Quality in China',
left: 'center'
},
tooltip: {
alwaysShowContent: true,
enterable: true,
formatter: function (params) {
var value = params.value;
var a = '< br > < a href = "http://www.baidu.com" style = "color: red" > view details < / a >'
return params.name + ':' + value[2] + a;
}
},
geo: {
map: 'china',
silent: true,
itemStyle: {
color: '# 004981',
borderColor: 'RGB (54192118).
}
},
series: [{
type: 'effectScatter',
coordinateSystem: 'geo',
itemStyle: {
color: function (params) {
var color = ' ';
var value = params.value;
if (value[2] < 50) {
color = 'green'
}
if (value[2] >= 50 && value[2] < 100) {
color = 'yellow'
}
if (value[2] >= 100) {
color = 'red'
}
return color;
}
},
data: [{
name: 'Shanghai', value: [121.47, 31.23, 55]}, {name:'Beijing', value: [116.40, 39.90, 110]}, {name:'chongqing', value: [106.55, 29.56, 32]}]}]} chinap.setoption (Option); </script> </body> </html>Copy the code