快捷導(dǎo)航

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

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

在ECharts中,通過(guò)formatter函數(shù)自定義圖例樣式,可以實(shí)現(xiàn)更靈活的圖表展示,滿足特定的視覺(jué)需求,這篇文章主要介紹了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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

javascript實(shí)現(xiàn)隨時(shí)變化著的背景顏色
這篇文章主要介紹了javascript實(shí)現(xiàn)隨時(shí)變化著的背景顏色的方法，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以直接拿走。
2015-04-04
js無(wú)提示關(guān)閉瀏覽器窗口的兩種方法分析
這篇文章主要介紹了js無(wú)提示關(guān)閉瀏覽器窗口的兩種方法分析,需要的朋友可以參考下
2016-11-11
javascript完美拖拽的實(shí)現(xiàn)方法
這篇文章介紹了javascript完美拖拽的實(shí)現(xiàn)方法，有需要的朋友可以參考一下
2013-09-09
JavaScript 對(duì)象模型執(zhí)行模型
簡(jiǎn)單數(shù)值類型: 有Undefined, Null, Boolean, Number和String。注意，描述中的英文單詞在這里僅指數(shù)據(jù)類型的名稱，并不特指JS的全局對(duì)象N an, Boolean, Number, String等，它們?cè)诟拍钌系膮^(qū)別是比較大的。
2010-10-10
Javascript中函數(shù)名.length屬性用法分析(對(duì)比arguments.length)
這篇文章主要介紹了Javascript中函數(shù)名.length屬性用法,結(jié)合實(shí)例形式簡(jiǎn)單對(duì)比分析了與arguments.length屬性的用法區(qū)別,需要的朋友可以參考下
2016-09-09
這篇文章主要給大家介紹了關(guān)于JSONPath使用指南和實(shí)用技巧的相關(guān)資料,JsonPath,類似于XPath在XML中的作用,其提供了對(duì)格式Json數(shù)據(jù)的解析能力,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-08-08