问题场景
项目开发中折线图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
字符串模板提示框浮层内容格式器，支持字符串模板和回调函数两种形式。模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。表现形式：formatter: ‘{a}: {b}<br />{c}: {d}’>。回调函数形式(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]params参数打印结果如下
配置效果图
配置效果如上图所示， 将echats示例option替换为本文option配置即可看到展示效果。最后附上官网tooltip配置链接
