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

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;
}
}
总结 
到此这篇关于echarts自定义tooltip中内容的文章就介绍到这了,更多相关echarts自定义tooltip内容内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！