echarts 自定义tooltip样式

1.echarts options设置

    tooltip: {
      trigger: 'item',
      className: 'custom-tooltip-box', // 命名父级类名
      formatter: function (params) {
        const { name, value } = params
        var htmlText = `<div class='custom-tooltip-style'>  // 用html自定义样式
                            <div class='custom-tooltip-top'>
                                <div class='custom-tooltip-topImg'></div>
                                ${name}专利量
                            </div>
                            <div class='custom-tooltip-middle'></div>
                            <div class='custom-tooltip-bbotton'>
                              ${value || 0}
                            </div>
                        </div>`
        return htmlText
      }
    },

2.设置样式

<style scoped lang="scss">
// 给父盒子清除默认已有样式
/deep/ .custom-tooltip-box {
  padding: 0 !important;
  border: none !important;
  // 给子盒子自定义样式
  .custom-tooltip-style {
    margin: 16px 25px 19px 25px;
    display: flex;
    flex-direction: column;
    .custom-tooltip-top {
      display: flex;
      color: #000000;
      align-items: center;
      .custom-tooltip-topImg {
        background-image: url('/static/images/icon.png');
        width: 12px;
        height: 14px;
        margin-right: 8px;
      }
    }
    .custom-tooltip-middle {
      opacity: 0.5;
      height: 1px;
      background: #a3a199;
      margin: 8px 0 12px 0;
    }
    .custom-tooltip-bbotton {
      color: #000000;
      font-size: 30px;
      font-family: Helvetica;
      font-weight: bold;
    }
  }
}
</style>