echarts折线图鼠标快速移出时tooptip还存在的情况

最新推荐文章于 2024-07-23 18:06:46 发布

蜂巢糖FCT

最新推荐文章于 2024-07-23 18:06:46 发布

阅读量643

点赞数 2

分类专栏：前端折线图文章标签： echarts javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_36093530/article/details/129237481

版权

前端同时被 2 个专栏收录

29 篇文章

订阅专栏

折线图

3 篇文章

订阅专栏

文章讲述了在Echarts图表中，通过监听鼠标事件(mousemove和globalout)来控制图表下的div元素显示和隐藏tooltip。通过添加和移除classtooptip，并配合CSS样式实现tooltip的显示隐藏逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在打开f12时查看图表元素看到图表渲染了一个div展示tooptip
在这里插入图片描述

this.echart_1.setOption(option);
this.echart_1.resize();
this.echart_1.on('globalout', function (params) {
    console.log('globalout');//鼠标每次移出时触发
    _this.echart_1._dom.childNodes[1].classList.add('tooptip');
}); 
this.$refs.echart_1.addEventListener('mousemove',function(){
   console.log('mousemove');//鼠标每次移入时触发
   _this.echart_1._dom.childNodes[1].classList.remove('tooptip'); 
});
<style lang="less" scoped>
 /deep/ .tooptip{
    display: none !important;
}
<style>