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

一. 代码环境

“echarts”: “^5.4.0”,
“vue”: “^3.2.37”,

二. 实现目标

原始效果如下图：

想要的效果，如下图：自定义的背景图片

三. 实现代码

步骤一： 给tooltip加一个类名，如下面的className: ‘custom-tooltip-box’，清除他的padding，border等。

步骤二：通过formatter属性，处理需要展示的数据，并且放到子标签里面，给子标签定义类名。

<script setup>
const options = {
  tooltip: {
    // 提示框组件
    trigger: 'axis', // 坐标轴触发，应用于柱状图、折线图
    triggerOn: 'mousemove', // 鼠标移动时触发
    axisPointer: {
      type: 'none',
    },
    className: 'custom-tooltip-box',
    formatter: function (params, elOne, elTwo) {
      console.log(params)
      console.log(elOne)
      console.log(elTwo)
      // 循环处理数据，展示数据
      var htmlText = `<div class='custom-tooltip-style'>显示内容待处理</div>`
      return htmlText
    },
  },
}
</script>

<style scoped lang="scss">
// 给父盒子清除默认已有样式
:deep(.custom-tooltip-box) {
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  // 给子盒子自定义样式
  .custom-tooltip-style {
    width: 92px;
    height: 171px;
    background-image: url('@/assets/images/echarts/tooltip-bgc.png');
    background-size: cover;
    color: #fff;
  }
}
</style>

定义类名后，得到的效果如下图：

总结：

其实就是通过给标签加类名，然后通过CSS来加上我们想要的背景图片，以及处理需要展示的数据样式，这些统一写在style标签里面，比直接配置在tooltip对象里面方便多了。

如果只是想加背景图，并不想改显示数据样式，那么就去掉formatter配置，直接在tooltip的类名里面通过CSS加背景图片。

（完）