页面元素的 float 属性缺失导致 echarts 的 tooltip显示不正确

问题背景：商机项目，急需初版，没前端支援，后端顶上。于是echarts现学现卖。

问题描述：

1.页面有一个折线图，初始化和刷新都通过ajax。很简单。

2.一天来了新需求，没数据时要求显示一张提示图片“暂无数据”。

    我估摸了一下，echart 应该有api支持这个功能。但是吧，得花时间去找方案，得学习，进度又急的挠头。

    有没有简单点的？想起了个鸡贼一点的。页面同时写两个元素，一个放echarts，一个放图片。根据display属性切换显示哪一个。

    开搞。

        页面：

        公共的切换方法：

function echartToImg(echart){var id = echart._dom.id;$('#'+id).css("display","none");$('#'+id+'Img').css("display","inline");
}function imgToEchart(echart){var id = echart._dom.id;$('#'+id).css("display","inline");$('#'+id+'Img').css("display","none");
}

        再在每次ajax之后判断下数据：

...//在ajax中success:function(data){if (data.series.length == 0){echartToImg(pageLine);}else{imgToEchart(pageLine);...//其他处理

大功告成。

可是好景不长，不久就出现了问题。有两个图表的tooltip显示不正常。

熟悉echarts 的同学应该都知道 tooltip这个东西。当鼠标滑过图标时显示对应的数据。

但就是有两个图表，鼠标滑过时，tooltip闪了一下就跑到页面底部去了。而且是原来可见的页面再往下的地方。于是除了滚动条鬼畜之外啥也看不到。

这现象就很奇异了，让人一时摸不到头脑。难道我的方案有问题？不过此时图表写了不下20个了，除了这两个都没问题。思路应该是对的，应该是某些细节出问题。

于是找到其他页面最相似的图表代码进行对比，页面、脚本、样式一行一行对。终于发现了。

这个float 会影响tooltip? 图表的其他部分都一切正常啊。不管了先写上吧。

结果，问题解决。。。。。。

不明不白的，感觉想获得真相得看下 echarts 的源码了。

不过，现在进度还挠头呢。等将来有时间或有大佬解释吧。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！