Echarts 散点图的 tooltip设置跟随鼠标移动，并将显示位置固定在指定大小区域

问题：

在散点图中设置了tooltip后，不设置position，使用默认的配置，toolt的显示位置是跟随鼠标移动的，但是会出现显示不全的情况，如下图。

 这产品肯定不能忍啦，必须改！！！于是我去看了echarts的文档，看到tooltip的position属性，可以把位置设置大概分成两部分，一部分是固定位置，一部分是跟随鼠标移动。

1.固定位置

（1）使用px设置绝对位置

  // 绝对位置，相对于容器左侧 10px, 上侧 10 px
  position: [10, 10]

（2）使用百分比设置相对位置

  // 相对位置，放置在容器正中间
  position: ['50%', '50%']

2.跟随鼠标移动

使用function回调函数的方法，带5个参数，分别是：

• point: 鼠标位置，如 [20, 40]。
• params: 同 formatter 的参数相同。
• dom: tooltip 的 dom 对象。
• rect: 只有鼠标在图形上时有效，是一个用x, y, width, height四个属性表达的图形包围盒。
• size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。 

返回值可以是一个表示 tooltip 位置的数组，数组值可以是绝对的像素值，也可以是相 百分比。
也可以是一个对象，如：{left: 10, top: 30}，或者 {right: '20%', bottom: 40}。 

以上部分来自Echarts配置文档，详见Ecahrts

以下代码改编自sleepwalker_1992的一篇文章，针对这些代码进行简单的修改，防止数据点被tooltip覆盖。主要思路是：把显示不下分成两种情况，上边放不下，和左边放不下，在分别针对这两种情况，自己设定一个x或y坐标值，防止出屏问题。代码如下：

position: function (point, params, dom, rect, size) {
    // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
    // 提示框位置
    var x = 0; // x坐标位置
    var y = 0; // y坐标位置
    
    // 当前鼠标位置
    var pointX = point[0];
    var pointY = point[1];
    
    // 外层div大小
    // var viewWidth = size.viewSize[0];
    // var viewHeight = size.viewSize[1];
    
    // 提示框大小
    var boxWidth = size.contentSize[0];
    var boxHeight = size.contentSize[1];
    
    // boxWidth > pointX 说明鼠标左边放不下提示框
    if (boxWidth > pointX) {
        x = 5;  // 自己定个x坐标值，以防出屏
        y -= 15; // 防止点被覆盖住，可根据情况自行调节 
    } else { // 左边放的下
        x = pointX - boxWidth - 15;
    }
    
    // boxHeight > pointY 说明鼠标上边放不下提示框
    if (boxHeight + 20 > pointY) {
        y = pointY + 15;
    } else if (boxHeight > pointY) {
        y = 5;
    } else { // 上边放得下
        y += pointY - boxHeight;
    }
    return [x, y];
}

 效果图如下：