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

ゞ浴缸里的玫瑰 2021-09-28 13:56 323阅读 0赞

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

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

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;					//返回出去
                        }},

这样我们便实现出了以下结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjUxMDMy_size_16_color_FFFFFF_t_70 1]  
好了，希望能够帮助到你们。

[ECharts][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjUxMDMy_size_16_color_FFFFFF_t_70]: /images/20210923/99c964cc34d24aada6a733ebe3dd7c50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjUxMDMy_size_16_color_FFFFFF_t_70 1]: /images/20210923/b6be43267461489088840586c7963a5d.png
[ECharts]: https://echarts.baidu.com/examples/