echarts中的自定义tooltips

百度的echarts其实已经很强大了,直接配置项中的tooltip.formatter 就可以设置,
模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。 在 trigger 为 ‘axis’ 的时候,会有多个系列的数据,此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a},{b},{c},{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为:
折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)
散点图(气泡)图 : {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)
地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)
饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)
更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。

formatter: '{b0}: {c0}<br />{b1}: {c1}'

但是这个满足不了项目的要求,项目要求在地图上每个点都显示自己的日志信息,这就用到配置项手册的回调函数了,
回调函数传递的第一个值 params 是 formatter 需要的数据集

formatter: function(params) {
              var datas = option.series[0].data;
              var res = '城市名:'+params['name']+'<br/>号码:'+result['number'];
              for (var i = 0; i < datas.length; i++) {
                  if(params['name'] == datas[i].name){
                   res = res + '<br/>UUID:'+datas[i].user_uuid;
                   break;
                  }
              }
              return res;
            }

由于种种要求只能粘贴部分代码 ,起始也就是一句话formatter用function,根据name从自己option里找到你要的数据拼接html片段返回

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值