echarts中饼图的tooltip根据鼠标位置改变弹出位置-Toy模板网

这篇具有很好参考价值的文章主要介绍了echarts中饼图的tooltip根据鼠标位置改变弹出位置。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

echarts中的tooltip.position属性配置参考 echarts配置手册

问题：使用echarts绘制饼图，tooltip的弹出位置会遮挡住图表。

echarts中饼图的tooltip根据鼠标位置改变弹出位置

需求：tooltip的弹出位置在饼图外圈，不遮挡图表内容，切根据鼠标的位置而改变。

解决方法：在tooltip的配置项中对position进行配置，使用回调函数实现tooltip弹出位置的改变。

回调函数，格式如下：

 (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array

参数：
point: 鼠标位置，如 [20, 40]。
params: 同 formatter 的参数相同。
dom: tooltip 的 dom 对象。
rect: 只有鼠标在图形上时有效，是一个用x, y, width, height四个属性表达的图形包围盒。
size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。

返回值：
可以是一个表示 tooltip 位置的数组，数组值可以是绝对的像素值，也可以是相百分比。
也可以是一个对象，如：{left: 10, top: 30}，或者 {right: '20%', bottom: 40}。

具体代码：

tooltip: {
    trigger: 'item',
    // tooltip位置根据鼠标位置而改变
    position(point, params, dom, rect, size) {
    const obj = {};

    // 鼠标的水平位置（point[0]）小于图表容器宽度的一半（size.viewSize[0] / 2）时
    // tooltip显示在右边（right）,反之显示在左边（left）。
    // -100 为位置偏移量，根据具体需求进行调整

    obj[['right', 'left'][+(point[0] < size.viewSize[0] / 2)]] = -100;

    // 鼠标的竖直位置（point[1]）小于图表容器高度的一半（size.viewSize[1] / 2）时
    // tooltip显示在底边（bottom）,反之显示在顶边（top）。
    // -58 为位置偏移量，根据具体需求进行调整

    obj[['bottom', 'top'][+(point[1] < size.viewSize[1] / 2)]] = -58;
    return obj;
    },
}

实现效果：

echarts中饼图的tooltip根据鼠标位置改变弹出位置