ECharts中悬浮图标tooltie多行显示已解决

问题当我们对ECharts上报的数据字段很多时,其对应的图标也会很多,这样就造成了有些悬浮图标的不可见
我之所以要发表这篇博客,是因为网上搜到的都是自定义tooltie属性的内容,在里面添加自己的html代码,并且还要修改样式,这样代码就显得很繁琐,而且每次修改数据,对应的自定义内容也要跟着修改,这样最后虽然能实现功能,但繁琐的代码总觉得不够优雅,在这里我写了一个很简便的实现方法。

我们先来看一下原图:
在这里插入图片描述
对应的默认代码是这样的:

tooltip: {trigger: 'axis'},			//trigger:'item'这个属性就不解释了

我们把代码修改成如下:

tooltip: {trigger: 'axis',formatter: function (params) {	//我们定义的数据都包含在params里面
                    	var zht="";											//可以经过网页的检测发现
                    	if(params!=null && params.length>0){			//判断
                    		zht+=params[0].name+'<br/>';			//获取name
                    		for(var i=0;i<params.length;i++){				//遍历
                    			zht+=params[i].marker+params[i].seriesName+":"+params[i].value;		//拼接
                    			if((i+1)%5==0){						//我这里自定义横向显示,每行显示5个
                    				zht+='<br/>';						//显示5个后给他一个换行
                    			}
                    		}
                    	}
                    	return zht;					//返回出去
                    }},

这样我们便实现出了以下结果:
在这里插入图片描述
好了,希望能够帮助到你们。

ECharts

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值