做前端可视化，最怕的不是代码报错，而是地图根本渲染不出来。
或者渲染出来了，坐标对不上，歪七扭八的。
我最近接了个单子，客户要求用echarts geo组件做全国物流热力图。
预算不高，工期紧。
我也没敢接太复杂的，选了最基础的散点加地图。
结果第一天就卡住了。
很多人不知道，ECharts 5之后，地图数据不再内置了。
你得自己去下载GeoJSON。
别去网上随便搜个“中国地图json”，很多都是过时的。
比如有些旧资源，还是按2015年的行政区划画的。
新疆、西藏那些边界，跟现在完全对不上。
我这次用的数据源，是阿里云DataV的GeoAtlas。
这个比较稳，更新也及时。
下载下来，大概2MB左右。
解压后，里面有好几个文件。
别急着全塞进代码里。
你只需要你关心的省份或者全国聚合数据。
我选了china.json，大概300KB。
加载速度快，浏览器不卡顿。
接下来是配置项。
很多新手在这里犯迷糊。
series里type写成了'map'。
记住，用geo组件的话，series里的type必须写'effectScatter'或者'scatter'。
千万别写map，写了就白搭。
geo组件负责画底图，series负责画点。
这是两个独立的层。
配置geo的时候，map属性要填'china'。
这个'china'必须跟你加载的GeoJSON里的id完全一致。
大小写都不能错。
我上次就因为这个，找了半天bug，最后发现是json里id多了一个空格。
这种低级错误，真的让人想砸键盘。
还有，坐标转换是个大坑。
GeoJSON用的是WGS84坐标系，也就是经纬度。
但有些旧数据，可能是GCJ02，也就是火星坐标。
直接画上去，整个地图会偏好几公里。
我这次用的物流数据，是GPS直采的，所以是WGS84。
不用转换，直接扔进去就行。
如果客户给的是高德或百度的数据，那你得先做偏移处理。
这一步很麻烦，建议用现成的转换库。
别自己写算法，容易算错。
价格方面，如果你找外包做这种定制化地图。
简单版，带基础交互的，大概2000到3000块。
复杂版，带3D效果、动态路径的，起步5000。
别信那些几百块包干的，肯定是套模板。
模板里的地图数据，往往也是旧的。
我自己写，大概花了半天时间。
主要是调试样式和动画效果。
geo组件有个属性，roam。
设为true，就可以缩放和平移。
这个很实用，用户想看细节，可以放大。
但要注意，缩放级别太高，点会重叠。
这时候要用visualMap来控制颜色深浅。
或者用symbolSize来动态调整点的大小。
我这次用了visualMap，把物流量大的城市标红。
效果很直观，老板一眼就能看出问题在哪。
还有一个小细节，tooltip。
默认提示框有点丑。
我自定义了formatter函数。
加了换行，加了图标，看起来专业点。
虽然只是小改动，但用户体验提升很大。
最后，性能优化。
如果数据量超过1000个点，页面会卡。
这时候要开启large属性。
或者使用canvas渲染。
默认是svg，大数据量下，canvas性能更好。
我测试了一下，1000个点，canvas比svg快大概30%。
这点提升，在汇报演示的时候，很重要。
别让客户觉得你的系统很卡。
总结一下。
用echarts geo组件，核心就三点。
数据源要新，坐标要对，配置要准。
别怕麻烦，前期多花点时间调试。
后期能省很多心。
希望这篇经验能帮到你。
少走弯路，早点下班。
本文关键词：echarts geo组件
