持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情 小颖博客原文： echart实现世界地图+气泡标注+自定义tooltip
闲聊：
最近小颖做的项目中有echats相关需求，所以小颖整合个笔记，俗话说好记性不如烂笔头，记录下来也方便日后查看，先来看下效果图
效果图：
具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>世界地图</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
body {
background: url(./img/bg.png) center no-repeat;
background-size: 100% 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="mainBox" style="width: 100%;height: 100%;"></div>
</body>
<script src="./js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="./utils/world.json"></script>
<script type="text/javascript" src="./utils/country-name-zh.json"></script>
<script>
var myChart = echarts.init(document.getElementById('mainBox'));
var imgPath = 'image://img/sympol.png';
var asia = [
{
name: "美国",
value: [-73.97622, 40.757498],
egName: 'America',
area: '9370000 km²',
capital: '华盛顿哥伦比亚特区'
},
{
name: "加拿大",
value: [-109.404347, 60.638178],
egName: 'Canada',
area: '9980000 km²',
capital: '渥太华'
},
{
name: "澳大利亚",
value: [137.708144, -25.328065],
egName: 'Australia',
area: '7692000 km²',
capital: '堪培拉'
},
{
name: "中国",
value: [116.512885, 39.847469],
egName: 'China',
area: '9634057 km²',
capital: '华盛顿哥伦比亚特区'
},
];
echarts.registerMap('world', worldJson);
var option = {
tooltip: {
trigger: 'item',
showContent: true,//是否显示提示框浮层，默认显示
alwaysShowContent: false,//是否永远显示提示框内容，默认情况下在移出可触发提示框区域后 一定时间 后隐藏，设置为 true 可以保证一直显示提示框内容
hideDelay: 0,//鼠标移出坐标点时，浮层隐藏的延迟时间，单位为 ms，在 alwaysShowContent 为 true 的时候无效
formatter: function (params, ticket, callback) { return '' }
},
geo: {
map: 'world', //引入地图数据
roam: true, //开启缩放和平移
show: true,//是否显示地理坐标系组件
zoom: 1, //视角缩放比例
nameMap: nameMapZh,
label: {
show: false,//是否显示标签。
},
itemStyle: {
areaColor: '#5470c6',//地图区域的颜色。
borderColor: '#0a53e9', //线
shadowColor: '#092f8f', //外发光
shadowBlur: 20
},
emphasis: { //高亮状态下的显示设置
itemStyle: {
areaColor: "#0a2dae", //鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
}
}
},
// 鼠标悬浮提示框
series: [
{
name: "国家",
type: "map",
selectedMode: false,//关闭点击地图时显示黄色
geoIndex: 0,
},
{
name: "Icon",
type: 'scatter',
coordinateSystem: 'geo',
animation: false,//坐标点是否显示动画
symbol: imgPath,//标记的图形。
symbolSize: [32, 41],//标记的大小
symbolOffset: [0, -15],//标记相对于原本位置的偏移
label: {
formatter: '{b}',
position: 'right',
show: true,//是否显示地名
color: '#fff',
},
z: 9,
data: asia.length > 0 ? asia : [],
tooltip: {//仅在 options中最外层的 tooltip.trigger 为 'item'时有效
position: 'bottom',//提示框位置
backgroundColor: "rgba(185,197,218,0.8)", //设置背景图片 rgba格式
borderColor: '#9a9c9d',
textStyle: {
color: '#fff'
},
formatter: function (params, ticket, callback) {
var _dt = params.data;
if (params.data) {
var strHtml = '<div>';
strHtml += '<table class="table">';
strHtml += '<tr><td colspan="2" style="text-align:center">国家简介</td></tr>';
strHtml += '<tr><td>中文名称：</td><td>' + _dt.name + '</td></tr>';
strHtml += '<tr><td>英文名称：</td><td>' + _dt.egName + '</td></tr>';
strHtml += '<tr><td>首都：</td><td>' + _dt.capital + '</td></tr>';
strHtml += '<tr><td>国土面积：</td><td>' + _dt.area + '</td></tr>';
strHtml += '</table>';
strHtml += '</div>'
return strHtml;
}
}
}
}
],
}
myChart.setOption(option);
myChart.off('click') //图表渲染前销毁点击事件
myChart.on("click", function (params) {
if (params.data) {
alert('我点击的是：' + params.data.name)
}
})
</script>
</html>
引用的js和json文件请移步到小颖的博客
解释：
两个 tooltip
第一个主要是为了让数据中的 tooltip 展示，如果不设置第一个则数据中的 tooltip 无法展示，所以第一个的 tooltip 返回值为空，实现了鼠标悬浮时只有有数据的才会展示 tooltip
如果需要对地图的点击事件做处理则在：
myChart.on("click", function (params) {
if (params.data) {
alert('我点击的是：' + params.data.name)
}
})
中处理
为了防止点击事件触发好几次，并且获取点击数据混乱则需加上：
myChart.off('click') //图表渲染前销毁点击事件
也是问度娘的哈哈，因为小颖在看之前的代码发现点击事件触发好几次，而且拿的数据也不对，然后百度到的解决方式
series中设置了 两种 type
type: "map"，渲染世界地图，type: 'scatter'，根据经纬度数据给想要的位置加气泡，并且鼠标悬浮时能展示其详细信息。
