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

最新推荐文章于 2024-07-19 14:08:52 发布

garson328

最新推荐文章于 2024-07-19 14:08:52 发布

阅读量2.1w

点赞数 1

文章标签： Echarts3markpoint事件 api 地图鼠标

本文链接：https://blog.csdn.net/garson328/article/details/55259530

版权

本文讲述了在升级到Echarts3后，如何解决地图标记点的鼠标事件失效问题。作者通过尝试调整z和zlevel属性、地图叠加、散点图与地图叠加等方法，最终通过设置visualMap为false成功使事件生效。提醒读者Echarts新版本通常有替代旧功能的新方法。

摘要由CSDN通过智能技术生成

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

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

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

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