Echarts设置tooltip换行显示

1.字符串模板
模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。
折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)

tooltip: {
	trigger: 'item',
	position: 'top',
	confine:true ,
	formatter: "{a} <br/> "+ "<div style='display:block;word-break: break-all;word-wrap: break-word;white-space:pre-wrap'>" + "{b} " + "</div>" + " <br/>{c}" ,
},

  1. 回调函数
tooltip: {
  trigger: 'item',
  extraCssText: 'z-index: 9',
  position: 'top',
  formatter: function(params) {
    // 处理数据过长时,tooltip显示不全的问题
    const {marker, name, data} = params
    return `<div style="display:block;word-break: break-all;word-wrap: break-word;white-space:pre-wrap">${marker}${name} <span style="font-weight:bold;margin-left:20px;">${data}</span></div>`
  }
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值