echarts的地图tooltip位置设置

先上效果图

自定义的tooltip内容

需求与问题

需求：在开发中需要鼠标移入后这个弹窗跟这鼠标移动，并且始终在鼠标的正上方；
问题：如果直接用position:'top’会出现弹窗与鼠标的相对位置不固定，偶尔还会飞出屏幕；

解决方案

动态获取鼠标位置，并计算出弹窗该在的位置，代码：

option:any = {
	......
	geo: {
	      name: '',
	      type: 'map',
	      map: 'world',
	      roam: false,
	      label: {
	        emphasis: {
	          show: false
	        }
	      },
	      tooltip: {
	        show: true,
	        // 鼠标是否可以进入悬浮框
	        enterable: false,
	        // 触发方式 mousemove, click, none, mousemove|click
	        triggerOn: 'mousemove|click',
	        // 浮层隐藏的延迟
	        hideDelay: 100,
	        // 背景色
	        backgroundColor: 'rgba(0,0,0,0)',
	        // 提示框浮层的边框颜色。
	        borderColor: 'rgba(0,0,0,0)',
	        // 位置
	        // position: 'top',
	        position: function (point, params, dom, rect, size) {
	          console.log('point',point)
	          console.log('params',params)
	          console.log('dom',dom)
	          console.log('rect',rect)
	          console.log('size',size)
	          return [point[0]-160, point[1]-300];
	        },
	        formatter: function (params) {
	          // 关闭提示框
	
	          return `<div class="">
	                  <img src="换成自己要展示的图片路径" width="300px" height="250px" />
	                  <div class=title>${params.name}</div>
	                </div>`
	        },
	      },
	      ......
	    }
	    ......
    }

其中position指定的函数接收多个参数，我们需要第一个参数就是鼠标移入地图后的实时位置，返回计算后的位置数组即可。细节就自己调节就可以了。