echarts地圖部分僅含中國地圖與少量省市地圖，現(xiàn)以陜西省為例，基于JSON方式給出基礎(chǔ)的省份地圖生成方法。
aa25c996a8526e24b98519e608bab1e.png
各省市經(jīng)緯度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() {
//散點(diǎn)相關(guān)信息
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(); //加載動(dòng)畫
$.get('./json/610000.json', function(result) {
myChart.hideLoading(); //關(guān)閉加載動(dòng)畫
echarts.registerMap(name, result); //加載地圖數(shù)據(jù)
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, //地圖初始大小，這里是關(guān)鍵，一定要放在 series中 因?yàn)間eo在series中會(huì)加載，所以zoom放在此處
roam: true,
label: {
normal: {
show: true,
color: '#333'
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
normal: {
borderColor: '#4a86fd', //區(qū)域邊框顏色
areaColor: '#bfdfe0', //區(qū)域填充顏色
},
emphasis: {
areaColor: '#4380fd',
borderWidth: 0
}
},
},
series: [{
type: 'effectScatter',
coordinateSystem: 'geo',
// animation: true,
rippleEffect: {
brushType: 'stroke'
},
symbolSize: function(val, params) { //散點(diǎn)大小
return val[2];
},
data: mapData.map(function(itemOpt) { //散點(diǎn)生成
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() { //瀏覽器大小調(diào)整echarts隨之改變
myChart.resize();
});
myChart.on('click', function(params) { //地圖區(qū)域點(diǎn)擊時(shí)的聯(lián)動(dòng) 根據(jù)params的值來聯(lián)動(dòng)對應(yīng)數(shù)據(jù)
console.log(params); //此處寫點(diǎn)擊事件內(nèi)容
alert(params.name)
});
});
})
</script>
</body>
</html>
