描述
项目的UI设计稿中，大屏展示模块有地图模块，原本项目使用的是我们ArcGIS JS API初始化后的一个地图服务图层，不过为了美观考虑，最后决定大屏模块的地图使用eCharts来自定义，UI设计稿中的地图如下：
通过查看UI设计图发现，通过JS API来实例化一个地图图层服务来实现这个模块的话，就需要重新制作一份暗夜色的地图，然后发布服务，前端调用实现，这个过程有点繁琐，所以我们接下来通过eCharts来实现。
操作步骤
1、在【地图选择器】（http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4）网站上下载GeoJSON格式的数据，如图：
2、在代码里，通过eCharts的地图实例化代码，生成我们的地图，如下：
// 创建GeoJSON底图
_createJSONMap: function(domid) {
const _self = this;
echarts.registerMap('yunnan', _self.mapData); //注册一个名为"yunnan"的地图
const chartmap = echarts.init(document.getElementById(domid));
const mapoption = {
tooltip: {
trigger: 'item',
formatter: function(params) {
return params.name;
},
extraCssText: 'height:20px;',
},
series: [
{
name: 'YNBasemap',
type: 'map',
roam: true, // 缩放和漫游
map: 'yunnan', //指定刚才注册的地图
aspectScale: 1.5, //宽高比，如果不指定，实例化出来的地图会偏瘦或者偏矮
zoom: 1.5,
label: {
show: true,
color: '#BBC0CA',
},
emphasis: { //鼠标浮动的时候，标注和各个地图区域的交互渲染设置
label: {
show: true,
// fontSize: 16,
color: '#39E639',
},
itemStyle: {
areaColor: '#2B91B7',
borderColor: '#0DC9D5',
},
},
itemStyle: {
areaColor: '#09304A',
borderColor: '#0DC9D5',
},
// 文本位置修正
textFixed: {
Alaska: [20, -20],
},
},
],
};
chartmap.setOption(mapoption);
},3、通过上述代码，我们实现了地图的自定义，最终效果如下：
总结
实例化地图操作其实也是参考eCharts官网的API文档来实现的，这里面当时遇到的问题就是刚初始化之后的地图偏瘦，就是两边的区域留白位置很大，所以找了很多方法都没解决，最后查阅官网文档，可以设置它的宽高比，设置完宽高比之后发现，实例化的地图好看多了，所以还是要看官网文档啊。
https://www.echartsjs.com/zh/option.html#series-map.type
