自定义echarts中tooltip提示框显示的内容和格式

蔚落 2022-04-03 18:12 427阅读 0赞

## 自定义echarts中tooltip提示框显示的内容和格式 ##

公司最近在做的项目里,所有图表全部都是用echarts组件做的,包括柱状图,折线图,雷达图,扇形图,圆环图(饼图),因此  
tooltip提示框显示的内容及文字是必须涉及到的一点.

## 问题一:显示tooltip显示框 ##

只需在option里设置:  
`tooltip:{}`

## 问题二:tooltip显示的内容没有自己想要的 ##

这里便涉及到重点了:

tooltip:{
    	 formatter : function(params){  
    		console.log(params);//打印params
    		return  params;
    	}
    }

在formatter里面打印参数params对象,于是我们能看到所有关于你的图表里所有的信息,通过’params.属性名’拿到自己要显示的信息进行显示.  
但我要讲的重点是:如果我们要返回参数params对象里面没有的信息呢?  
这里我们就要用到传参,假如要将:"你是一个好人"传进来在提示框里面显示,因此:

## 问题三:tooltip显示的格式不符合自己要求 ##

同样的在的tooltip里面设置:

tooltip: {
              formatter : function(params){  
              	console.log(params)//通过对象的点语法拿到自己想要的内容,通过连接+,将想要的字符串进行自行的拼接,用<br/>来换行
              	let res = '';
              	res = params.name + ':' + params.data
                return  res ;//最后返回拼接好的值
                }
              }