- 下载省市json数据
地址: http://datav.aliyun.com/portal/school/atlas/area_selector - 上代码,样式自定义
var geoCoordMap = {
"新乐市第一老年公寓":[114.717173,38.348604],
"新乐市颐乐老年公寓":[114.641012,38.3042421],
"新乐市中心医院医养中心":[114.69105,38.3484],
"仁爱新乐养护院":[114.572011,38.357455]
};
var convertData = function (data) {
var rarr = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
rarr.push(geoCoord.concat(data[i].value).concat(data[i].name));
}
}
console.log(rarr);
return rarr;
};
$.getJSON('json/shijiazhuang.json','',function(res){
getmap(res);
});
function getmap(res){
var myChart = echarts.init(document.getElementById('main'));
echarts.registerMap('shijiazhuang', {geoJSON: res});
var option = {
tooltip: { // 悬浮框
trigger:'item',// 触发条件
backgroundColor: 'rgba(255,170,255,.8)',
// formatter:'{b}<br/>占用数{c}',// 自定义显示数据
formatter:'{b}',
textstyle: {
fontsize: 102,
color:'#927FC5'
}
},
geo: {
map: 'shijiazhuang',
},
series: [
//散点
{
type: 'scatter',
coordinateSystem: 'geo',
data:convertData([
{name: "新乐市第一老年公寓", value: 9},
{name: "新乐市颐乐老年公寓", value: 20},
{name: "新乐市中心医院医养中心", value: 30},
{name: "仁爱新乐养护院", value: 9}
]),
encode: {
value: 2
},
symbolSize: 12,
label: {
normal: {
show: false,
textStyle:{color:"#c71585"}
},
emphasis: {
show: true,
textStyle:{color:"#800080"}
}
},
itemStyle: {
normal: {
borderWidth: .5,
borderColor: '#009fe8',
areaColor:"#ffefd5",
},
emphasis: {
show:true,
borderWidth: .5,
borderColor: '#4b0082',
areaColor:"#f47920",
}
}
},
]
};
myChart.setOption(option);
}