【ECHARTS】 formatter回调函数

来源:互联网 发布:淘宝爱逛街发布权限 编辑:程序博客网 时间:2024/05/21 13:55

回调函数格式:
(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;}
0 0
原创粉丝点击