echarts 中国地图标注所在点

zhaozhenghao 2021-09-17 原文

达到的效果：

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>管理干部培训  \’ + params.data.runConut + \’人卓越教师培训  \’ + params.data.unitCount + \’人\’
// if (params.seriesIndex == 0 && JSON.stringify(markPointData).indexOf(params.name) > -1) {
// return \'\’ + params.data.name + \'管理干部培训  \’ + params.data.runConut + \’人<pclass=”conut-next”>卓越教师培训  \’ + 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\’));