Echarts自定义提示框(解决弹框显示不全问题)

Echarts在显示应用中,由于图形尺寸大小限制、图例过多,提示框浮层中存在显示不全问题。

本文主要提供两种解决思路。

方法一

利用 confine: true 属性固定显示提示框

在这里插入图片描述

方法二

利用formatter,分列显示

提示框浮层内容格式器,支持字符串模板和回调函数两种形式。

  1. 字符串模板
  • 折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)
  • 散点图(气泡)图 : {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)
  • 地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)
  • 饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)

示例:

tooltip: {
	trigger: 'axis',
	formatter:'{a0}: {c0}&ensp;{a1}: {c1}<br/>{a2}: {c2}&ensp;{a3}: {c3}'
}

在这里插入图片描述

  1. 回调函数
    利用回调函数自定义样式

示例:

tooltip: {
	trigger: 'axis',
	formatter: function (params) {
		let str=params[0].name+"<br/>";
		for(let i=0;i<params.length;i++){
			let p='<p style="display:inline-block;width:120px;"><span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:'+params[i].color+'"></span>' + params[i].seriesName + " : " + params[i].data+'</p>';
			if(i%2==0){
				str+=p;
			}else{
				str+=p+'<br/>'
			}
		}
		return str;
	}
}

在这里插入图片描述

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值