如何设置echarts tootip {trigger: 'item'}的‘提示

发布时间：2019-03-01 10:57:22 修改时间：2019-03-01 10:57:22 阅读：6878 评论：0 0

本文示例：将提示框跟随鼠标右上方浮动，其他浮动设置参考即可

先说明回调参数

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 = '<center>栏目<center>'

            res+=params.name + ' : ' + params.value[2] + '&nbsp;台';

            return res;

        }

    },

---