echarts自定義tooltip中的內(nèi)容代碼示例
更新時間：2024年10月18日 11:19:36 作者：竹秋…
在ECharts中,通過formatter函數(shù)自定義圖例樣式,可以實現(xiàn)更靈活的圖表展示,滿足特定的視覺需求,這篇文章主要介紹了echarts自定義tooltip中內(nèi)容的相關(guān)資料,需要的朋友可以參考下
原本的默認(rèn)樣式長這樣：
也就是有幾個圖例，就顯示幾個再加上數(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)顯示
},但我需要的是這樣的:
代碼如下：
需要加一個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)建一個中心對齊的容器
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>最大值所在主機(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了javascript實現(xiàn)隨時變化著的背景顏色的方法，非常的簡單實用，有需要的小伙伴可以直接拿走。2015-04-04
這篇文章主要介紹了js無提示關(guān)閉瀏覽器窗口的兩種方法分析,需要的朋友可以參考下2016-11-11
這篇文章介紹了javascript完美拖拽的實現(xiàn)方法，有需要的朋友可以參考一下2013-09-09
簡單數(shù)值類型: 有Undefined, Null, Boolean, Number和String。注意，描述中的英文單詞在這里僅指數(shù)據(jù)類型的名稱，并不特指JS的全局對象N an, Boolean, Number, String等，它們在概念上的區(qū)別是比較大的。2010-10-10
Javascript中函數(shù)名.length屬性用法分析(對比arguments.length)
這篇文章主要介紹了Javascript中函數(shù)名.length屬性用法,結(jié)合實例形式簡單對比分析了與arguments.length屬性的用法區(qū)別,需要的朋友可以參考下2016-09-09
javascript創(chuàng)建動態(tài)表單的方法
這篇文章主要介紹了javascript創(chuàng)建動態(tài)表單的方法,實例分析了javascript動態(tài)操作頁面表單元素的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07 
javascript之分片上傳，斷點續(xù)傳的實際項目實現(xiàn)詳解
在本篇文章里小編給大家整理了關(guān)于javascript之分片上傳，斷點續(xù)傳的實際項目實現(xiàn)的詳細(xì)內(nèi)容，有需要的朋友們學(xué)習(xí)下。
2019-09-09 
javascript 對象屬性property與元素屬性attribute的瀏覽器支持
對象屬性property與元素屬性attribute的瀏覽器支持情況，大家可以參考下。
2010-10-10 
本篇文章主要介紹了Redux實現(xiàn)組合計數(shù)器的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07