echarts地图部分仅含中国地图与少量省市地图，现以陕西省为例，基于JSON方式给出基础的省份地图生成方法。
aa25c996a8526e24b98519e608bab1e.png
各省市经纬度JSON文件获取地址：
http://datav.aliyun.com/tools/atlas/#&lat=44.402391829093915&lng=169.189453125&zoom=3
796eaa5324d58c2ccc8d4d75fe711b1.png
示例文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>陕西西安市地图</title>
<style type="text/css">
body,
html {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.map-box {
margin: 30px auto;
width: 1200px;
height: 500px;
}
</style>
</head>
<body>
<div class="map-box" id="map"></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//散点相关信息
var mapData = [{
'latitude': 34.263161,
'longitude': 108.948024,
'name': '西安市',
'value': 15,
'color': '#ff6521'
}, //西安市
]
var dom = document.getElementById("map");
var myChart = echarts.init(dom);
var option1 = null;
myChart.showLoading(); //加载动画
$.get('./json/610000.json', function(result) {
myChart.hideLoading(); //关闭加载动画
echarts.registerMap(name, result); //加载地图数据
option1 = {
tooltip: {
trigger: 'item',
formatter: function(params) {
return params.name;
}
},
toolbox: {
show: false, //此字段表示是否显示或启用
//orient: 'vertical', //工具栏
left: 'left',
top: 'top',
feature: {
dataView: {
readOnly: false
},
restore: {},
saveAsImage: {}
}
},
geo: {
type: 'map',
zoom: 1.2, //地图初始大小，这里是关键，一定要放在 series中 因为geo在series中会加载，所以zoom放在此处
roam: true,
label: {
normal: {
show: true,
color: '#333'
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
normal: {
borderColor: '#4a86fd', //区域边框颜色
areaColor: '#bfdfe0', //区域填充颜色
},
emphasis: {
areaColor: '#4380fd',
borderWidth: 0
}
},
},
series: [{
type: 'effectScatter',
coordinateSystem: 'geo',
// animation: true,
rippleEffect: {
brushType: 'stroke'
},
symbolSize: function(val, params) { //散点大小
return val[2];
},
data: mapData.map(function(itemOpt) { //散点生成
return {
name: itemOpt.name,
value: [
itemOpt.longitude,
itemOpt.latitude,
itemOpt.value
],
label: {
emphasis: {
position: 'right',
show: false
}
},
itemStyle: {
normal: {
color: itemOpt.color
}
}
};
})
}]
};
myChart.setOption(option1, true);
window.addEventListener("resize", function() { //浏览器大小调整echarts随之改变
myChart.resize();
});
myChart.on('click', function(params) { //地图区域点击时的联动 根据params的值来联动对应数据
console.log(params); //此处写点击事件内容
alert(params.name)
});
});
})
</script>
</body>
</html>
网友评论