echarts中tooltip的位置设置

 对于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};
}