前言
通过一个简单的案例希望能够帮助像我一样刚接触echarts地图开发面对文档众多配置项不知道从哪下手的同学。
案例包括使用charts地理坐标系组件(geo)绘制地图,通过带有涟漪特效动画的散点图(effectScatter)进行标注,进行简单的样式修改,并且实现根据数据的值显示不同的颜色,鼠标移动触发提示框,自定义提示框,点击跳转等常见需求。
预览
开始
下载echarts:github地址
复制dist目录下的 echarts.min.js 文件
新建html,引入 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>地图标注</title>
</head>
<body>
<script src="./echarts.min.js"></script>
</body>
</html>
如果是绘制一般的柱状图,折线图,只要引入echarts就够了,绘制地图还需要引入一个地图文件。
到/map/js/ 目录下复制 china.js 并引入,可以看到这个目录下还有世界地图,各省地图的js,需要画哪个地图从这里引入相应js就好,案例使用中国地图。
准备一个绘制图表的 具有宽高的 容器dom
<!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>地图标注</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>
获取dom,将dom传入echarts的init方法初始化echarts实例。
<script>
var china = document.getElementById('china');
var chinaMap = echarts.init(china);
</script>
创建一个配置项,将配置项通过实例的setOption方法传入绘制图表。
<script>
var china = document.getElementById('china');
var chinaMap = echarts.init(china);
var option = {
}
chinaMap.setOption(option);
</script>
这时候已经可以绘制图表了,当然配置项还是个空对象,所以页面上也不会显示任何内容,下面只要添加需要的配置项就行了。
配置标题并居中,这里遇到一个小坑一开始查看文档我以为居中是textAlign这个属性,试了以后才知道是left控制
var option = {
title: {
text: '中国空气质量',
left: 'center'
},
}
通过geo地理坐标系组件绘制地图。这里可以类比折现图,柱状图,画这些图需要一个载体就是直角坐标系,那在地图上展示数据的话geo就是这个长成地图模样的坐标系。所以要展示数据,先画载体坐标系。
var option = {
title: {
text: '中国空气质量',
left: 'center'
},
geo: {
map: 'china', // 地图选择china,对应引入的china.js
},
}
此时地图已经出现,并且带有一些默认的效果
稍微对默认的样式做一点修改,取消鼠标滑过时的效果,改变区域的背景颜色和边框颜色var option = {
title: {
text: '中国空气质量',
left: 'center'
},
geo: {
map: 'china',
silent: true, // 禁止图形响应鼠标事件
itemStyle: {
color: '#004981', // 背景颜色
borderColor: 'rgb(54,192,118)' // 边框颜色
}
},
}
接下来就可以在地图上进行标注,图表都是根据数据来绘制。直角坐标系中绘制图表需要x轴和y轴的值,在地图上就是经纬度了。echarts数据的配置也就是图表的绘制,都在 series 这个配置项下,文档中详细的列出了每种图表的配置项,在这里地图上的标注点选用带涟漪效果的散点图(effectScatter)。 series 是一个数组,因为一个坐标系中可以展示好几组不同的数据绘制不同的图表,每一组通过一个对象,我们这里只有一组散点图。
var option = {
title: {
text: '中国空气质量',
left: 'center'
},
geo: {
map: 'china',
silent: true,
itemStyle: {
color: '#004981',
borderColor: 'rgb(54,192,118)'
}
},
series: [
{
type: 'effectScatter', // 指明图表类型:带涟漪效果的散点图
coordinateSystem: 'geo', // 指明绘制在geo坐标系上
}
]
}
图表的核心当然是要展示的数据,数据配置在series每一项的data属性中、在地图上,默认value的前两项为经纬度,第三项为其他数据,数据可以写成一个简单的数组形式,也可以是一个对象。
// 这种形式的data默认每一项经纬度
data: [
[12,32],
[43,23],
[123,43]
]
我们这里除了经纬度还需要城市的名称和城市污染度情况,所以可以写成对象的形式,随便从网上找了三个城市的坐标。
图表会默认读取value的前两项作为经纬度坐标,所以可以看到小点已经出现在地图上。
var option = {
title: {
text: '中国空气质量',
left: 'center'
},
geo: {
map: 'china',
silent: true,
itemStyle: {
color: '#004981',
borderColor: 'rgb(54,192,118)'
}
},
series: [
{
type: 'effectScatter',
coordinateSystem: 'geo',
data: [
{
name: '上海',
value: [121.47,31.23, 55]
},
{
name: '北京',
value: [116.40,39.90, 110]
},
{
name: '重庆',
value: [106.55,29.56, 32] // value的前两项是经纬度坐标,第三项为污染度数据
}
]
}
]
}
添加提示框组件,实现鼠标移到标注点上时显示数据详情,通过tooltip配置项配置。
var option = {
title: {
text: '中国空气质量',
left: 'center'
},
tooltip: {}, // 配置提示框
geo: {
map: 'china',
silent: true,
itemStyle: {
color: '#004981',
borderColor: 'rgb(54,192,118)'
}
},
series: [
{
type: 'effectScatter',
coordinateSystem: 'geo',
data: [
{
name: '上海',
value: [121.47,31.23, 55]
},
{
name: '北京',
value: [116.40,39.90, 110]
},
{
name: '重庆',
value: [106.55,29.56, 32]
}
]
}
]
}
可以看到只添加一个tooltip的空对象提示框已经生效了,但是显然数据显示的有问题,默认显示的是value中的第二项(纬度),不是我们真正需要的显示的第三项污染程度,同时提示框中还想添加一个自定义的跳转链接。 (这里有个小坑是,在echarts官网的两个类似的地图示例中,标注点的数据显示也为纬度而不是真正要显示的数据)
可以通过tooltip下的formatter来自定义提示框的内容,当formatter为函数时可以接收一个参数,从参数中可以拿到当前坐标点的信息
var option = {
title: {
text: '中国空气质量',
left: 'center'
},
// 自定义提示框内容
tooltip: {
formatter: function(params) {
var value = params.value;
var a = '<br> <a href="http://www.baidu.com" style="color: red">查看详情</a>'
return params.name + ': ' + value[2] + a;
}
},
geo: {
map: 'china',
silent: true,
itemStyle: {
color: '#004981',
borderColor: 'rgb(54,192,118)'
}
},
series: [
{
type: 'effectScatter',
coordinateSystem: 'geo',
data: [
{
name: '上海',
value: [121.47,31.23, 55]
},
{
name: '北京',
value: [116.40,39.90, 110]
},
{
name: '重庆',
value: [106.55,29.56, 32]
}
]
}
]
}
此时提示框中就变成我们自定义的内容,不过尝试点击按钮会发现根本点不到,所以还需要给tooltip添加两项配置
var option = {
title: {
text: '中国空气质量',
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">查看详情</a>'
return params.name + ': ' + value[2] + a;
}
},
geo: {
map: 'china',
silent: true,
itemStyle: {
color: '#004981',
borderColor: 'rgb(54,192,118)'
}
},
series: [
{
type: 'effectScatter',
coordinateSystem: 'geo',
data: [
{
name: '上海',
value: [121.47,31.23, 55]
},
{
name: '北京',
value: [116.40,39.90, 110]
},
{
name: '重庆',
value: [106.55,29.56, 32]
}
]
}
]
}
此时数据显示正确,点击跳转功能也实现了,还差根据污染程度不同显示不同颜色的标注点,所以要再回到series对数据的配置项下。
itemStyle 可以配置每个数据的显示样式,color代表点的颜色,他类似上面提示框的formatter也可以写成一个函数,拿到每个数据的内容,只要根据不同的值返回不同的颜色值就可以了。
var option = {
title: {
text: '中国空气质量',
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">查看详情</a>'
return params.name + ': ' + value[2] + a;
}
},
geo: {
map: 'china',
silent: true,
itemStyle: {
color: '#004981',
borderColor: 'rgb(54,192,118)'
}
},
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: '上海',
value: [121.47,31.23, 55]
},
{
name: '北京',
value: [116.40,39.90, 110]
},
{
name: '重庆',
value: [106.55,29.56, 32]
}
]
}
]
}
完成
搞定,我也是刚使用echarts不久,如果有什么错误还望指出,最后附上完整代码
<!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>地图标注</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: '中国空气质量',
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">查看详情</a>'
return params.name + ': ' + value[2] + a;
}
},
geo: {
map: 'china',
silent: true,
itemStyle: {
color: '#004981',
borderColor: 'rgb(54,192,118)'
}
},
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: '上海',
value: [121.47, 31.23, 55]
},
{
name: '北京',
value: [116.40, 39.90, 110]
},
{
name: '重庆',
value: [106.55, 29.56, 32]
}
]
}]
}
chinaMap.setOption(option);
</script>
</body>
</html>