<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.8.0/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script>
var markdata=[];//这是为了给地图上添加气泡图标,拿取备用数据
//取得json的样式，读取json文件
$.getJSON("lingshui.json", "", function(data) {
markdata=convertData(data.features)
console.log(JSON.stringify(markdata) );
//生成地图
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']
color: ['#cdf4ff', '#addafc', '#6fbffc', '#3fabfc', '#3f98fc', '#1e85f9']
}
},
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>
海南省echart地图各市县geojson.zip
需积分: 49 133 浏览量
2020-04-14
15:14:12
上传
评论 2
收藏 1.08MB ZIP 举报
海南省echart地图各市县geojson.zip （21个子文件） 
海南省echart地图各市县geojson 屯昌县 
469022.json 149KB 儋州 460400.json 159KB 东方 469007.json 177KB 三亚 460200.json 141KB
lingshui.html 3KB 昌江黎族自治县 469026.json 159KB 琼海 469002.json 249KB 白沙黎族自治区 469025.json 239KB 文昌 469005.json 338KB 保亭黎族苗族自治县 469029.json 167KB 临高县 469024.json 324KB lingshui.json 141KB 五指山 469001.json 130KB 陵水黎族自治县 469028.json 141KB 海口 460100.json 117KB 琼中黎族苗族自治县 469030.json 346KB 乐东黎族自治县 469027.json 298KB 澄迈县 469023.json 256KB hainan.json 1.04MB 万宁 469006.json 293KB 定安县 469021.json 307KB资源评论
