注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Aramey

前端开发

 
 
 

日志

 
 
 
 

关于Echarts提示框tooltip高度问题  

2016-04-20 11:26:13|  分类: 前端开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
在使用Echarts的数据图表时,如果容器太小,提示框tooltip就会出现问题,比如tooltip的高度不受控制,在触发时会有一半被遮到了,让人很不舒服。

关于Echarts提示框tooltip高度问题 - Aramey - Aramey
这是Echarts在容器较小情况下的显示。

关于Echarts提示框tooltip高度问题 - Aramey - Aramey
这是tooltip高度不受控制的状况

关于Echarts提示框tooltip高度问题 - Aramey - Aramey
这是tooltip在触发时有一半被遮到的状况

要想解决问题,就必须要找出问题原因!
首先,在Echarts中的tooltip是DIV容器,上图为证:
关于Echarts提示框tooltip高度问题 - Aramey - Aramey
我们会发现这个tooltip是div标签,而且里面有js生成Class,那也就是说,这个tooltip是能继承行高line-height属性的,而这个tooltip的高度是继承了父容器才导致的现在这种状况的!
既然是标签,那就好办了,我们通过生成的Class为他定义一个样式:

.echarts-tooltip {
line-height: 18px;
}

这样就重置了tooltip的样式!
效果图:
关于Echarts提示框tooltip高度问题 - Aramey - Aramey

但是我们会发现,tooltip在触发时有一半被遮到了!!
这该怎么办呢?
这时候我们查找tooltip父容器这个标签会发现,原来它自带 overflow: hidden; 这个样式!!
关于Echarts提示框tooltip高度问题 - Aramey - Aramey

那我们可以通过改变这容器的 overflow 来调整!但是这个容器没生成的Class,那也没问题,我们可以通过父容器!

.Echarts-box > div{
overflow: inherit !important;
}

这样就可以了!!最后给上效果图!!
关于Echarts提示框tooltip高度问题 - Aramey - Aramey
 就算再小的容器,我们都能自由控制tooltip了!

尊重原创,如需转载,请注明出处!谢谢!
原文链接:http://aramey.blog.163.com/blog/static/13900607620163201146794/
  评论这张
 
阅读(90)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017