echarts 中國地圖標註所在點

達到的效果：

1.自己是個中國地圖‘

2.直接經過經緯度標註

3.標註點能夠是其餘樣子（好比：五角星）

4.標註點具備提示框而且鼠標能夠進入

5.提示框裏的連接可點擊（能夠添加爲連接事件）；

所須要技術

1.echarts.min.js

2.china.js

直接上代碼

$(document).ready(function(){
$.ajax({
url:'',
type:'POST',
dataType:'json',
data:{num:1000},
dataType:'json',
success:function(data){
var list=data.result;



var markPointData=[];
for (var i = 0; i < list.length; i++) {
var num=[];
var ok=list[i].address;
var num=ok.split(",");
markPointData.push({
"name": list[i].organizationName,
"coord": num,
"runConut": list[i].mun17,
"unitCount": list[i].mun18,
"organizationId":list[i].organizationId


});
};
console.log(markPointData);
//地圖
var myChart = echarts.init(document.getElementById('main'));
// mapChart的配置
var option = {
"tooltip": {//提示框組件。
"trigger": 'item',//觸發類型 散點圖
"enterable": true,//鼠標是否可進入提示框
"transitionDuration": 1,//提示框移動動畫過渡時間
"formatter": function(params) {
console.log(params);
return '<a target="_blank" class="params-name" href="'+__CONTEXT__+'/common/jsp?path=specialSubject/unit&organizationId='+params.data.organizationId+'">' + params.name + '</a><p class="conut-next">管理幹部培訓&nbsp;&nbsp;' + params.data.runConut + '人</p><p class="conut-next">卓越教師培訓&nbsp;&nbsp;' + params.data.unitCount + '人</p>'
// if (params.seriesIndex == 0 && JSON.stringify(markPointData).indexOf(params.name) > -1) {
// return '<p class="params-name">' + params.data.name + '</p><p class="conut-next">管理幹部培訓&nbsp;&nbsp;' + params.data.runConut + '人</p><pclass="conut-next">卓越教師培訓&nbsp;&nbsp;' + params.data.unitCount + '人</p>'
// }
},
"backgroundColor": '#fff',
"borderWidth": '1px',
"borderRadius": '5',
"borderColor": 'rgba(72,150,128,1)',
"textStyle": {
//"color": 'rgba(94,194,222,1)'
},
"padding": 22
},
"series": [{//系列列表
"name": "中國",
"type": "map",
"mapType": "china",
"zoom": 1,//當前視角的縮放比例。
"selectedMode": false,
"layoutCenter": ['50%', '53%'],
"layoutSize": "102%",
"label": {//圖形上的文本標籤，可用於說明圖形的一些數據信息，好比值，名稱等
"normal": {
"show": false,
"textStyle": {
"color": "#fff",
"fontSize": "12"
}
},
"emphasis": {
"show": false,
"textStyle": {
"color": "#fff",
"fontSize": "12"
}
}
},
"markPoint": {//圖表標註。
"symbol": 'path://M512 39.384615l169.353846 295.384615 342.646154 63.015385-240.246154 248.123077L827.076923 984.615385l-315.076923-145.723077L196.923077 984.615385l43.323077-334.769231L0 401.723077l342.646154-63.015385L512 39.384615',
"symbolSize":10,
"label": {
"normal": {
"show": true,
},
"emphasis": {
show: true,
}
},
"itemStyle": {
"normal": {
"color": 'rgba(72,150,128,1)'
}
},
"data": markPointData
}
}]
};
myChart.setOption(option);
var myChart = echarts.init(document.getElementById('main'));

}
})

　　

個人成果:http://gallery.echartsjs.com/editor.html?c=x32xatwys1