1.地图json数据可以选择阿里云下载
http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=3
2.基础用法只显示地图(3D效果的地图)
首先在页面中引入echarts.js,以及demo节点
<!-- js引用部分↓ -->
<script src="echarts.js" type="text/javascript"></script>
<!--地图-->
<div class="mapbox" id="ChinaMap"></div>
var china = "./content/js/lib/china.json";
$.get(china, function (geoJson) {
var chart = echarts.init(document.getElementById('ChinaMap'));
echarts.registerMap('中国', geoJson);
var option = {
geo: [
//地图背景
{
map: '中国',
label: {
show: false
},
roam: false,
left: 'center',
top: 65,
bottom: 1,
itemStyle: {
areaColor: 'rgba(30,130,210,.2)',
borderColor: 'rgba(30,130,210,.2)'
},
silent: true,
zoom:1.3,
center:[106.948024,32.563161],
},
{
map: '中国',
label: {
show: false
},
roam: false,
left: 'center',
top: 62,
bottom: 4,
itemStyle: {
areaColor: 'rgba(30,130,210,.2)',
borderColor: 'rgba(30,130,210,.2)'
},
silent: true,
zoom:1.3,
center:[106.948024,32.563161],
},
{
map: '中国',
label: {
show: false
},
roam: false,
left: 'center',
top: 59,
bottom: 7,
itemStyle: {
areaColor: 'rgba(30,130,210,.2)',
borderColor: 'rgba(30,130,210,.2)'
},
silent: true,
zoom:1.3,
center:[106.948024,32.563161],
},
{
map: '中国',
label: {
show: false
},
roam: false,
left: 'center',
top: 56,
bottom: 10,
itemStyle: {
areaColor: 'rgba(30,130,210,.2)',
borderColor: 'rgba(30,130,210,.2)'
},
silent: true,
zoom:1.3,
center:[106.948024,32.563161],
},
{
map: '中国',
label: {
show: false
},
roam: false,
left: 'center'