echarts 实现自定义tooltip提示框浮层内容显示

问题场景

项目开发中折线图tooltip需要显示数据单位, 不能在option中直接配置只能通过tooltip.formatter函数来实现自定义内容的实现。实现过程也十分简单，废话不多说直接上代码。

option = {
    tooltip: {
        trigger: 'axis',
        padding: [10, 16],
        formatter(params){
            let str =   `<div style='display: flex;justify-content: space-between;margin-bottom: 12px'>
                            <span>${params[0].axisValue}</span>
                            <span>(个)</span>
                        </div>`;
            for(let i=0; i<params.length; i++){
                let series = params[i];
                str += `<p style="display: flex;justify-content: space-between;align-items: center;">
                            <span style="margin-right: 20px">
                                <span style=\"display:inline-block;margin-right:4px;border-radius:6px;width:6px;height:6px;background-color: ${series.color};"\></span>
                                <span >${series.seriesName}</span>
                            </span>
                            <span>${series.value}</span>
                        </p>`;
            }
            return str;
        }
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    axisPointer: {
        lineStyle: {
            type: 'solid'
        }
    },
    series: [
        {
            name: '请求数量',
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
        },
        {
            name: '访问',
            data: [100, 200, 250, 300, 135, 100, 60],
            type: 'line'
        },
    ]
};

关键函数formatter

1. 字符串模板提示框浮层内容格式器，支持字符串模板和回调函数两种形式。模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。表现形式：formatter: ‘{a}: {b}<br />{c}: {d}’>。
2. 回调函数形式(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]
   params参数打印结果如下
   

配置效果图

配置效果如上图所示， 将echats示例option替换为本文option配置即可看到展示效果。最后附上官网tooltip配置链接