对于echarts中的tooltip位置有三种设置方法。

方法一:通过数组设置提示框位置

(1)数字设置绝对位置 position: [10, 10] 

tooltip: {
  trigger: 'axis',
  position: [10, 10]// position: ['10px', '10px']
},

(2)百分比设置相对位置 position: ['50%', '50%'] 

tooltip: {
  trigger: 'axis',
  // 相对位置
  position: ['50%', '50%']
},

方法二:直接设置position的值(必须设置trigger: 'item')

  • 'inside'  图形的内部中心位置

  • 'top'  图形上侧

  • 'left'  图形左侧

  • 'right'  图形右侧

  • 'bottom'  图形底侧

tooltip: {
  trigger: 'item',
  position: 'top'
},

方法三:通过回调函数设置提示框位置 

回调函数中的参数

point:鼠标位置,是一个数组,如 [20, 50]

params:Object|Array.<Object>  是需要的数据集

dom:tooltip 的 dom 对象。

rect:只有鼠标在图形上时有效,有 x, y, width, height   四个属性

size:包括 dom 的尺寸和 echarts 容器的当前尺寸,例如:{contentSize: [width, height], viewSize: [width, height]}。size中有两个属性:viewSize为外层div的大小,contentSize为tooltip提示框的大小。

(1)返回值可以是一个表示 tooltip 位置的数组,数组值可以是绝对像素值,也可以是相对百分比。

tooltip: {
  trigger: 'axis',
  position: function (point, params, dom, rect, size) {
    return ['40%', 30];
  }
},

(2)返回值也可以是一个对象

对象的属性包括:top、bottom、left、right

position: function (point, params, dom, rect, size) {
  return {left: '40%', bottom: 20};
}

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐