1. confine:true
作用:将 tooltip 框限制在图表的区域内
当图表外层的 dom 被设置为 ‘overflow: hidden’,或者移动端窄屏,导致 tooltip 超出外界被截断时,此配置比较有用。
tooltip: {
trigger: 'axis',
position: 'bottom',
confine: true,
}
2. appendToBody:true
默认该值为false, true表示将 tooltip 的 DOM 节点添加为 HTML 的 <body>
的子节点。
一般图表容器尺寸过小时,可以用这个方法解决。
false 表示,tooltip 的 DOM 节点会被添加为本图表的 DOM container 的一个子孙节点。但是这种方式导致,如果本图表的 DOM container 的祖先节点有设置 overflow: hidden,那么当 tooltip 超出 container 范围使可能被截断。这个问题一定程度上可以用 tooltip.confine 来解决,但是不一定能解决所有场景。
tooltip: {
appendToBody: true,
},
3. extraCssText
添加额外的 css 样式到浮层。
- 一般用来改变改变悬浮提示框的层级,有时提示框会显示在其他元素底下,可以将
z-index
的值调大。
tooltip: {
appendToBody: true,
extraCssText: 'z-index:999',
},
tooltip: {
trigger: 'axis',
position: 'bottom',
confine: true,
axisPointer: {
type: 'none',
},
textStyle: {
color: 'fff',
},
enterable: true, //允许鼠标进入提示框浮层中,默认为false
extraCssText: 'max-width:340px;max-height:83%;overflow:auto', //出现滚动条
}