Echarts图表tooltip修改后样式变了的解决办法
in 前端 with 0 comment

Echarts图表tooltip修改后样式变了的解决办法

in 前端 with 0 comment

这是echarts默认的图标样式

image-20211021174148081.png

echarts支持修改tooltip.formatter来修改tooltip的内容

image-20211022173414924.png

如果只是用字符串形式的,会发现左侧的小圆点丢失了(效果如下图)

formatter: '{b0}<br>{a0}:{c0}次'

image-20211021165558988.png

经过测试发现,可以通过回调函数来获取小原点的html代码(marker属性)。

最后封装了一个添加单位的函数

/**
 * 生成echarts原生tooltips样式
 * @param {string} unit
 */
export function appendTooltipUnit (unit) {
  return (params) => {
    let tooltipHTML = ''
    if (params.length) {
      tooltipHTML += params[0].axisValueLabel + '<br>'
      params.map((item) => {
        tooltipHTML += `${item.marker} ${item.seriesName} &nbsp;&nbsp;&nbsp;&nbsp;<b>${item.value}${unit}</b><br>`
      })
    }
    return tooltipHTML
  }
}

使用方法:

formatter: appendTooltipUnit('次')

效果如下图(跟原生效果几乎一致)

image-20211021174101857.png

Comments are closed.