Echarts中tooltip超出外层div显示不全问题
来源:互联网 发布:日本旅游注意事项知乎 编辑:程序博客网 时间:2024/06/07 16:01
1、问题:提示框是根据鼠标位置实时变化的,但是当echarts图标高度较小,数据较多时,就会产生提示框显示不全的问题,如下图:
2、分析:
要想提示框不超出当前外层div,不考虑x轴显示位置的情况下,y轴显示位置必须固定,此时就需要设置tooltip的position属性。
position属性可以设置提示框浮层的位置,默认不设置时位置会跟随鼠标的位置。属性值可以设置如下:
1)Array:通过数组表示提示框浮层的位置,支持数字设置绝对位置,百分比设置相对位置(数据放在引号内,不然会报错)。
position: [10, 10]
position: ['50%', '10%']
这种方式固定在了相应位置
2)Function:回调函数,格式如下
(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}。
3、根据我自己的实际情况(图例在右侧),我选择属性值使用函数,函数返回值为数组,距离左侧距离随鼠标移动,距离上侧距离为固定值。
position: function(point, params, dom, rect, size){
//其中params为当前鼠标的位置
return [params[0]-220,'10%'];
}
效果图:
- Echarts中tooltip超出外层div显示不全问题
- echarts X轴数据显示不全问题
- echarts x轴文字显示不全问题
- echarts中tooltip的抖动问题
- echarts tooltip显示图片
- Echarts字符云tooltip显示混乱问题的解决办法
- echarts插件——关于echarts在默认隐藏的div中不显示的问题
- echarts图例显示不全以及颜色的一些问题
- echarts中横坐标值显示不全(自动隐藏)解决方案
- echarts中横坐标值显示不全(自动隐藏)解决方案
- Echarts中axislabel文字过长导致显示不全或重叠
- div+css布局问题:设置浮动后的div高度变化后不超出最外层div
- echarts X轴显示不全
- 解决Echarts使用tab切换时只显示第一个tab中图表,其他tab中图表不显示或显示不全问题
- echarts x轴显示不全 换行显示
- 自定义Echarts地理分布图tooltip显示内容
- Echarts图表中的tooltip无法显示
- 外层DIV 包含内层DIV 样式问题
- 关于日期插件Wdatepicker的用法
- 迅雷快鸟重大升级,23省市电信光纤宽带可提速至200M
- restful 表述性状态转移
- Spark-Sql整合hive,在spark-sql命令和spark-shell命令下执行sql命令和整合调用hive
- RxJava入门
- Echarts中tooltip超出外层div显示不全问题
- Android Material Design Icon (material design 的图标 android studio )插件安装
- PyQt5中文基础教程6 对话框
- C调用动态库,windows/linux
- 技巧:修改Chrome默认搜索引擎为Google.com
- vue绑定dom元素标签的方式
- 23种设计模式汇总整理
- 在ubuntu下安装teamviewer,远程控制
- Shrio-004