- 下載省市json數(shù)據(jù)
地址: http://datav.aliyun.com/portal/school/atlas/area_selector - 上代碼玛歌,樣式自定義
var geoCoordMap = {
"新樂市第一老年公寓":[114.717173,38.348604],
"新樂市頤樂老年公寓":[114.641012,38.3042421],
"新樂市中心醫(yī)院醫(yī)養(yǎng)中心":[114.69105,38.3484],
"仁愛新樂養(yǎng)護(hù)院":[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',// 觸發(fā)條件
backgroundColor: 'rgba(255,170,255,.8)',
// formatter:'<br/>占用數(shù){c}',// 自定義顯示數(shù)據(jù)
formatter:'擎椰',
textstyle: {
fontsize: 102,
color:'#927FC5'
}
},
geo: {
map: 'shijiazhuang',
},
series: [
//散點(diǎn)
{
type: 'scatter',
coordinateSystem: 'geo',
data:convertData([
{name: "新樂市第一老年公寓", value: 9},
{name: "新樂市頤樂老年公寓", value: 20},
{name: "新樂市中心醫(yī)院醫(yī)養(yǎng)中心", value: 30},
{name: "仁愛新樂養(yǎng)護(hù)院", 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);
}