博客介绍了使用ECharts生成地图，可生成河北省廊坊市、云南省昆明市新平县等特定省市县的地图。关键在于使用对应的JSON数据，作者已准备好相关数据，可从https://github.com/wenccro/chinaMapJsonData下载，还给出了河北省廊坊市的案例。
第一个是一个河北省 廊坊市 里面的地图。分别对应 云南省 昆明市 新平县 ，这个关键在在于json数据。我已经给大家都弄好了，只需要去 下载你需要的json数据就可以了。地址是https://github.com/wenccro/chinaMapJsonData。
那是 压缩的 那个省份的所有数据，包括时和县都在里面了 。可以看我的 demo来做
下面是一个 河北省廊坊市案例 大家一看就知道了
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="js/jquery-1.11.3.js"></script>
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script>
var markdata=[];//这是为了给地图上添加气泡图标,拿取备用数据
//取得json的样式，读取json文件
$.getJSON("langfeng.json", "", function(data) {
markdata=convertData(data.features)
//生成地图
createMap(data);
})
//生成地图
function createMap(data){
echarts.registerMap('demo',data);
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
dataRange: {
min: 0,//颜色区间的最小值
max: 50,//颜色区间的最大值，和data中的最大值一致
x: 'left',
y: 'bottom',
text:['高','低'], // 文本，默认为数值文本
calculable : true,
inRange: {
//颜色区间
color: ['lightskyblue','yellow', 'orangered','red']
}
},
tooltip : {
show:true,
formatter: '在建工程<br /> {b}: {c0}'
},
series: [{
type: 'map',
map: 'demo',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:markdata,
markPoint:{
symbolSize: 45,
itemStyle: {
normal: {
borderColor: '#33CBFF',
color:'#33CBFF',
borderWidth: 1, // 标注边线线宽，单位px，默认为1
label: {
show: true
}
}
},
data:markdata
}
}]
});
}
//处理整合 气泡图标数据
function convertData(arrs){
var markdata=[];
var valuess=[50,20,0,30,15,25,48,10,5,38];
for(var i=0; i<arrs.length; i++){
markdata.push({})
if(arrs[i].properties.name=='安次区'){
markdata[i].coord=new Array(parseFloat(arrs[i].properties.center[0])+0.1,parseFloat(arrs[i].properties.center[1])-0.18);
console.log(markdata[i])
}else{
markdata[i].coord=arrs[i].properties.center;
}
markdata[i].name=arrs[i].properties.name;
markdata[i].value=valuess[i]
}
return markdata
}
</script>
</body>
json数据包 可以去我的githup上下载，地址是https://github.com/wenccro/chinaMapJsonData
扫一扫
3万+
到【灌水乐园】发言
