Echarts 地图tooltip多行显示,当鼠标悬停地区显示数据

代码如下

tooltip : {
			trigger : 'item',
			// formatter: '{b}'
			// formatter: '{b}<br/>{c} (个)'
			formatter : function(params) {
				var res = params.name + '<br/>';
				var myseries = option.series;
				for (var i = 0; i < myseries.length; i++) {
					for (var j = 0; j < myseries[i].data.length; j++) {
						if (myseries[i].data[j].name == params.name) {
							var valuelist = myseries[i].data[j].value
									.split(';');
							for (var z = 0; z < valuelist.length; z++) {
								res += valuelist[z] + '</br>';
							}
							// res+=myseries[i].data[j].value+'</br>';
						}
					}
				}
				return res;
			}
		}

我们会首先获取data的值,data为返回的地图需要显示的数据,遍历data数组后,根据具体的符号切割,对切割后的数组遍历,获取其中的值换行显示。

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts 地图控件中,tooltip(提示框)是一种常见的操作方式,可以通过 tooltip 来展示地图数据的详细信息。但是默认情况下,tooltip 只能显示文字,如果我们需要在 tooltip显示文字该怎么做呢? 首先,我们可以尝试在 tooltip 中使用富文本支持的标签来进文字的展示,比如使用 \<br> 标签来进。但是这种方式对于一些特殊的场景,比如数据变化剧烈的地图,会导致 tooltip 弹出来的内容过长,导致样式混乱、内容不清晰等问题。 因此,更好的方式是在 Echarts 中进配置,设置 tooltip 的宽度和高度,以及内容的字体和字号等属性。这样无论数据变化多少,提示框都可以按照我们的设置进展示,保证内容的展示效果。 具体操作步骤如下: 1.在 Echarts 的 option 中添加 tooltip 的配置项。 2.在 tooltip 的配置项中,设置 tooltip 的宽度和高度,以及内容的字体和字号等属性。 3.在 tooltip 的配置项中使用 formatter 回调函数,并将展示内容按照需要进拼接和格式化,保证多文字的展示效果正常。 4.最后,将配置后的 option 对象传递到 Echarts 的实例中进展示,即可实现多文字的 tooltip 弹出效果。 总之,在使用 Echarts 地图控件的过程中,如果需要多文字的展示效果,我们可以通过设置 tooltip 的属性和使用 formatter 回调函数进实现,保证展示效果的清晰和美观。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值