笔记名称： 在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;
}