在echarts中自定義提示框內容

1、期望效果

以柱狀圖為例，在鼠標滑過每個數據標簽時，為了更友好地顯示數據內容，需要對顯示的數據內容作格式化處理，添加自定義內容。

如下圖，鼠標滑過每個數據項時，
第1張是默認提示框；
第2張是處理成百分比數據后，顯示當前單個數據項的提示框；
第3張是處理成百分比數據后，顯示當前橫坐標下多個數據項的提示框。

 

圖1、默認提示框.jpg

 

圖2、單項提示框.jpg

 

圖3、多項提示框.jpg

2、實現

（本文代碼只涉及配置項的部分代碼）

上述圖片的效果可用echarts的tooltip組件中的一個formatter方法實現，formatter支持字符串和回調函數兩種配置方式（本文只描述回調函數的實現方式）。
（具體參考：http://echarts.baidu.com/option.html#tooltip.formatter）。

2.1 顯示單項數據內容

（處理上圖2提示框的效果）

/** * tooltip配置項示例 */ //用formatter回調函數顯示單項數據內容 tooltip: { trigger: 'item', formatter: function(data) { return data.name + '<br/>' +data.seriesName + '：'+(data.value * 100)+'%'; //將小數轉化為百分數顯示 } } 

2.2 顯示多項數據內容

（處理上圖3提示框的效果）

/** * tooltip配置項示例 */ //用formatter回調函數顯示多項數據內容 tooltip: { trigger: 'axis', formatter: function(datas) { var res = datas[0].name + '<br/>', val; for(var i = 0, length = datas.length; i < length; i++) { val = (datas[i].value*100) + '%'; res += datas[i].seriesName + '：' + val + '<br/>'; } return res; } } 

2.3 formatter回調函數的傳參

formatter回調函數的傳參格式為：

 (params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string 

描述：
1、params：
（1）當tooltip的trigger為‘item’時，顯示單項數據內容。formatter回調函數的第一個參數傳入一個數據項對象；
（2）當tooltip的trigger為‘axis’時，顯示多項數據內容數組。formatter回調函數的第一個參數傳入當前類目下的數據項對象數組。
2、ticket：異步回調標識，無需關心，用作callback的傳參。
3、callback：異步回調函數，傳遞ticket與填充內容的html兩個參數。

當tooltip的trigger為‘item’時，在控制台中輸出的單項數據示例對象為：

{
    $vars: ["seriesName", "name", "value"], color: "#c23531", componentSubType: "bar", componentType: "series", data: 0.6, dataIndex: 2, dataType: undefine, dname: "1月3日", seriesIndex: 0, seriesName: "iphone6", seriesType: "bar", value: 0.6 } 

其中，幾個重要的data對象屬性如下：
seriesName：系列名稱
value：當前數據值
name：數據名，類目名（上述柱狀圖中表示當前橫坐標數據名）

模擬異步返回提示框內容如下：

//用formatter回調函數模擬異步返回提示框內容 tooltip: { trigger: 'item', formatter: function(param, ticket, callback) { //用定時器模擬異步事件 setTimeout(function() { var res = param.name + '<br/>' +param.seriesName + '：'+(param.value * 100)+'%'; callback(ticket, res); }, 1000); return '';//內容還沒返回時顯示的內容 } } 

3、擴展-其他配置項的formatter

3.1 直角坐標軸（xAxis／yAxis）中axisLabel的formatter

顯示效果為上圖2-單項提示框的y軸刻度數據。

//yAxis／xAxis配置項示例——用axisLabel 的formatter回調函數處理數據格式 yAxis: { name: '銷量占比', axisLabel : { formatter: function(value) { if(value == 0) { return value; }else { return value*100+'%'; } } } }

鏈接： https://www.jianshu.com/p/aa585c304660