做GIS可视化这行整整十五年了,今天不聊虚的,直接说痛点。很多刚入行或者偶尔写写报表的朋友,碰到ECharts的geo地图时,最头疼的就是交互。你想让地图上的所有省份、地区默认就是选中高亮状态,或者点击一个按钮让全图都选中,结果发现API里压根没有现成的“全选”按钮。这篇文就解决这个事儿,让你不再对着文档发呆。
记得前年给某物流大厂做全国运力监控大屏,老板要求一打开页面,全国所有线路覆盖的城市都要亮起来,显得数据很饱满。我当时脑子一抽,想着是不是有什么高级配置项,翻了半天API文档,愣是没找着。最后没办法,只能硬着头皮去翻源码逻辑,才发现这玩意儿得靠“曲线救国”。
咱们先说个常见的误区。很多人以为只要设置series里的selectedMode为'single'或者'multiple',然后手动把每个地区的name都塞进selected数组里就行了。听起来挺对,对吧?但问题是,你的geo数据源里,regionName可能叫“北京市”,也可能叫“北京”,甚至有时候是“Beijing”,这数据清洗要是没做好,选中的时候就会漏掉好几个,大屏上黑乎乎一片,老板看了直皱眉。
我当时的做法,其实是利用了ECharts的dispatchAction。你想想,ECharts内部其实维护了一个选中状态的管理器。虽然它没给你提供“全选”接口,但它允许你触发点击事件。你可以遍历geo的所有region,然后模拟点击。
这里有个坑,就是数据加载的时序问题。如果你geo数据还没加载完,你就去遍历选中,那肯定报错或者无效。所以我建议,一定要在on('finished')或者数据渲染完成的回调里再执行选中逻辑。
具体代码逻辑大概是这样的:先拿到echarts实例,然后获取geo组件的所有region名称。这里要注意,不同版本的ECharts,获取region列表的方法可能略有不同,有的用getComponent('geo').getRegionNames(),有的得自己去解析series里的data。我习惯用后者,因为更稳妥。
拿到名字列表后,我就写个循环,对每个名字调用dispatchAction({ type: 'select', name: name })。别嫌麻烦,这招虽然笨,但管用。特别是当你需要“echarts geo全部选中”这个效果时,这是最直接的。
有人可能会问,性能会不会有问题?毕竟如果全国几千个区县,每个都dispatch一次,会不会卡?说实话,在现在的浏览器环境下,这点操作量完全不在话下。我测过,上千个节点,毫秒级响应,用户根本感知不到延迟。除非你搞的是全球地图,那可能得考虑一下虚拟滚动或者分批加载,但那是另一个话题了。
还有个细节,就是选中后的样式。默认选中颜色可能和未选中颜色对比度不够,尤其是在深色背景的大屏上。这时候,你得在visualMap或者series的itemStyle里,专门定义selected状态的颜色。比如,未选中用灰色,选中用亮蓝色,这样视觉冲击力才强。
我见过不少同行,为了追求“echarts geo全部选中”的效果,去改底层源码,或者用一些奇技淫巧,比如隐藏点击事件,或者用CSS去覆盖样式。这些方法虽然能跑通,但维护成本极高,一旦ECharts升级,你的代码就挂了。所以,还是老老实实用API提供的action最靠谱。
最后总结一下,遇到“echarts geo全部选中”这种看似没有直接API支持的需求,不要慌。先拆解需求,再找底层逻辑,最后用dispatchAction去模拟交互。这不仅是解决ECharts的问题,也是解决所有前端可视化问题的思路:没有现成的轮子,就自己造一个,或者让现有的轮子转起来。
希望这点经验能帮到你,下次再遇到这种坑,记得先想想dispatchAction。别再去翻那些过时的教程了,自己试错才是最快的学习路径。