echarts地图带光柱标记_echarts 中国地图标注所在点

达到的效果：

1.本身是个中国地图‘

2.直接通过经纬度标注

3.标注点可以是其他样子(比如：五角星)

4.标注点具有提示框并且鼠标可以进入

5.提示框里的链接可点击(可以添加为链接事件)；

所需要技术

直接上代码

$(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 '' + params.name + '

管理干部培训  ' + params.data.runConut + '人

卓越教师培训  ' + params.data.unitCount + '人

'

// if (params.seriesIndex == 0 && JSON.stringify(markPointData).indexOf(params.name) > -1) {

// return '

' + params.data.name + '

管理干部培训  ' + params.data.runConut + '人

卓越教师培训  ' + params.data.unitCount + '人'

// }

},

"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'));

}

})