- 数字设置绝对位置 position: [20, 20]
tooltip: {
trigger: 'axis',
position: [20, 20]
// 等价于
// position: ['20px', '20px']
},
- 百分比设置相对位置 position: [‘50%’, ‘50%’]
tooltip: {
trigger: 'axis',
// 相对位置
position: ['50%', '30%']
},
- 直接设置position的值为:‘inside’|‘top’|‘bottom’|‘left’|‘right’
这种方法只在设置 trigger: ‘item’, 的时候才有效
inside
鼠标所在图形的内部中心位置
top
鼠标所在图形上侧
left
鼠标所在图形左侧
right
鼠标所在图形右侧
bottom
鼠标所在图形底侧
tooltip: {
trigger: 'item',
position: 'top'
},
设置提示框位置随鼠标移动,并解决提示框显示不全的问题
position: function (point, params, dom, rect, size) {
// 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下
// 提示框位置
var x = 0; // x坐标位置
var y = 0; // y坐标位置
// 当前鼠标位置
var pointX = point[0];
var pointY = point[1];
// 外层div大小
// var viewWidth = size.viewSize[0];
// var viewHeight = size.viewSize[1];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = 5;
} else { // 左边放的下
x = pointX - boxWidth;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 5;
} else { // 上边放得下
y = pointY - boxHeight;
}
return [x, y];
}
在柱子上显示值
series: [
{
name: '顾客',
type: 'bar',
step: 'start',
data: this.hairerNamxAxisCountData
? this.hairerNamxAxisCountData
: [0],
color: '#ff8555',
barWidth:20,
label:{
normal:{
show:true, //开启显示
position:'top' //显示位置
}
}
},
]
转发来至:https://blog.csdn.net/sleepwalker_1992/article/details/83023546