echart+map
Posted cyany_blue
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echart+map相关的知识，希望对你有一定的参考价值。
reference:
https://github.com/apache/incubator-echarts/tree/master/extension/bmap baidumap的github嵌入文本
cdn：http://www.bootcdn.cn/echarts/
echart3.8.5 :http://echarts.baidu.com/download3.html
<script src="http://api.map.baidu.com/api?v=2.0&ak=53oVIOgmSIejwV7EfphpgTynOZbIiVYu"></script>
<script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.8.5/extension/bmap.min.js"></script>
<script>
var myChart = echarts.init(document.getElementById(‘main‘));
myChart.setOption({
bmap: {
center: [123.297282, 69.110789],
zoom: 18,
roam: true,
mapStyle: {
styleJson: [
{
"featureType": "water",
"elementType": "all",
"stylers": {
"color": "#021019"
}
},
{
"featureType": "highway",
"elementType": "geometry.fill",
"stylers": {
"color": "#000000"
}
},
{
"featureType": "highway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#147a92"
}
},
{
"featureType": "arterial",
"elementType": "geometry.fill",
"stylers": {
"color": "#000000"
}
},
{
"featureType": "arterial",
"elementType": "geometry.stroke",
"stylers": {
"color": "#0b3d51"
}
},
{
"featureType": "local",
"elementType": "geometry",
"stylers": {
"color": "#000000"
}
},
{
"featureType": "land",
"elementType": "all",
"stylers": {
"color": "#08304b"
}
},
{
"featureType": "railway",
"elementType": "geometry.fill",
"stylers": {
"color": "#000000"
}
},
{
"featureType": "railway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#08304b"
}
},
{
"featureType": "subway",
"elementType": "geometry",
"stylers": {
"lightness": -70
}
},
{
"featureType": "building",
"elementType": "geometry.fill",
"stylers": {
"color": "#000000"
}
},
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": {
"color": "#857f7f"
}
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#000000"
}
},
{
"featureType": "building",
"elementType": "geometry",
"stylers": {
"color": "#022338"
}
},
{
"featureType": "green",
"elementType": "geometry",
"stylers": {
"color": "#062032"
}
},
{
"featureType": "boundary",
"elementType": "all",
"stylers": {
"color": "#1e1c1c"
}
},
{
"featureType": "manmade",
"elementType": "geometry",
"stylers": {
"color": "#022338"
}
},
{
"featureType": "poi",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "all",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": {
"color": "#2da0c6",
"visibility": "on"
}
}
]
}
},
series: [{
type: ‘scatter‘,
coordinateSystem: ‘bmap‘,
data: [ [120, 30, 1] ]
}]
});
var bmap = myChart.getModel().getComponent(‘bmap‘).getBMap();
bmap.addControl(new BMap.MapTypeControl());
</script>以上是关于echart+map的主要内容，如果未能解决你的问题，请参考以下文章