Echarts自定义提示框（解决弹框显示不全问题）

Echarts在显示应用中，由于图形尺寸大小限制、图例过多，提示框浮层中存在显示不全问题。

本文主要提供两种解决思路。

方法一

利用 confine: true 属性固定显示提示框

方法二

利用formatter，分列显示

提示框浮层内容格式器，支持字符串模板和回调函数两种形式。

1. 字符串模板

• 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
• 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
• 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
• 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

示例：

tooltip: {
	trigger: 'axis',
	formatter:'{a0}: {c0}&ensp;{a1}: {c1}<br/>{a2}: {c2}&ensp;{a3}: {c3}'
}

2. 回调函数
   利用回调函数自定义样式

示例：

tooltip: {
	trigger: 'axis',
	formatter: function (params) {
		let str=params[0].name+"<br/>";
		for(let i=0;i<params.length;i++){
			let p='<p style="display:inline-block;width:120px;"><span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:'+params[i].color+'"></span>' + params[i].seriesName + " : " + params[i].data+'</p>';
			if(i%2==0){
				str+=p;
			}else{
				str+=p+'<br/>'
			}
		}
		return str;
	}
}