1、获得地图json数据文件
可以从此获取 http://datav.aliyun.com/tools/atlas/#&lat=31.840232667909365&lng=104.2822265625&zoom=4
点击geojson下载
2、下载文件
下载json文件后，在此网址内进行地图绘制在 open 选择 file
http://geojson.io/#map=2/20.0/0.0
然后就在地图上进行绘制，绘制完成后 在 菜单栏 Save 中选择 GeoJson 进行保存，保存后修改文件名称为json格式
3、引入项目中，就可以正常使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="assets/index.js"></script>
<script src="assets/shandong.js"></script>
<title></title>
</head>
<body>
<div id="main" style="width: 800px;height:800px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
$.get('css/map.json', function(geoJson) {
echarts.registerMap('sc', geoJson, {});
var option = {
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c} (p / km2)'
},
visualMap: {
min: 500,
max: 50000,
text: ['High', 'Low'],
left: 'right',
realtime: false,
calculable: false,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
series: [{
name: '西城',
type: 'map',
mapType: 'sc',
aspectScale: 0.85, //地图长度比
label: {
normal: {
show: true,
textStyle: {
color: '#000'
}
},
emphasis: {
show: true,
textStyle: {
color: '#333'
}
}
},
data: [{
name: '商河县',
value: 5000
}, {
name:"济阳区",
value:1000
}, {
name:"天桥区",
value:100
}, {
name:"槐荫区",
value:10000
}, {
name:"历下区",
value:10541
}, {
name:"历城区",
value:32515
}, {
name:"市中区",
value:50000
}, {
name:"长清区",
value:30000
}, {
name:"平阴县",
value:3000
}, {
name:"章丘区",
value:25000
}, {
name:"莱芜区",
value:13520
}, {
name:"钢城区",
value:22210
}]
}]
};
myChart.setOption(option);
});
</script>
</body>
</html>
效果
