echarts tooltip提示框组件自定义背景图像

最新推荐文章于 2025-05-07 21:02:57 发布

键盘打烂月入过万

最新推荐文章于 2025-05-07 21:02:57 发布

阅读量3.4k

点赞数 11

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

本文链接：https://blog.youkuaiyun.com/weixin_67271921/article/details/129238657

版权

echarts 专栏收录该内容

1 篇文章

订阅专栏

文章讲述了在实现UI设计要求，为Echarts地图组件的tooltip添加背景图时遇到的问题及解决方案。通过设置tooltip的renderMode为html，附加到body并定义className，然后在外部CSS中设置样式，成功实现了背景图效果。然而，这导致了大屏其他图表不显示的问题。最后，通过将CSS写在独立的style标签中，并隐藏body的滚动条，成功解决了图表显示问题。

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

本次需求根据ui设计，需要给map组件里面的提示框组件加上ui画的背景图，

试过了class 试过行内样式，包括 echarts的extraCssText属性，包括formatter函数最终都以失败告终（是我自己的问题）

最终最终看了开发文档在tooltip里面定义classname

直接上成功的案例：

在tooltip里面定义classname

 tooltip: {
          // 更改悬浮框样式
          renderMode:"html",
          appendToBody:true,
          className: 'custom-tooltip',

.custom-tooltip {
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  background: url('../img/map-bg.png') center center no-repeat;
  background-size: 100% 100%;
  width: 3.9rem;
  height: 3.9rem;
  color: #fff;
  justify-content: start;
}

这样就可以设置tooltip的背景达到我想要的效果了

效果：

但是但是但是！

这么写，会出现一个问题就是我鼠标不移入对应的悬浮框，会导致我的大屏有两个图表不显示

阅读文档之后感觉是这里的问题，但是又不知道所以然...

最终看了文档

加了这两段代码

  renderMode:"html",
          appendToBody:true,

并且css写在另起一个style 不用 deep

<style>
body{    
  overflow-y: hidden;
  overflow-x: hidden;
}
.custom-tooltip {
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  background: url('../img/map-bg.png') center center no-repeat;
  background-size: 100% 100%;
  width: 3.9rem;
  height: 3.9rem;
  color: #fff;
  justify-content: start;
}
</style>

解决了刚才我说的问题，这个问题可能只有我遇到也是找到了解决办法，最主要的目的还是记录一下 tooltip的使用谢谢阅读