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

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

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

原本的默認樣式長這樣：

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

默認代碼是這樣的：

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

但我需要的是這樣的:

代碼如下：

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

tooltip: {
    trigger: 'axis',
    axisPointer: {            // 坐標軸指示器，坐標軸觸發(fā)有效
        type: 'cross',        // 默認為直線，可選為：'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)建一個中心對齊的容器
        content += '<table style="border-bottom:1px solid #COCOCO">';
    
        content += '<tr><td>${params[0].name?.split(' ')[1][1]}</td></p>'; // 顯示時間戳
        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>最大值所在主機 ${dataRow.cpu_max_host[params[0]?.dataIndex]}</td></tr>';
   
    return content;
}
}

總結

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

您可能感興趣的文章: