zoukankan      html  css  js  c++  java
  • ECharts中悬浮图标tooltie多行显示已解决

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

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

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

      

     

    这样我们便实现出了以下结果:
    在这里插入图片描述

  • 相关阅读:
    js location.href ,location.replace, location.reload
    //js date对象常用方法
    js Math对象常用方法
    n sum
    two sum
    树:树中两个节点的最低公共祖先
    C++11:智能指针与lambda表达式
    回溯: 0-1背包
    动态库的soname实验
    DNS介绍与安装使用
  • 原文地址:https://www.cnblogs.com/wjlwo2ni/p/13892550.html
Copyright © 2011-2022 走看看