其他分享
首页 > 其他分享> > 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(横向、纵向)两个点的位置
       }
  },

在这里插入图片描述

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];
 },

效果图:
在这里插入图片描述

标签:鼠标,point,tooltip,pointX,设置,var,echarts,size
来源: https://blog.csdn.net/wbx_wlg/article/details/122686252