【echarts】tooltip显示位置设置_echarts tooltip 位置

echarts中的柱状图或折线图，tooltip默认是根据鼠标的移动而移动，视觉焦点始终是与鼠标保持一致，但有时根据用户需要会对tooltip的位置做特殊处理，让其固定在图形顶部或者鼠标的左侧，具体实现方法如下：

1、tooltip显示框始终固定在图形顶部

//tooltip显示框始终固定在图形顶部
 tooltip: {
      trigger: 'axis',
       position: function (point, params, dom, rect, size) {
           return [point[0] - 100, '10%']  //返回x、y（横向、纵向）两个点的位置
       }
  },
1
2
3
4
5
6
7

2、tooltip合理计算位置

//tooltip显示框合理计算位置，不会对周边数据造成遮挡
tooltip: {
             trigger: 'axis',
              position: function (point, params, dom, rect, size) {
           	  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 = pointX + 10;
                  } else { // 左边放的下
                      x = pointX - boxWidth - 10;
                  }

                  // boxHeight > pointY 说明鼠标上边放不下提示框
                  if (boxHeight > pointY) {
                      y = 5;
                  } else { // 上边放得下
                      y = pointY - boxHeight;
                  }
                  return [x, y];
 },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

效果图：