如何处理 Echarts 中的地图散列点点击事件

Echarts 是百度比较成功的一个开源图形库，现在国内很多公司和项目都使用它。今天介绍一下基于 Echarts 3.0，如何处理地图散列点的点击事件。

问题介绍

我们想在地图上处理散列点（图中红点）的点击事件，比如点击某个点的时候弹出一个 Modal 框，或者跳转一个新页面什么的。但是 Echarts 提供给我们的事件 API 非常有限，就只有一个比较笼统的click事件 API，我们如何通过这个 API 来实现我们需要的效果呢？

地图散列点效果

首先我们来看下实现该图形的核心代码，如下所示：

const options = {
  series: [
    {
      name: 'foo',
      type: 'map',
      geoIndex: 0,
      data: [/* 地图相关数据 */],
      zlevel: 3,
    },
    {
      type: 'effectScatter',
      animation: false,
      data: [/* 散列点数据 */],
      coordinateSystem: 'geo',
      showEffectOn: 'render',
      rippleEffect: {
        scale: 5,
        brushType: 'fill',
      },
      itemStyle: {
        normal: {
          color: 'red',
          shadowBlur: 10,
          shadowColor: 'red',
        },
      },
      zlevel: 1,
    },
  ],
};

这里主要列出 Echarts 里面的 options 参数，对 Echarts 开发比较熟悉的同学应该会知道，options 是每个 Echarts 图形的配置对象。

上面代码显示了中国地图各个省份的指数分布，另外还显示了一些地图上的散列点，所以这里面有 2 种不同类型的数据。

可以看到 options 里面 series 属性包含了 2 种对象，一种 type 是map的对象，表示地图各个省份的指数分布；另外一种对象的 type 是effectScatter，表示的是地图上面的散列点。

Echarts 的点击事件

然后我们再来看 Echarts 的点击事件，官方代码如下：

1
2
3

myChart.on('click', function (params) {
  // 点击事件操作
});

对，就只有一个click事件，没有针对不同类型图形的点击事件。

我们可以试用一下这个点击事件，看看里面的params参数能不能对我们有所帮助？下面是一个点击全国地图某省份事件的params参数：

params: {
    componentSubType: "map",
    componentType:"series",
    data: {name: "西藏", value: 75},
    dataIndex:27,
    name: "西藏",
    seriesId: "0",
    seriesIndex: 0,
    seriesName: "foo",
    seriesType:"map",
    type: "click",
    value: 75,
}

可以看到这个对象里面包含了很多属性，有类型、数据对象，系列名称、值等，但这里面看不出有什么是我们需要的。

那我们再来看下点击了某个散列点后的参数，看看有什么不同。

params: {
    componentSubType : "effectScatter", 
    componentType : "series",
    data : {name: "point1", value: Array(3)}, 
    dataIndex : 0, 
    name : "point1",
    seriesId : "-0", 
    seriesIndex : 1, 
    seriesName : "-", 
    seriesType : "effectScatter", 
    type: "click", 
    value:[125.03, 46.58, 20], 
}

对比发现，我们可以通过seriesType知道是哪种类型数据的点击事件，或者通过seriesIndex也可以知道。

然后通过dataIndex我们可以得到数据在原始数组中的位置，或者直接通过data和value来直接获取点的相关数据。

根据参数判断是哪种图形的点击事件

其实饶了这么一大圈就是想让大家知道，我们可以在click事件中，通过这些参数来判断哪种图形的点击事件是我们想要处理的，如果不是我们需要处理的点击事件，我们直接跳出函数就可以了。示例代码如下：

myChart.on('click', function (params) {
  const { seriesIndex, seriesType } = params;
  // 方法一：通过 seriesIndex 来判断，map 类型的 seriesIndex 为 0
  if (seriesIndex === 0) return;

  // 方法二：通过 seriesType 来判断
  if (seriesType === 'map') return;

  // 通过上面判断逻辑走到这里的就是散列点的事件了
});

缺点分析

虽然这个方法可以解决问题，但是有个不好的地方需要指出，就是点击散列点的时候，鼠标点击的位置必须非常准确，要点击散列点的中心位置才能捕获到该类型事件，否则看起来就像点击没有效果一样。

Echarts 的地图数据

另外在这里提示一下，很多同学可能以为 Echarts 的地图数据不能下载了，因为 Echarts 的官方网站上也是这么写的，但是 Echarts 的 github 项目中并没有删除这些数据 (见这里)，所以大家不要被 Echarts 忽悠了😄。

这些数据包括js和json两种格式的，内容包括中国地图及各省份的地图。

总结

文章介绍了处理 Echarts 地图散列点事件的方法，如果大家有更好的方法，希望留言一起讨论，最后附上文章相关的在线 Demo 例子。本文的 Demo

Hacker and Geeker's Way