效果图

tootip.png

js方法：

export function tooltipCustom(toolTipSource) {
  if (!toolTipSource) {
    return ''
  }
  let header = toolTipSource.header
    ? `<div class="echart-tooltip-header">${toolTipSource.header}</div>`
    : toolTipSource.body
    ? `<div class="echart-tooltip-header">${toolTipSource.body[0].name}</div>`
    : ''
  let body = toolTipSource.body
    ? toolTipSource.body
        .map(n => {
          let keyDom = n.seriesName
            ? `<div>
                <span style="display:inline-block;margin-right:5px;width:8px;height:8px;border-radius: 50%;background-color:${
                  n.color
                };"></span>
                <span>${n.seriesName === 'hide' ? '' : n.seriesName}</span>
              </div>`
            : ''
          let valueDom = `<div>${n.value}</div>`
          return `<div class="echart-tooltip-module">
              ${keyDom}
              ${valueDom}${toolTipSource.unit ? toolTipSource.unit : ''}
            </div>`
        })
        .join('')
    : ''
  return `<div class="echart-tooltip-wrap">
              ${header}
              <div class="echart-tooltip-body">
                  ${body}
              </div>
          </div>`
}

使用：

tooltip: {
  trigger: 'axis',
  className: 'echart-tooltip-content',
  formatter(params) {
    return tooltipCustom({
      unit: '%',
      body: params
    })
  }
},

css：

  .echart-tooltip-content {
    background-color: rgba(255, 255, 255, .1) !important;
    backdrop-filter: blur(15px) !important; // 毛玻璃效果
    border: none !important;
    font-size: 12px !important;
    padding: 6px 10px 10px !important;

    .echart-tooltip-wrap {
      color: #1D2129;

      .echart-tooltip-header {
      }
      .echart-tooltip-body {
        background-color: #fff;
        padding: 10px;
        border-radius: 4px;

        .echart-tooltip-module {
          display: flex;
          justify-content: space-between;
          div:first-child {
            color: #4E5969;
          }
        }
      }
    }
  }