快捷導(dǎo)航

echarts自定義tooltip中的內(nèi)容代碼示例

更新時(shí)間：2024年10月18日 11:19:36 作者：竹秋…

在ECharts中,通過formatter函數(shù)自定義圖例樣式,可以實(shí)現(xiàn)更靈活的圖表展示,滿足特定的視覺需求,這篇文章主要介紹了echarts自定義tooltip中內(nèi)容的相關(guān)資料,需要的朋友可以參考下

原本的默認(rèn)樣式長(zhǎng)這樣：

也就是有幾個(gè)圖例，就顯示幾個(gè)再加上數(shù)字。

默認(rèn)代碼是這樣的：

tooltip: {
    trigger: 'axis',
    axisPointer: {            // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
        type: 'cross',        // 默認(rèn)為直線，可選為：'line' | 'shadow' 'cross'
                        
    },
    confine:true, // 限制tooltip在圖標(biāo)區(qū)域內(nèi)顯示                
},

但我需要的是這樣的:

代碼如下：

需要加一個(gè)formatter函數(shù)

tooltip: {
    trigger: 'axis',
    axisPointer: {            // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
        type: 'cross',        // 默認(rèn)為直線，可選為：'line' | 'shadow' 'cross'
    },
    
    confine:true,             //限制tooltip在圖表區(qū)域內(nèi)顯示
    formatter:function(params) {
        console.log(params);
        let content = '<div style="text-align: left;width:250px;margin-left:20px">'; // 創(chuàng)建一個(gè)中心對(duì)齊的容器
        content += '<table style="border-bottom:1px solid #COCOCO">';
    
        content += '<tr><td>${params[0].name?.split(' ')[1][1]}</td></p>'; // 顯示時(shí)間戳
        content += '<td style="text-indent:5px">平均</td>';
        content += '<td style="text-indent:5px">峰值</td>';
        content += '<td style="text-indent:5px">最高</td></tr>';

        for (let i = 0; i < params.length; i++) {
            const param = params[i];
        const seriesName = param.seriesName; // 獲取系列名稱
        const value = param.data; // 獲取數(shù)據(jù)值
        const color = param.color; // 獲取顏色
        
        content += '<tr><td style="text-indent:5px;border-left:2px solid ${color}">${seriesName}</td>';
        content += '<td style="text-indent:5px">${value.toFixed(2)}</td>'; // 格式化為百分比
        if (seriesName === "CPU占用率") {
            content += '<td style="text-indent:5px">${dataRow.cpu_total_grad_list[param.dataIndex]}</td>'; // 格式化為百分比
            content += '<td style="text-indent:5px">${dataRow.cpu_total_max_list[param.dataIndex]}</td></tr>';
        } else if (seriesName === "sys占用率") {
            content += '<td style="text-indent:5px">${dataRow.cpu_sys_grad_list[param.dataIndex]}</td>';
            content += '<td style="text-indent:5px">${dataRow.cpu_sys_max_list[param.dataIndex]}</td></tr>';
        } else if (seriesName === "用戶占用率") {
            content += '<td style="text-indent:5px">${dataRow.cpu_user_grad_list[param.dataIndex]}</td>';
            content += '<td style="text-indent:5px">${dataRow.cpu_user_max_list[param.dataIndex]}</td></tr>';
        } 
    }

    content += '</table>';
    
    content += '<tr><td>最大值所在主機(jī) ${dataRow.cpu_max_host[params[0]?.dataIndex]}</td></tr>';
   
    return content;
}
}

總結(jié)

到此這篇關(guān)于echarts自定義tooltip中內(nèi)容的文章就介紹到這了,更多相關(guān)echarts自定義tooltip內(nèi)容內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: