Echarts3里的地图标记点事件效果实现

写这个文章的时候真的是怕自己忘了，这个问题解决起来对我来说是真的不容易。

近期换了家公司，里面的项目涉及到地域数据统计，所以用到了echarts的地图功能，早期版本用的是echarts2，使用了map统计方式后，在地图上增加了“总部”标记，于是采用了markPoint的属性来实现，一切正常，当鼠标移动到标记上以及点击标记的时候，会有事件触发，一切看起来都比较正常。

后来系统升版，有个柱状统计图需要用到3D圆柱的特效，但echarts显然实现不了，可客户却一定要坚持，还给出了示例。没办法，我只好去找echarts的官方api，看看有有没有好的方法，实在不行就只能换个别的工具了。果然，在echarts3的介绍里我发现了pictorialBar这个新增的样式，于是我将客户提供的圆柱形示例图截取了一部分采用这个方式实现了效果，基本算是过关了。但这样一来遇到了新的问题。

原来的地图标记功能，在echarts2的时候，采用markPoint实现没什么问题，但换成echarts3后发现，同样是markPoint，在地图上标记了之后，鼠标移动和点击事件统统无效了！应该是被地图给覆盖掉了。这下麻烦了，本来最简单的方法就是echarts2和echarts3混用，但我不信邪，既然是高一个大版本，那么echarts3肯定有解决的方法的！于是我开始一点点试了起来：

1、采用分层

在echarts的地图设置属性里，有z和zlevel的属性，根据描述，这两个属性都是用于不同地图分层的优先级的，就是我们常说的z轴，值大的会覆盖掉值小的。于是我将markPoint的z和zlevel调大，看看是否可以将事件优先级调高，结果没有任何反应——失败；应该是z和zlevel不适用于markPoint；

2、地图叠加

在网上看到一些文章，好像是可以两个相同的地图叠加到一起实现这个效果，于是我用了两个map，第二个map只有markPoint的设置，叠加到第一个map上，结果却还是没有时间触发——失败；应该也可能只是在echarts2里有效；

3、散点图与地图叠加

仔细看了看官方api，发现了这么一句话

Tip: ECharts 2.x 中在地图上通过 markPoint 标记大量数据点方式在 ECharts 3 中建议通过地理坐标系上的 scatter 实现。

难道说这就是替代的方式？我决定试一下。

具体代码不贴了，主要设置如下：

geo属性设置好地图种类；

series里，第一组为散点图，type: 'scatter'，coordinateSystem: 'geo',data里将“总部”的地理坐标写入；第二组为普通地图，type:'map'，mapType:'已经加载的地图'，但要增加一个属性：geoIndex，设置为0，意味着要跟前面的散点图使用同一个geo；

设置好了后，发现在地图上看不到“总部”这个点了！这是什么情况？难道这也不行？我不甘心地用鼠标在地图上来回滑动，突然间在“总部”的那个地理坐标上出现了事件触发！这是个好现象，说明散点图与地图叠加是有效的！但为什么看不到呢？——失败一半；

4、检查尝试

我又回到了之前的思路，想想会不会也是因为z和zlevel的原因，因为这次不是markPoint了，所以会不会有效呢？结果设置了z和zlevel也白扯，看来不是这个问题；

我又看了看symbol这个属性，echarts提供了一些基本的形状，如圆形，三角形等等，当然也可以是一些图片。于是我试着将symbol设置了一个自定义图片，结果让我比较欣慰：能看到了！当然“总部”这两个汉字label还是看不到，但至少说明散点图与地图叠加是可以的！这时候我已经有点眼花了，甚至想想放弃了，直接用图片做个标记点也挺好，但我又不甘心，一定要弄出来和原来的echarts2一样的效果！——失败三分之一——还是失败；

5、意想不到

我静下心来想了想，图片可以显示，基本的形状和文字却不行，那么它们之间的区别是什么呢？颜色！基本形状和文字都可以自定义颜色，而图片却不行，但我看了看设置，地图底色是蓝的，标记点设置的是红的，再怎么着也不可能混一起吧？我不死心，又检查了下其他的地方。这时，我发现了一个属性：visualMap，这个属性本来是一个颜色渐变的特效，用颜色的不同来直观地展示数据的不同，so？散点图里的点，也是被visualMap控制的！所以，就被湮没在其他的颜色里，看不出来了。想到这里，我又仔细查看了visualMap的设置，看看能不能找到解决办法，果然有了结果：

在 visualMap 组件所控制的 series 中，如果 series 中某个数据项需要避开 visualMap 映射，可以这么配置：

series : [ {name: 'Shanghai', value: 251}, {name: 'Haikou', value: 21},  

// 设置 `visualMap: false` 则 visualMap 不对此项进行控制，此时系列  

// 可使用自身的视觉参数（color/symbol/ ...控制此项的显示。  

{name: 'Beijing', value: 821, visualMap: false}, ... ]

按照这个要求，我把“总部”里的visualMap设置为false之后，一切都结束了！这个世界又变美好了！

总结：echarts的强大功能是毋庸置疑的，而且对于低版本的功能实现，高版本基本都应该会支持，可能只是实现方式变了。就好像我们常用的java编程一样，jdk里总有一些过时的方法，但同时总会有替代的方法和接口来实现相同的甚至比以前更强大的功能。就好像这个echarts3里的散点图一样，可以有更多的以前markPoint没有的设置，请大家慢慢发掘吧。