1. 腾来网首页
  2. 开发者博客
  3. 程序开发

echarts中自定义提示框 (tooltip.formatter)

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

发布者:腾来分享,转转请注明出处:http://tenglai.net/blog/coding/2584.html

发表评论

电子邮件地址不会被公开。

评论列表(1条)

  • AffiliateLabz
    AffiliateLabz 2020年2月21日 下午6:33

    Great content! Super high-quality! Keep it up! 🙂

联系我们

18702030367

在线咨询:点击这里给我发消息

邮件:Jason@tenglai.cn

工作时间:周一至周五,9:30-18:30,节假日休息

QR code