echarts tooltip被遮挡的解决办法

给tooltip设置confine、appendToBody属性，鼠标放在图表最右侧的时候tooltip还是有一部分显示不完整。

看了官网的position属性设置，也可以解决tooltip被遮挡的问题。官网中下面这段代码乍一看有点不解，obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]]这里解释一下：obj中第一个数组[left, right]是属性名的集合，第二个数组中的计算结果作为第一个数组的索引值，如pos[0] < size.viewSize[0] / 2为true的时候通过+转换为数字1，即obj[['left', 'right'][1]] = obj['right']。

 position: function (pos, params, dom, rect, size) {
      // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
      var obj = {top: 60};
      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
      return obj;
  }复制

将上面的计算方式改造一下，给tooltip设置合适的position即可解决被遮挡的问题：

var option = {
	tooltip : {
		trigger : 'axis',       
        // 当前鼠标位置
        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];
 
            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];
            
            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
                x = 10;
            } else { // 左边放的下
                x = pointX - boxWidth;
            }
            
            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
                y = 10;
            } else { // 上边放得下
                y = pointY - boxHeight;
            }
            return [x, y];
        },
    },
    ......
}
 复制