ECharts5 实现地图旅行足迹标记

在《ECharts5 实现掘金数据中心折线图》中介绍了如何使用 ECharts（5.4版本）制作折线图，今天我将通过 ECharts 来实现一个中国地图，并且可以点击标记曾经去过的省份或地区。

注册地图

实现地图和折线图的基本步骤类似，这里直接讲不同点，就是在 setOption 之前，需要使用 echarts.registerMap 注册地图：

echarts.registerMap('china', china_geojosn)

china_geojosn 为 GeoJSON 格式的数据：

获取 GeoJSON

GeoJSON 是一种用于编码各种地理数据结构的格式。我们可以从一些网站去获取对应地区的 GeoJSON：

• datav.aliyun.com/portal/scho...

我定义的 china_geojosn 的数据就是在该网站点击如下图箭头所示的按钮复制得到的：

• github.com/echarts-map...

里面有中国各个省份的 GeoJSON 数据：

直接使用 js 文件

可以看到，除了有提供 geojson 数据，还有直接提供 js 文件的，比如我下载了 china.js，其内容大概如下：

!(function (e, t) {
  'function' == typeof define && define.amd
    ? define(['exports', 'echarts'], t)
    : 'object' == typeof exports && 'string' != typeof exports.nodeName
    ? t(exports, require('echarts'))
    : t({}, e.echarts)
})(this, function (e, t) {
  var o = function (e) {
    'undefined' != typeof console &&
      console &&
      console.error &&
      console.error(e)
  }
  t
    ? t.registerMap
    ? t.registerMap('china', {
      // geoJSON
    })
    : o('ECharts Map is not loaded')
    : o('ECharts is not Loaded')
})

这是一个立即执行的函数表达式 !(function() {})()，我对其中的代码做些解释：

• 执行函数首先会执行 'function' == typeof define && define.amd， 用于检查当前环境是否支持 AMD (Asynchronous Module Definition) 模块定义方式，像我们直接新建了个简单的 html 文件做的小练习显然是不支持的；
• 继而就会执行 'object' == typeof exports && 'string' != typeof exports.nodeName，检查了 exports 对象的类型以及它的 nodeName 属性，目的在于判断当前环境是否是 Node.js，我们直接在浏览器运行 html 文件，所以返回的还是 false；
• 那么就会执行 t({}, e.echarts)，t 就是传给立即执行函数的第 2 个参数：

e 就是 this，此处指向 window。也就是说该 js 文件最终执行的函数就是上图中虚线所示的函数，参数为 {} 和 window.echarts，执行的目的就是通过 echarts.registerMap 注册了名为 'china' 的地图，所以如果我们直接引入的是 js 文件，那么就不需要再自己写一遍注册地图的代码了。

配置 option

有 2 种方式可以配置制作地图：

1. 同制作折线图一样配置 serise：

const option = {
  series: [
    {
      type: 'map',
      map: 'china'
    }
  ]
}

2. 我采用的方式是配置 geo 对象，geo.map 的值即为 registerMap 传入的第 1 个参数，也就是地图的名字：

const option = {
  geo: {
    map: 'china'
  }
}

这样我们就能得到一个中国地图了：

默认样式

我们修改一下地图的默认颜色，并让地图可以通过鼠标缩放与移动：

const option = {
  geo: {
    map: 'china',
    roam: true, // 鼠标控制缩放和移动
    itemStyle: {
      areaColor: '#092D3D', // 暗蓝色
      borderColor: '#337AB7' // 浅蓝色
    }
  }
}

现在实现的地图效果如下：

高亮样式

接着通过 geo.emphasis 调整鼠标悬浮时的高亮配置：

const option = {
        geo: {
          // ...
          emphasis: {
            itemStyle: {
              areaColor: '#B03A5B', // 酒红色
              borderColor: '#fff'
            },
            label: {
              fontSize: 8,
              color: '#FAC858' // 黄色
            }
          }
        }
      }

让高亮时的区域颜色改为酒红色，区域边界改为白色，标签改为黄色：

选中样式

让 geo.selectedMode 为 'multiple' 使得地图变为支持多选的模式，然后通过 geo.select 配置选中时的区域样式即可：

const option = {
  geo: {
    selectedMode: 'multiple', // 支持多选
    select: {
      itemStyle: {
        areaColor: '#B03A5B', // 酒红色
        borderColor: '#fff'
      },
      label: {
        show: false
      }
    }
  }
}