做数据可视化的朋友，应该都懂那种痛苦。
网上找的地图，要么太粗糙，要么根本不对。
比如你想画个自己公司的园区，或者某个特定的行政区。
这时候，默认的地图根本帮不上忙。
很多人第一反应是去网上搜现成的json文件。
但你会发现，很多小众区域根本找不到。
或者找到了，格式还不对，加载报错。
别急，今天咱们就聊聊，echarts中如何生成自定义geo。
其实核心就两步：准备数据，然后配置。
先说数据。
你需要一个GeoJSON文件。
这个文件长什么样？
简单来说，它描述了地图的边界。
比如一个多边形，由很多个点组成。
每个点有经纬度。
把这些点连起来，就是一个区域。
你可以用ArcGIS、QGIS这些工具导出。
或者，如果技术够硬，自己写代码生成。
对于大多数开发者来说，用现成的工具导出最省事。
记得导出格式一定要选GeoJSON。
别导成Shapefile，那个echarts不认。
拿到json文件后，怎么加载？
有两种方式。
第一种，本地加载。
把json文件放在项目目录下。
然后用jQuery或者fetch去请求它。
拿到数据后，在echarts的option里注册。
代码大概长这样：
$.get('map.json', function (geoJson) {
echarts.registerMap('customMap', geoJson);
// 然后配置series
});
第二种，在线加载。
把json文件传到服务器或者OSS上。
直接给registerMap传URL。
echarts会自动去请求。
这种方式更灵活，适合动态地图。
但要注意跨域问题。
如果跨域没处理好，地图就是白的。
接下来，重点来了。
很多人卡在坐标转换上。
GeoJSON用的是经纬度。
但有时候你的数据是平面坐标。
或者你想把地图旋转、缩放。
这时候，需要调整series里的map属性。
比如：
series: [{
type: 'map',
map: 'customMap',
roam: true, // 允许缩放和平移
zoom: 1.2, // 初始缩放比例
label: {
show: true
}
}]
这里有个坑。
就是label的位置。
默认情况下，文字可能显示不全。
你需要调整label的position。
或者，把textStyle里的fontSize调大点。
不然在手机上根本看不清。
再说说数据映射。
生成了自定义geo，怎么把数据填进去？
比如你想展示每个区域的销售额。
你需要一个value数组。
这个数组的顺序，要和json里的features顺序一致。
这点非常重要。
一旦顺序错了，数据就乱套了。
比如第一个区域对应第一个值。
第二个区域对应第二个值。
如果你不确定顺序，可以在控制台打印一下geoJson.features。
看看它的name字段是什么。
然后确保你的数据数组里，name也是对应的。
或者，更稳妥的做法是。
在series里配置data。
直接传一个对象数组。
每个对象包含name和value。
这样echarts会自动匹配。
不用操心顺序问题。
举个例子：
data: [
{ name: '区域A', value: 100 },
{ name: '区域B', value: 200 }
]
这样写，清晰明了。
最后，说说性能优化。
如果你的地图区域特别多。
比如一个城市有几百个街道。
json文件可能会很大。
这时候，加载速度会变慢。
解决办法是简化多边形。
在GIS工具里，有个简化轮廓的功能。
把不必要的顶点去掉。
地图看起来没区别，但文件小了很多。
加载快了，用户体验才好。
另外，记得开启压缩。
如果json文件超过1MB，建议gzip压缩。
服务器端开启gzip，浏览器会自动解压。
这样传输速度提升明显。
总结一下。
echarts中如何生成自定义geo，其实不难。
难点在于数据的准备和细节的处理。
别怕报错，多看控制台。
大多数问题，都是数据格式不对。
或者坐标没对齐。
只要一步步来，总能搞定。
希望这篇教程能帮到你。
如果有疑问，欢迎留言讨论。
毕竟，技术就是用来解决的。
别让它成为你的拦路虎。
加油，程序员。
