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