Incubator-echarts: echarts tooltip is covered by canvas on iOS13
Version
4.3.0
Steps to reproduce
option ={
grid:{
top:'20%',
bottom:0,
right:'5%',
left:'0',
containLabel:true,
},
tooltip: {
trigger: 'axis',
confine:true,
},
xAxis: {
type: 'category',
},
yAxis:{
name:'元/吨',
min:'dataMin',
},
dataset:{
dimensions:['日期','采购价'],
source:[
{'日期':'2019-01-02','采购价':100},
{'日期':'2019-01-05','采购价':400}
]
},
series: {
type:'line',
smooth:true,
symbol: 'circle',
symbolSize:2,
sampling: 'average',
connectNulls:true,
label:{
// show:true
},
itemStyle: {
color: '#ffc858'
},
lineStyle:{
width:1
},
areaStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#ffc858'},
{offset: 1, color: 'rgba(255,200,88,0)'}
]
)
}
},
}
What is expected?
tooltip正常提示
What is actually happening?
tooltip被图形容器遮盖
collingmk
All 30 comments
目前仅有iphone11 出现此问题
collingmk
on 11 Oct 2019
多个chart同时出现在一张页面上 会出现此问题
collingmk
on 12 Oct 2019
这个是网页直接在移动端跑，还是在小程序之类的环境中？
可以试试 https://echarts.apache.org/zh/option.html#tooltip.renderMode 设为 'richText'.
Ovilia
on 12 Oct 2019
我在IOS 13上也遇到了这个问题，tooltip弹出无法覆盖图表，反而被图表覆盖了。IOS < 13是正常的。
Echarts 版本： 4
客户端： ionic 混合APP
手机：iphone X
手机系统版本：IOS 13
yangguansen
on 12 Oct 2019
@yangguansen 试一下我上面的方法？
Ovilia
on 14 Oct 2019
加上这个后，确实可以了，感谢。
yangguansen
on 18 Oct 2019
@Ovilia 再请教一下：目前已有几十个图表, 如何统一修改全局配置，来让实例们继承这个属性呢？
yangguansen
on 18 Oct 2019
两个方法，一个是使用 ECharts 的主题 echarts.registerTheme，这个方法的参数 theme 就是配置项 option，试试可不可以用，有点不确定。
另一种方法是，自己写一个合并默认配置项（包含这个 renderMode 的设置）与每个图表的配置项的方法，返回值是这两个配置项 merge 后的对象。
Ovilia
on 18 Oct 2019
@Ovilia 如果我的tooltip里面使用了formatter，返回了html的字符串，是不是就不能用renderMode等于richText这种方式？那怎么才能让自定义tooltip在ios13不会被覆盖？
Twinkle999
on 21 Oct 2019
@Ovilia 我的tooltip在ios13上使用了formatter,需要返回html字符串，使用rederMode参数为richText是不可以的，所以我在extraCssText,上面设置了z-index,想问一下是否还有其他好的办法？？
Cqy1995
on 21 Oct 2019
@Ovilia 请问一下：
1.这个问题未来是否会修复？
2.修改源码中的renderMode的默认值，是否可以一次性解决所有实例问题？
yangguansen
on 21 Oct 2019
@Ovilia 如果设置了richText, 发现自定义tooltip的marker无法显示出来，请问有解决方法吗？
yangguansen
on 21 Oct 2019
@Cqy1995 请问extraCssText可以解决IOS13上被遮住的问题吗？
yangguansen
on 21 Oct 2019
添加样式是可以的，但是层级的话还是不可以！
------------------ 原始邮件 ------------------
发件人: sanmu <[email protected]>
发送时间: 2019年10月21日 19:27
收件人: apache/incubator-echarts <[email protected]>
抄送: Cqy1995 <[email protected]>, Mention <[email protected]>
主题: 回复：[apache/incubator-echarts] echarts 移动端 toolTip被echarts容器遮盖（iphone11手机） (#11383)
Cqy1995
on 21 Oct 2019
@Ovilia 我的tooltip在ios13上使用了formatter,需要返回html字符串，使用rederMode参数为richText是不可以的，所以我在extraCssText,上面设置了z-index,想问一下是否还有其他好的办法？？
@Cqy1995 这个问题是由于 ECharts 现在 tooltip 的 z-index 不够高引起的吗？修改 extraCssText 是正确的做法，如果是这个原因，我们也可以把默认值设大一点。
Ovilia
on 22 Oct 2019
@Ovilia 请问一下：
1.这个问题未来是否会修复？
2.修改源码中的renderMode的默认值，是否可以一次性解决所有实例问题？
- 如果明确是 tooltip z-index 太低引起的话，是比较好修复的，会在 ECharts 修复
- 不能把默认值改完
richText，因为richText本质是在 Canvas 绘制内容，可能会有一些局限性，比如无法支持 html 格式的 formatter
Ovilia
on 22 Oct 2019
@Ovilia tooltip的dom是和canvas父级平层，所以我觉得不应该是canvas z-index的问题。
yangguansen
on 22 Oct 2019
想问一下这个问题解决了么
snail1
on 23 Oct 2019
想问一下这个问题解决了么
snail1
on 23 Oct 2019
请问这个问题解决了吗？我们研发组也遇到同样的问题。
设备环境：Android8.0.0
问题：滑动tooltip显示在折线图层下方（已排除z-index的问题）
（renderMode设置无效，因为formatter是拼接成的HTML） @Ovilia
lschenn
on 25 Oct 2019
@Ovilia 请问这个问题解决了么 如果使用richText 图形点击事件会失效 extraCssText设置z-index 也是没有用的
xuchaozhang
on 28 Oct 2019
我们会尽快解决这个问题
Ovilia
on 31 Oct 2019
看起来是 safari 13 的 bug，我们在 https://github.com/ecomfe/zrender/pull/522 中绕过了这个 bug，这个版本下周末左右发布
pissang
on 1 Nov 2019
position: function(point, params, dom, rect, size) {
dom.style.transform = "translateZ(0)";
}
这样可以解决！
LiweiTracy
on 1 Nov 2019
看起来是 safari 13 的 bug，我们在 ecomfe/zrender#522 中绕过了这个 bug，这个版本下周末左右发布
我们今天发现这个问题，等不到你们发布新包了。自己在项目中怎么改呢？
luyanchen
on 1 Nov 2019
@luyanchen 用 !important 强制覆盖 echarts 容器中的样式，去掉 overflow
pissang
on 4 Nov 2019
看起来是 safari 13 的 bug，我们在 ecomfe/zrender#522 中绕过了这个 bug，这个版本下周末左右发布
发布了吗？升级echarts能解决问题吗？
qinghechaoge
on 7 Nov 2019
给tooltip的div添加css属性transform: translateZ(0);可以解决
qq79952008
on 21 Nov 2019
Hello, I am having the same issue but I don't know Chinese, can anyone translate the solution?
Samerkassem
on 7 Apr 2020
Hello, I am having the same issue but I don't know Chinese, can anyone translate the solution?
This problem had resolved in latest version. You can try to download the latest version.
If you want to see detail about the code of the problem. Check this https://github.com/ecomfe/zrender/pull/522
yangguansen
on 8 Apr 2020
Related issues
publisherfk
·
3Comments
antorman
·
3Comments
Zendic
·
3Comments
decadef20
·
3Comments
771752687
·
3Comments
Most helpful comment
给tooltip的div添加css属性transform: translateZ(0);可以解决