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

2021/10/22
- 编程
0阅读

这是echarts默认的图标样式

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

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

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

经过测试发现，可以通过回调函数来获取小原点的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
    }
}

使用方法：

1	formatter: appendTooltipUnit('次')

效果如下图（跟原生效果几乎一致）

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

其他推荐内容

keep-alive三级以上路由不缓存

ElementUI table组件无限滚动加载

评论区