echarts map自定义区域

  在做项目时遇到在页面某一区域展示宁波供电区域（非以百度地图为基础），在echarts官网研究了下Api，发现它是以geojson为基础做独立地区区域块的。
话不多说，提供下具体方法：
1、制作geojson格式的地区区域块。官网提供的地图数据在线生成工具入口由于政策原因已关闭。百度了一下，发现有网友已经把官网提供的全国三四百县市的geojson数据保存了下来（个人收藏见最后github地址）。但地域地图和供电地图有所不同，所以要以此数据为基础进行修改，否则自己完全制作也行，只要你有耐心画。。。
2、编辑geojson地图数据。在此提供一个方法，在www.geojson.io先打开geojson数据json文件；（此处以宁波地图为例）

open geojson.png

打开后效果：

show data.png

然后发现地图的“鄞州区”的地域区域与供电区域有错不同，现在把“海曙区”删除，然后把“鄞州区”分上部分给“海曙区”（单击区域块后，有tooltip弹窗，点击右下角“delete feature”即可删除）

diff.png

delete areapng.png

现在删除完成后进行描绘区域：

edit map.png

现在用多边形工具圈好“海曙区”供电区域了：

edit ok.png

然后给区域命名，点击绘制的区域块添加属性“name”为“海曙区”：

edit area.png

area ok.png

现在海曙区就ok了，然后剩下的区域分给“鄞州区”，相同操作。
3、加载geojson地图数据实现预期效果。
将制作完成后将右侧的json复制压缩一下（json整体数据会小一点）放在项目的资源文件夹后，在js文件进行加载json数据后进行注册即可使用：

 $.get('resources/plugin/echarts3/ningbo.json', function (nbJson) {
        echarts.registerMap('ningbo', nbJson);
        mapChart = echarts.init(document.getElementById('areaMap'));
        loadMapData();
    });
map option中series的“mapType”要写上面注册的“ningbo”
 {
            name: '',
            type: 'map',
            mapType: 'ningbo',
            .....
}

效果如下：

show.png

最后达到了我们想要的效果，希望可以帮到需要实现此效果的朋友。
个人收藏的geojson文件：https://github.com/hzhqk/echarts/tree/master/map-geojson