tooltip.formatter

来源:互联网 发布:ubuntu kylin 区别 编辑:程序博客网 时间:2024/06/07 00:02

回调函数

为了能够使得触发的格式能按照自定义的格式,那就需要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

第一个参数 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';        }

这里写图片描述
这里写图片描述

原创粉丝点击