echarts中tooltip的位置设置
对于echarts中的tooltip位置有三种设置方法。方法一:通过数组设置提示框位置(1)数字设置绝对位置 position: [10, 10]tooltip: {trigger: 'axis',position: [10, 10]// position: ['10px', '10px']},(2)百分比设置相对位置 position: ['50%', '50%']tooltip: { tri
对于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};
}
更多推荐
所有评论(0)