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'; }
阅读全文
0 0
- tooltip.formatter
- EChart tooltip formatter使用
- Echarts tooltip 自定义formatter设置字体颜色
- Formatter
- Formatter
- Formatter
- formatter
- ECharts地图中tooltip提示框通过formatter分别显示多个数值
- echarts柱状图、折线图求合,通过formatter回调函数自定义tooltip展示格式
- ToolTip
- tooltip
- Tooltip
- tooltip
- tooltip
- echarts bar内tooltip的formatter回调参数params.seriesId中的’\0’问题以及stack的获取
- abiword formatter
- Code Formatter
- flex formatter
- linux中$的意义与用法
- 集成学习之AdaBoost
- 《How Tomcat Works》阅读笔记一
- HUST 1017(DLX)
- C 指针数组和数组指针
- tooltip.formatter
- JavaScript内存泄露及解决方案详解
- jsp页面获取map集合的指定key的value
- Java 关于java.lang.Object.clone()
- 文字溢出隐藏,鼠标移入显示
- switch参数支持的类型
- windows安装docker以及安装ubuntu
- Dependency Walker使用说明[转]
- http://www.cnblogs.com/cnajian/archive/2011/03/02/1968641.html