内容:
上周为了搞那个地图交互，我几乎把头发都薅秃了。老板说要在地图上实现点击某个省份，然后高亮显示，并且弹出一个详情框。听起来简单吧？我也以为很简单，直到我真正打开 ECharts 的文档，看着那一堆参数发呆。今天不整那些虚头巴脑的理论，直接聊聊我是怎么解决 echarts geo 选中 这个问题的，希望能帮兄弟们省点时间。
最开始，我天真地以为只要给 series 加个 selectedMode: 'single' 就万事大吉了。结果呢？地图确实能选中，但那个高亮效果丑得让人想哭，而且点击之后，其他省份的状态完全没反应，就像死了一样。更离谱的是，我想获取选中的省份名称，结果 event 对象里居然找不到我想要的 name 属性，查了半天文档才发现，geo 组件和 series 的选中逻辑是分离的。
后来我换了个思路，不再依赖默认的选中模式，而是手动监听 click 事件。这一步是关键。我写了一个简单的监听器，当用户点击地图时，触发一个函数。在这个函数里，我首先得搞清楚当前点击的是哪个区域。这里有个小坑，就是 event.name 有时候会返回 null，特别是当你缩放或者平移地图后，坐标映射可能会出错。所以我加了一个容错处理，如果拿不到 name，就直接 return，避免报错。
接下来就是核心的 echarts geo 选中 逻辑实现。我不能直接修改 option，因为那样会导致图表重绘，体验很差。正确的做法是利用 dispatchAction。我定义了一个变量来记录当前选中的省份，默认是 null。当用户点击时，我先取消之前的选中状态，再设置新的选中状态。代码如下：
myChart.dispatchAction({
type: 'geoSelect',
seriesIndex: 0,
name: event.name
});
这里要注意，seriesIndex 一定要对应你的 geo 系列，不然选中会失效。我一开始就是这里搞错了，找了半天才发现是索引不对。还有一个细节，就是取消选中。如果用户点击空白处，或者点击另一个省份，之前的选中状态必须清除。我在点击事件中加了一个判断，如果 event.name 存在，就执行选中；否则，执行 geoDeselect。
当然，光有高亮还不够，老板还要求显示数据。我利用 getSelected() 方法获取当前选中的区域名称，然后通过 AJAX 请求后端接口获取数据，最后更新到一个浮层里。这个过程里，我遇到一个很尴尬的问题，就是浮层的位置计算。一开始我直接用鼠标坐标定位，结果在移动端上完全错位。后来我改用 ECharts 提供的 convertToPixel 方法，将经纬度转换为屏幕坐标，这样无论怎么缩放平移，浮层都能精准定位。
说实话，这个过程挺折磨人的。特别是当你在调试 echarts geo 选中 效果时，浏览器控制台偶尔会蹦出一些莫名其妙的警告，比如“invalid data”，这时候你只能一点点排查数据格式。我的 JSON 数据里，有些省份的名字和地图数据里的不一致，比如“重庆市”和“重庆”，这就会导致选中失败。所以我最后写了一个清洗函数，统一了所有省份的名称格式。
现在，当我再次运行代码，点击地图上的省份，那个柔和的高亮效果出现，数据平滑过渡，心里那种成就感真的无法言喻。虽然代码里可能还有一些不够优雅的地方，比如那个容错处理写得有点啰嗦，但功能确实跑通了。
如果你也在纠结 echarts geo 选中 的问题，记住两点：一是别迷信默认配置，手动控制更灵活；二是注意数据的一致性，名字对不上，一切都是白搭。希望我的这点经验能帮到你，毕竟，踩过的坑，希望能成为你路上的垫脚石，而不是绊脚石。加油吧，程序员们！
