自定義echarts中tooltip顯示的内容

/**
 * echarts中tooltip顯示的内容
 * @param {*} params 坐标軸觸發擷取的源資料
 * @param {*} noPercent 是否帶%，true或false
 */
export const chartTooltip = (params, noPercent) => {
  // 判定資料是否為對象或者數組
  if (!(params instanceof Array)) {
    return '請傳入正确格式的數組'
  }
  // axisValue是option裡的tooltip，name是series裡的tooltip
  let tempStr = params[0].axisValue
    ? `${params[0].axisValue}<br/>`
    : `${params[0].name}<br/>`
  params.forEach((val, key) => {
    let tempBgColor = params[key].color
    let tempMarkerHtml = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:8px;height:8px;background-color:${tempBgColor};color:#ccd3d9;"></span>`
    let tempStrAA = params[key].seriesName
    let tempStrBB = unitConverter(params[key].value)
    if (key < params.length - 1) {
      let tempStrA = noPercent
        ? `${tempMarkerHtml}${tempStrAA}：${tempStrBB}<br/>`
        : `${tempMarkerHtml}${tempStrAA}：${tempStrBB}%<br/>`
      tempStr += tempStrA
    } else {
      let tempStrB = noPercent
        ? `${tempMarkerHtml}${tempStrAA}：${tempStrBB}`
        : `${tempMarkerHtml}${tempStrAA}：${tempStrBB}%`
      tempStr += tempStrB
    }
  })
  return tempStr
}
           

使用方法：

import { chartTooltip } from '@/config/myUtils'

// option裡面
tooltip: {
  formatter (params) {
    return chartTooltip(params)
  }
}

// series裡面單個item
series: [{
  name: '0%以下',
  type: 'bar',
  barGap: 0,
  barMaxWidth: '20%',
  data: this.y1Data,
  tooltip: {
    formatter (params) {
      let tempArr = [params]
      return chartTooltip(tempArr)
    }
  }
}]
           

展示效果如下（樣式可自定義）