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

本次需求根据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的使用 谢谢阅读