前言

通过一个简单的案例希望能够帮助像我一样刚接触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>