筆記名稱： 在echarts中自定義提示框內容
|
|
|
|
|
首先是默認的提示信息 （1）
|
* tooltip配置項示例
*/
tooltip: {
trigger: 'item'
}
|
|
|
然后是默認的提示信息 （2）【顯示當前橫坐標下多個數據項的提示框】
|
/**
* tooltip配置項示例
*/
tooltip: {
trigger: 'axis'
},
|
|
|
自定義效果（一）
|
/**
* tooltip配置項示例
*/
//用formatter回調函數顯示單項數據內容
tooltip: {
trigger: 'item',
formatter: function (params) {
var color = params.color;//圖例顏色
var htmlStr ='<div>';
htmlStr += params.name + '<br/>';//x軸的名稱
//為了保證和原來的效果一樣，這里自己實現了一個點的效果
htmlStr += '<span ></span>';
//添加一個漢字，這里你可以格式你的數字或者自定義文本內容
htmlStr += params.seriesName + '：'+params.value + '筆';
htmlStr += '</div>';
return htmlStr;
}
}
|
|
|
多個格式化 期待效果
|
方法如下
|
|
|
|
|
|
多個格式化 期待效果：
formatter: function (params, ticket, callback) {
var htmlStr = '';
for(var i=0;i<params.length;i++){
var param = params[i];
var xName = param.name;//x軸的名稱
var seriesName = param.seriesName;//圖例名稱
var value = param.value;//y軸值
var color = param.color;//圖例顏色
if(i===0){
htmlStr += xName + '<br/>';//x軸的名稱
htmlStr +='<div>';
//為了保證和原來的效果一樣，這里自己實現了一個點的效果
htmlStr += '<span min-height: 16pt; font-size: 12pt; font-family: Consolas;">+color+';"></span>';
//圓點后面顯示的文本
htmlStr += seriesName + '：' + value + '萬元';
htmlStr += '</div>';
}else{
/* htmlStr += xName + '<br/>';//x軸的名稱 */
htmlStr +='<div>';
//為了保證和原來的效果一樣，這里自己實現了一個點的效果
htmlStr += '<span min-height: 16pt; font-size: 12pt; font-family: Consolas;">+color+';"></span>';
//圓點后面顯示的文本
htmlStr += seriesName + '：' + value + '%';
htmlStr += '</div>';
}
}
return htmlStr;
}