打开后效果:
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