echarts自定义tooltip中的内容

原本的默认样式长这样：

也就是有几个图例，就显示几个再加上数字。

默认代码是这样的：

tooltip: {
    trigger: 'axis',
    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'cross',        // 默认为直线，可选为：'line' | 'shadow' 'cross'
                        
    },
    confine:true, // 限制 tooltip 在图标区域内显示                
},

但我需要的是这样的:

代码如下：

需要加一个 formatter 函数

tooltip: {
    trigger: 'axis',
    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'cross',        // 默认为直线，可选为：'line' | 'shadow' 'cross'
    },
    
    confine:true,             // 限制 tooltip 在图表区域内显示
    formatter:function(params) {console.log(params);
        let content = '
'; // 创建一个中心对齐的容器
        content += '';
    
        content += ''; // 显示时间戳
        content += '';
        content += '';
        content += '';

        for (let i = 0; i ';
        content += ''; // 格式化为百分比
        if (seriesName === "CPU 占用率") {content += ''; // 格式化为百分比
            content += '';
        } else if (seriesName === "sys 占用率") {content += '';
            content += '';
        } else if (seriesName === "用户占用率") {content += '';
            content += '';
        } 
    }

    content += '
${params[0].name?.split(' ')[1][1]}
 平均 
 峰值 
 最高 
${seriesName}
${value.toFixed(2)}
${dataRow.cpu_total_grad_list[param.dataIndex]}
${dataRow.cpu_total_max_list[param.dataIndex]}
${dataRow.cpu_sys_grad_list[param.dataIndex]}
${dataRow.cpu_sys_max_list[param.dataIndex]}
${dataRow.cpu_user_grad_list[param.dataIndex]}
${dataRow.cpu_user_max_list[param.dataIndex]}
';
    
    content += ' 最大值所在主机 ${dataRow.cpu_max_host[params[0]?.dataIndex]}';
   
    return content;
}
}
 
 完成🦌