问题:当我们对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; //返回出去
}},
这样我们便实现出了以下结果:
好了,希望能够帮助到你们。