【ECHARTS】 formatter回调函数

最新推荐文章于 2025-05-12 16:15:04 发布

MrMu__

最新推荐文章于 2025-05-12 16:15:04 发布

阅读量1.4w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.youkuaiyun.com/MrMu__/article/details/53121814

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍ECharts中tooltip formatter的使用方法及回调函数格式，包括params数据集的具体字段含义，并给出两个formatter实例，帮助读者理解如何定制化显示提示框的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

回调函数格式：
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
第一个参数 params 是 formatter 需要的数据集。格式如下：

 //params数据集
 {
     componentType: 'series',
     // 系列类型
     seriesType: string,
     // 系列在传入的 option.series 中的 index
     seriesIndex: number,
     // 系列名称
     seriesName: string,
     // 数据名，类目名
     name: string,
     // 数据在传入的 data 数组中的 index
     dataIndex: number,
     // 传入的原始数据项
     data: Object,
     // 传入的数据值
     value: number|Array,
     // 数据图形的颜色
     color: string,

     // 饼图的百分比
     percent: number,

 }

在 trigger 为 ‘axis’ 的时候 params 是多个系列的数据数组。
注： ECharts 2.x 使用数组表示各参数的方式不再支持。
第二个参数 ticket 是异步回调标识，配合第三个参数 callback 使用。第三个参数 callback 是异步回调，在提示框浮层内容是异步获取的时候，可以通过 callback 传入上述的 ticket 和 html 更新提示框浮层内容。
示例：

 /*
 * @params : Array[Obj]    可获取formatter事件的信息源
 * @ticket : strIng
 * @callback : function    用于异步的回调函数
 * @return : string        tooltip中的HTML代码块字符串，样式可在组件外进行调整
 */
 formatter: function (params, ticket, callback) {
     $.get('detail?name=' + params.name, function (content) {
         callback(ticket, toHTML(content));
     });
     return 'Loading';
 }

个人formatter示例：

//功能是转换tooltip中‘undefied’和‘-’的value值为‘暂无’，未使用异步回调，tooltip样式在外部调整
formatter: function(params){
    var content = '';

    //两个for将params中需要的参数嵌入HTML代码块字符串content中
    for(var i = 0; i < params.length; i++){
        if(params[i].name){
            content += "<div class='charts-tipc'><p class='charts-p'>"+params[i].name +"</p>";
            break;
        }
    }
    for(var i = 0, key = {}; i < params.length; i++){
        key = params[i];

        if( typeof key.value==='undefined' || key.value === '-')
            key.value = '暂无';
        content += "<p class='charts-p'><i class='charts-r' style='background-color: " + key.color + " '></i> " + key.seriesName + " : " + key.value + "</p>";          
    }
    content += '</div>';

    //return出去后echarts会调用html()函数将content字符串代码化
    return content;
}