搞了十三年GIS和前端可视化，今天不整那些虚头巴脑的理论。直接说重点，这篇就是教你怎么把你自己画的geojson或者现成的地图数据，在echarts里把数据漂亮地展示出来。很多兄弟问，为什么我导入geojson后地图是黑的？或者数据点死活对不上位置？看完这篇，你至少能少熬两个通宵。

说实话，echarts的geo配置是个大坑。尤其是当你不想用官方内置的那些省市区json，而是想用自己画的或者从其他平台导出的geojson时，问题一堆。我上周帮一个客户做项目，他们有个特殊的工业园区地图，官方库里根本没有。他们自己用CAD转的geojson，结果放上去全是乱的。

首先，你得确认你的geojson格式对不对。别拿个shapefile直接扔进去，echarts不认。必须转成标准的geojson格式。这里有个小细节，很多新手容易忽略，就是坐标系。如果你的原始数据是WGS84，而echarts默认也是WGS84，那还好。但如果你用了某些国内地图服务转换过的坐标，比如GCJ02，那直接放上去，位置偏移得亲妈都不认识。

我在处理那个园区地图时，发现最大的问题不是坐标，而是数据的映射。echarts利用画好的geo放数据，核心在于series里的data数组。你要确保data里的每一项，都有一个name字段，这个name必须和你geojson里features里的properties.name完全一致。哪怕差一个空格，或者大小写不同，数据就匹配不上。

举个例子，我那个客户的园区，有个地块叫“A区”，但在geojson里写的是“a区”。结果数据死活显示不出来。我查了半小时，才发现是大小写问题。这种低级错误，真的让人抓狂。所以，一定要仔细核对name字段。

还有一个常见的问题是，地图背景是黑的，或者颜色不对。这通常是因为series里的itemStyle配置没写好。你需要显式地设置fill颜色，否则echarts可能默认透明或者黑色。特别是当你叠加了散点图或者热力图的时候，底图的颜色设置很容易被覆盖。

我在做那个项目时，还遇到一个奇葩问题，就是地图缩放后，数据点的位置会漂移。这是因为geojson的精度问题。有些geojson为了减小体积，简化了路径，导致坐标精度丢失。解决办法是，尽量使用高精度的geojson源，或者在echarts配置里调整visualMap的精度。

另外，别忘了加个tooltip，不然用户根本不知道鼠标指的地方是哪。tooltip的配置也很简单，formatter函数里可以自定义显示内容。比如，我想显示园区的名称和当前的产量，就可以这样写：

formatter: function(params) {

if (params.seriesType === 'scatter') {

return params.name + '
产量: ' + params.value[2];

}

return params.name;

}

这样，当鼠标悬停在散点上时，就能显示具体的产量数据。

最后，我想说的是，echarts利用画好的geo放数据，其实并不难，难的是细节。你要耐心地去调试，去核对每一个字段。别指望一次就能成功，多试几次，总能找到问题所在。

如果你还在为geojson导入问题头疼，或者数据匹配不上，别自己死磕了。有时候，旁观者清。你可以找有经验的人帮你看看代码，或者提供一下你的geojson样例，也许我能一眼看出问题所在。毕竟，我在这行摸爬滚打十三年，见过的坑比你吃过的米都多。

别犹豫，有问题直接来问。我不收咨询费，但如果你认可我的经验，可以请我喝杯咖啡。咱们一起把这个问题解决掉。

本文关键词：echarts利用画好的geo放数据