做地图可视化这行十五年，我见过太多人死磕echarts点击事件获取geo，结果不是报undefined就是拿不到坐标。这篇不整虚的，直接告诉你怎么从geojson里把点击的省份或城市数据扒出来，解决你项目里“点了没反应”或“数据对不上”的头疼事。

记得前年给某物流大厂做全国运力监控大屏，客户非要实现点击省份弹出详细数据。当时我用了最基础的click事件，结果发现点击边缘地区经常失灵，或者拿到的seriesIndex全是-1。为啥？因为很多人没搞懂geo和series的关系。geo是底图配置，series是数据层，你如果只监听geo的click，很多时候拿不到具体的数据项，特别是当你的地图是散点图或者折线图叠加在geo上的时候。

咱们得换个思路。真正的echarts点击事件获取geo，核心在于理解event对象。当你点击地图时，echarts抛出的event里有个componentType字段。如果是点击的地图块，componentType通常是'geo'或者'series'。这里有个大坑：很多新手直接用event.data，结果发现是undefined。这是因为geo本身不存数据，数据在series里。所以，正确的做法是先判断componentType，如果是'geo'，你要去series里找对应的name。

我有个真实案例，某电商公司做区域销售地图。他们最初代码里直接写myChart.on('click', function(params){ console.log(params.name) })。结果测试时发现，点击某些省份返回null。查了半天，发现是他们的geo配置里，selectedMode设成了single，而series里的data没有完全匹配geo里的name。这时候，你得用event.name去匹配series.data里的item。

别信网上那些复制粘贴的代码，大部分都没经过生产环境考验。我现在的标准写法是：先注册click事件，然后判断params.componentType。如果等于'geo'，说明点的是地图本身。这时候，你需要通过params.name去遍历series.data，找到对应的那条数据。如果等于'series'，说明点的是上面的散点或标记，直接取params.data就行。

这里再分享个避坑细节。很多geojson文件里的name和echarts默认的不一样。比如官方geojson里叫“新疆维吾尔自治区”，你后台数据库里叫“新疆”。这时候echarts点击事件获取geo就会失效。解决办法是在series.data里，手动给每个item加一个name字段，强制和geojson里的name对应起来。虽然麻烦点，但一劳永逸。

还有，性能问题也得考虑。如果你的geojson特别大，点击事件响应会变慢。这时候可以用canvas模式渲染，或者简化geojson的精度。别为了追求地图好看，把省份边界画得跟艺术品似的，用户点击时卡半天，体验极差。

最后，代码片段我直接贴出来，别光看不练。

`javascript

myChart.on('click', function (params) {

if (params.componentType === 'geo') {

// 这里才是echarts点击事件获取geo的核心

// 通过params.name找到对应的series数据

var seriesIndex = params.seriesIndex;

var name = params.name;

console.log('点击了地图区域：', name);

// 后续逻辑：根据name去请求后端接口或展示弹窗

} else if (params.componentType === 'series') {

console.log('点击了数据点：', params.data);

}

});

`

别总觉得技术难，其实就是逻辑没理顺。你多试几次，把event对象打印出来看看，里面啥都有。别怕报错，报错才是进步的开始。这行干久了，你会发现，所谓的“高级技巧”，都是把基础东西玩明白了。希望这篇能帮你省下加班时间，早点回家陪老婆孩子。