来源:http://blog.csdn.net/yc_1993/article/details/52431989
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script th:src="@{/js/jquery.min.js}"></script>
<script src="../../static/js/echarts.min.js"
th:src="@{/js/echarts.min.js}"></script>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=uHkkRqHOFj3Z6Ajv3lLhCD8WjYjb6rFM"></script>
<script src="../../static/js/bmap.min.js" th:src="@{/js/bmap.min.js}"></script>
<title>Test</title>
</head>
<body>
<div class="ui onehalf wide padded" style="padding-top: 0.5em">
<div class="ui tab active" data-tab="overview">
<div class="ui two column grid"
style="padding-top: 0px; margin-top: 0px; min-width: 400; min-height: 300px;">
<div class="stretched row">
<div class="column" style="padding-right: 1rem">
<div class="ui segment">
<span class="title">test3-需求分布图</span>
<div class="ui divider"></div>
<div id="echarts_chinaMap" class="chinaMap"
style="width: 560px; height: 400px"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var myChart = echarts.init(document
.getElementById('echarts_chinaMap'));
var bmap = {
center : [ 113.65, 34.76 ],
zoom : 5,
roam : true,
mapStyle : {
styleJson : [ {
'featureType' : 'land', //调整土地颜色
'elementType' : 'geometry',
'stylers' : {
'color' : '#081734'
}
}, {
'featureType' : 'building', //调整建筑物颜色
'elementType' : 'geometry',
'stylers' : {
'color' : '#04406F'
}
}, {
'featureType' : 'building', //调整建筑物标签是否可视
'elementType' : 'labels',
'stylers' : {
'visibility' : 'off'
}
}, {
'featureType' : 'highway', //调整高速道路颜色
'elementType' : 'geometry',
'stylers' : {
'color' : '#015B99'
}
}, {
'featureType' : 'highway', //调整高速名字是否可视
'elementType' : 'labels',
'stylers' : {
'visibility' : 'off'
}
}, {
'featureType' : 'arterial', //调整一些干道颜色
'elementType' : 'geometry',
'stylers' : {
'color' : '#003051'
}
}, {
'featureType' : 'arterial',
'elementType' : 'labels',
'stylers' : {
'visibility' : 'off'
}
}, {
'featureType' : 'green',
'elementType' : 'geometry',
'stylers' : {
'visibility' : 'off'
}
}, {
'featureType' : 'water',
'elementType' : 'geometry',
'stylers' : {
'color' : '#044161'
}
}, {
'featureType' : 'subway', //调整地铁颜色
'elementType' : 'geometry.stroke',
'stylers' : {
'color' : '#003051'
}
}, {
'featureType' : 'subway',
'elementType' : 'labels',
'stylers' : {
'visibility' : 'off'
}
}, {
'featureType' : 'railway',
'elementType' : 'geometry',
'stylers' : {
'visibility' : 'off'
}
}, {
'featureType' : 'railway',
'elementType' : 'labels',
'stylers' : {
'visibility' : 'off'
}
}, {
'featureType' : 'all', //调整所有的标签的边缘颜色
'elementType' : 'labels.text.stroke',
'stylers' : {
'color' : '#313131'
}
}, {
'featureType' : 'all', //调整所有标签的填充颜色
'elementType' : 'labels.text.fill',
'stylers' : {
'color' : '#FFFFFF'
}
}, {
'featureType' : 'manmade',
'elementType' : 'geometry',
'stylers' : {
'visibility' : 'off'
}
}, {
'featureType' : 'manmade',
'elementType' : 'labels',
'stylers' : {
'visibility' : 'off'
}
}, {
'featureType' : 'local',
'elementType' : 'geometry',
'stylers' : {
'visibility' : 'off'
}
}, {
'featureType' : 'local',
'elementType' : 'labels',
'stylers' : {
'visibility' : 'off'
}
}, {
'featureType' : 'subway',
'elementType' : 'geometry',
'stylers' : {
'lightness' : -65
}
}, {
'featureType' : 'railway',
'elementType' : 'all',
'stylers' : {
'lightness' : -40
}
}, {
'featureType' : 'boundary',
'elementType' : 'geometry',
'stylers' : {
'color' : '#8b8787',
'weight' : '1',
'lightness' : -29
}
} ]
}
};
var series = [ {
type : 'map',
mapType : 'china',
coordinateSystem : 'bmap'
} ];
var option = {
bmap : bmap,
series : series
};
myChart.setOption(option);
</script>
</div>
</div>
</body>
</html>
在这个博客里已经有详细的代码和说明,下面说一下在实际应用中要注意的问题:
1.要先引入echarts.js,然后再引入bmap.min.js和AK(这两个没有顺序要求,已经测试)。
2.引入script的地方可以放到head里面。
3.ApiKey可以是自己获取的,也可以使用别人的,这个没有要求。
----------
如果你没有bmap.min.js脚本,可以从这个地方获取(http://gallery.echartsjs.com/dep/echarts/latest/extension/bmap.min.js)不只这一个地方可以获取哟!