作者：niexia.
原文：https://blog.csdn.net/niexia_/article/details/77891474
回调函数
为了能够使得触发的格式能按照自定义的格式，那就需要formatter。
tooltip: {
trigger: 'axis',
formatter:
}
方法1
格式:formatter: '{b0}: {c0}<br />{b1}: {c1}'
注意使用自定义的变量还有字符串：
//实例
var a="今日";
...
tooltip: {
trigger: 'axis',
//加了变量a和字符'度'
formatter:a+'{a0}:{c0}'+'度'+'<br/>'+a+'{a1}:{c1}'+'度'
},
...
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']//{b}
},
...
series: [
{
name:'最高气温',//{a0}
type:'line',
data:[11, 11, 15, 13, 12, 13, 10],//{c0}
...
},
{
name:'最低气温',//{a1}
type:'line',
data:[1, -2, 2, 5, 3, 2, 0],//{c1}
...
}
]
加了{b} :
方法2（回调函数 )
格式:(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
1
第一个参数 params 是 formatter 需要的数据集。格式如下：
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名，类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
value: number|Array,
// 数据图形的颜色
color: string,
// 饼图的百分比
percent: number,
//
galleryViewPath: ,
//
galleryEditorPath: ,
//
imagePath: ,
//
gl: ,
}
第二个参数 ticket 是异步回调标识，配合第三个参数 callback 使用。
第三个参数 callback 是异步回调，在提示框浮层内容是异步获取的时候，可以通过 callback 传入上述的 ticket 和 html 更新提示框浮层内容。
//实例
formatter: function (params,ticket,callback) {
console.log(params)
var res = 'Function formatter : <br/>' + params[0].name;
console.log(" name"+params[0].name);
//使用for可以将需要的数据全部加到res
//注意下边的<br/>
for (var i = 0, l = params.length; i < l; i++) {
res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
}
return res;
}
console.log(params):
实际效果：
模拟异步调用中的使用
formatter: function (params,ticket,callback) {
console.log(params)
var res = 'Function formatter : <br/>' + params[0].name;
console.log(" name"+params[0].name);
for (var i = 0, l = params.length; i < l; i++) {
res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;//要填充的内容
}
setTimeout(function (){
// 仅为了模拟异步回调
callback(ticket, res);
}, 1000)
return 'loading';
}