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