前言
通过一个简单的案例，希望也能帮助到像我这样刚刚接触echarts地图开发，面对文档中众多配置项不知从何下手的同事。
案例包括使用图表地理坐标系组件（geo）绘制地图，用带有波纹效果动画的散点图（effectScatter）进行标记，进行简单的样式更改，并根据数据的值实现不同的颜色。 提示框、自定义提示框、点击跳转等常见需求。
预览
开始
下载echarts：github地址
复制dist目录下的echarts.min.js文件
创建新的html并导入echarts.min.js
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
地图标注
<script src="./echarts.min.js">
如果是画一般的柱状图或者折线图，导入echarts就够了，还需要导入地图文件来绘制地图。
进入/map/js/目录，复制china.js并导入。 可以看到这个目录下有世界地图和省地图的js。 需要绘制地图并从这里导入相应的js。 该示例使用中国地图。
准备一个容器dom，有宽度和高度，用于绘制图表
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
地图标注
<div id="china" style="width: 900px; height: 600px">
<script src="./echarts.min.js">
<script src="./china.js">
获取dom，并将dom传递给echarts的init方法来初始化echarts实例。
var china = document.getElementById('china');
var chinaMap = echarts.init(china);
创建配置项，并通过实例的setOption方法将配置项传递给草图。
var china = document.getElementById('china');
var chinaMap = echarts.init(china);
var option = {
}
chinaMap.setOption(option);
这时候图表就已经可以画出来了。 当然，配置项仍然是一个空对象，因此页面上不会显示任何内容。 只需添加下面所需的配置项即可。
配置标题并将其居中。 我在这里遇到了一个小洞。 第一次查文档的时候，我以为居中是属性textAlign。 尝试了一下后，我意识到这是左侧控件。
var option = {
title: {
text: '中国空气质量',
left: 'center'
},
}
通过geo地理坐标系组件绘制地图。 这可以与当前值图和直方图进行比较。 绘制这种地图，一个载体就是直角坐标系。 如果数据显示在地图上，geo就是成长为地图的坐标系。 所以要显示数据，首先要绘制载体坐标系。
var option = {
title: {
text: '中国空气质量',
left: 'center'
},
geo: {
map: 'china', // 地图选择china，对应引入的china.js
},
}
此时地图已经出现了，有一些默认效果
对默认样式进行小改动echarts 地图大小设置，取消键盘滑动效果，更改区域背景颜色和边框颜色
var option = {
title: {
text: '中国空气质量',
left: 'center'
},
geo: {
map: 'china',
silent: true, // 禁止图形响应鼠标事件
itemStyle: {
color: '#004981', // 背景颜色
borderColor: 'rgb(54,192,118)' // 边框颜色
}
},
}
然后就可以在地图上进行标记，并根据数据绘制图表。 在笛卡尔坐标系中绘制图表需要x轴和y轴的值，即地图上的纬度和经度。
echarts数据的配置就是图表的轮廓，都在配置项系列下。 文档中详细列出了各个图表的配置项。 这里，地图上的标记点使用带有波纹效果的散点图（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坐标系上
}
]
}
图表的核心其实就是要显示的数据。 数据配置在系列的每个项目的数据属性中。 在地图上echarts 地图大小设置，默认值的前两项是经度和纬度，第三项是其他数据。 数据可以写成一个简单的链表。 ，它也可以是一个对象。
// 这种形式的data默认每一项经纬度
data: [
[12,32],
[43,23],
[123,43]
]
这里我们不仅需要经纬度，还需要城市名称和城市污染程度，所以可以写成一个对象，从网上随机找到三个城市的坐标。
默认情况下，图表会将前两项值读取为纬度和经度坐标，因此您可以看到这些点已经出现在地图上。
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的空对象提示框已经生效了，但实际上数据显示是有问题的。 默认显示的是值中的第二项（纬度），而不是我们真正需要显示的第三项。 污染程度，还想在提示框中添加自定义跳转链接。 （这里有个小坑，echarts官网两个类似的地图例子中，标记点的数据显示也是经度，而不是实际显示的数据。）
您可以通过工具提示下方的格式化程序自定义提示框的内容。 当formatter为函数时，可以接收一个参数，从参数中可以获取当前坐标点的信息。
var option = {
title: {
text: '中国空气质量',
left: 'center'
},
// 自定义提示框内容
tooltip: {
formatter: function(params) {
var value = params.value;
var 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 = '
查看详情'
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]
}
]
}
]
}
此时数据显示正确，也实现了点击跳转功能。 根据污染程度显示不同颜色的标记点还是有点不一样的，所以我们又要回到系列的数据配置项了。
itemStyle可以配置每个数据的显示风格，color代表点的颜色。 和前面提示框中的formatter类似，也可以写成函数来获取每条数据的内容，只要根据不同的值返回不同的颜色值即可。 。
var option = {
title: {
text: '中国空气质量',
left: 'center'
},
tooltip: {
alwaysShowContent: true,
enterable: true,
formatter: function(params) {
var value = params.value;
var 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不久，如有错误请强调，最后附上完整代码
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
地图标注
<div id="china" style="width: 900px; height: 600px">
发表评论