炫意html5
最早CSS3和HTML5移动技术网站之一

ECharts – tooltip详解(4)——位置设置

Echarts提示框(tooltip)浮层位置,不设置时,默认位置会跟随鼠标的位置。

提示框显示不全的问题

当提示框位置超出图表所在区域时,就可能出现提示框显示不全的问题.

如下所示:

提示框正常显示时:

提示框显示不全时:

解决问题的方法:人为设置提示框的位置

我们需要去设置提示框位置。

一共有两种解决该问题的思路:

1、设置固定的提示框位置的方法

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

数组第一个元素设置距离父元素左边的距离,数组第二个元素设置距离父元素上边的距离

这种方法设置的提示框位置固定不变,不会随鼠标移动而位置变化

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

tooltip: {
trigger: ‘axis’,
position: [20, 20]
// 等价于
// position: [‘20px’, ‘20px’]
},

(2)百分比设置相对位置 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’
},

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

回调函数中有:五个参数,一个返回值:

五个参数:

  • point:鼠标位置,是一个数组,如 [20, 50]
  • params:Object|Array. 是需要的数据集
  • 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};
}

2、设置提示框位置随鼠标移动,并解决提示框显示不全的问题

设置提示框位置随鼠标移动的代码如下:

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];
}

炫意HTML5 » ECharts – tooltip详解(4)——位置设置

Java基础教程Android基础教程