【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
- 【ECHARTS】 formatter回调函数
- echarts柱状图、折线图求合,通过formatter回调函数自定义tooltip展示格式
- Highcharts 的formatter回调函数获取series的属性
- highcharts坐标轴标签格式化回调函数formatter:function中引用series中的数据
- echarts formatter编写
- Echarts自定义formatter
- ECharts图表——formatter
- Echarts图表之formatter用法
- .NET 回调函数
- 回调函数
- 回调函数
- 回调函数概念
- 回调函数
- 回调函数
- 回调函数
- 回调函数 相关
- delphi 回调函数
- 回调函数
- eclipse和myeclipse一键取消所有断点
- 邮箱找回密码功能实现思路
- android知识回顾-----序列化对象
- PHP实现查询关键字描红
- JQuery 中 is(':visible') 解析及用法
- 【ECHARTS】 formatter回调函数
- 洛谷 1102 P1102 A-B数对
- PHP实现通过IP限制投票次数
- 16.淘宝的架构演化案例
- poj 1054 The Troublesome Frog
- [leetcode 440]K-th Smallest in Lexicographical Order
- AsyncTask的理解
- CI工作流程
- PHP统计当前在线人数