加入收藏 | 设为首页 | 会员中心 | 我要投稿 北几岛 (https://www.beijidao.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 大数据 > 正文

echarts 中国地图提示框

发布时间:2021-07-06 05:43:09 所属栏目:大数据 来源: https://www.cnblogs.com/rainb
导读:point: 鼠标位置,如 [20,40]。 params: 同 formatter 的参数相同。 dom: tooltip 的 dom 对象。 rect: 只有鼠标在图形上时有效,是一个用x,y,width,height四个属性表达的图形包围盒。 size: 包括 dom 的尺寸和 echarts 容器的当前尺寸,例如:{contentSize:

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,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;

? ? ? ? }

? ? },
————————————————
版权声明:本文为CSDN博主「Mr.Tang's Blog」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_27751965/article/details/89223277

(编辑:北几岛)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读