本文示例:将提示框跟随鼠标右上方浮动,其他浮动设置参考即可
先说明回调参数
point: 鼠标位置,如 [20, 40]。
params: 同 formatter 的参数相同。
dom: tooltip 的 dom 对象。
rect: 只有鼠标在图形上时有效,是一个用x, y, width, height四个属性表达的图形包围盒。
size: 包括 dom 的尺寸和 echarts 容器的当前尺寸,例如:{contentSize: [width, height], viewSize: [width, height]}。
好了既然了解回调参数,那么接下来就利用回调参数来进行更改,
首先获取鼠标位置当然point,还是要跟随鼠标位置的,这里就不需要我们自己去计算了,
然后将提示框的高度拿到,既然有dom,我们就操作dom,这里dom.dom.offsetHeight即为提示框高度,10这个值是对提示框的微调操作,
是不是很简单主要代码如下:
tooltip: {
trigger: 'item',
backgroundColor:'rgba(255,255,255,0.3)',
padding:[10, 20],
textStyle:{
color:'#fff',
fontSize:18,
lineHeight:'30px'
},
position: function (point, params, dom, rect, size) {
return [point[0]+10, point[1]-dom.offsetHeight -10];
},
formatter: function(params) {
var res = '
res+=params.name + ' : ' + params.value[2] + ' 台';
return res;
}
},