echarts 实现tooltip提示框样式自定义

        实现echarts图提示框自定义样式，最重要的是给tooltip加一个自定义class，下面是我写的例子：

tooltip: {
  trigger: "axis",
  axisPointer: {
    type: "line",
  },
  className: "custom-tooltip-box",
  formatter: function (params) {
    return `<div class='custom-tooltip-style'>
      <span>${params[0].name}年</span></br>
      <div class="span">
        <span>缺材飞机数量：</span>
        <span>${params[0].value}</span>
      </div>
    </div>`;
  },
}

::v-deep .custom-tooltip-box {
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  // 给子盒子自定义样式
  .custom-tooltip-style {
    width: 25rem;
    min-height: 12rem;
    background: url("../../../../assets/images/tooltipBg.webp") no-repeat center
      center;
    background-size: 100% 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 1rem 2rem;
    font-size: 1.6rem;
    .span {
      display: flex;
      justify-content: space-between;
      margin-top: 0.5rem;
      :last-child {
        font-weight: 600;
        font-size: 1.8rem;
      }
    }
  }
}

        该实例提示框背景是切的图片，内容通过formatter进行配置，样式上通过赋予className并在style标签中编写，实现如下效果：

(该tooltip自定义样式适用于所有的echarts图，如折线图、柱状图、饼图)