做数据可视化这行，最烦的就是坐标对不上。
你明明看着地图上的点，
位置挺准啊。
可一渲染到网页上，
全跑到太平洋去了。
或者缩成一个小黑点，
根本看不清在哪。
我折腾了大半年，
才摸出门道。
今天不整那些虚的，
直接说干货。
很多人第一步就错了。
以为直接拿经纬度丢进去就行。
百度地图的坐标，
和echart用的，
根本不是一个体系。
你直接用百度的gcj02，
去画echart的geo，
那偏差能大到离谱。
大概几百米起步。
要是做精细的业务展示，
比如门店定位，
这误差客户能把你骂死。
所以，得先搞清坐标系。
常见的有wgs84，
gcj02，bd09。
echart官方文档里，
默认支持的是wgs84。
也就是国际通用的标准。
如果你手里是百度地图的数据，
必须得转。
别偷懒，
别想着大概齐就行。
转错了，后面全是bug。
有个现成的转换工具，
网上很多，
自己搜搜看。
把gcj02转成wgs84，
这一步不能省。
再来说说geojson。
很多人觉得这玩意儿复杂，
懒得弄。
直接硬编码坐标。
大错特错。
一旦地图边界稍微有点变动，
你就得改代码。
维护起来简直是噩梦。
最好还是用geojson文件。
去下标准的省市区边界。
注意，
要下最新的。
别用几年前的老数据，
行政区划早变了。
比如撤县设区，
名字都改了，
你还用旧的，
数据就对不上了。
还有个坑，
就是缩放级别。
你在本地预览，
看着挺清楚。
一部署到服务器，
或者换个分辨率高的屏幕，
地图就糊了。
或者点太小，
看不见。
这时候，
得调整series里的symbolSize。
别写死一个固定值。
根据数据量动态调整。
数据多的时候，
点要小，
不然全重叠在一起，
变成一团马赛克。
数据少的时候，
点要大，
不然用户找不到北。
另外，
tooltip的显示也要优化。
默认的那个样式，
太丑了，
还挡视线。
自己写个css。
加点阴影，
圆角，
字体调大点。
用户体验这东西，
细节决定成败。
还有，
加载速度。
geojson文件如果太大，
比如把全国每个村都标出来，
浏览器直接卡死。
别贪多。
按需加载。
或者用webgl渲染。
echart5支持webgl，
性能提升不止一点点。
但要注意兼容性。
老版本的浏览器，
可能不支持。
得做降级处理。
实在不行，
就简化数据。
聚合显示。
把附近几个点，
合并成一个。
点击再展开。
这样既清晰，
又流畅。
最后，
测试一定要充分。
不同浏览器，
不同设备。
手机上看，
平板上看，
大屏上看。
坐标可能会因为屏幕比例，
产生细微的偏移。
这时候，
得用transform去微调。
或者重新计算中心点。
别指望一次成型。
这活儿，
就是磨出来的。
我见过太多同行，
为了赶工期，
随便找个demo改改就上线。
结果上线第一天，
就被投诉坐标偏移。
返工的成本，
比当初多花两天时间调试，
要高得多。
所以，
别怕麻烦。
把基础打牢。
echart geo坐标网页坐标 这东西，
看似简单，
水挺深。
多踩几个坑，
你就成专家了。
记住，
数据准确是底线，
体验流畅是上限。
两头都得顾。
别光盯着代码看，
多看看实际效果。
站在用户的角度，
去审视每一个像素。
这样做出来的东西，
才叫作品。
不然，
那就是堆砌代码。
没人会买账。
好了，
就说这么多。
希望能帮到正在踩坑的你。
如果有更奇葩的问题，
欢迎评论区聊聊。
大家一起避坑。
