echarts堆叠图tooltip中如何仅展示鼠标当前位置相应的指标数据

在项目中遇到echarts堆叠图的tooltip显示所有指标信息的问题,导致信息过多难以阅读。通过深入研究发现,可以利用tooltip.axisPointer.label.formatter获取鼠标位置的yAxis数据,存储到外部变量,并在tooltip.formatter中判断鼠标位置对应的series,实现只显示当前位置指标数据。通过设置downplay和highlight事件,避免默认高亮多个点。代码验证可行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目创建到现在快小半年了,期间遇到了大大小小非常多的问题,在不断遇到问题和解决问题的过程中,对vue和element-ui还有echarts的认知一点点的加深,也累积了不少对应各种问题的奇技淫巧。记录一下。

这篇记录一个使用echarts时遇到的实际问题。

堆叠图tooltip问题

echarts生成的堆叠图,鼠标浮动时默认会将相应位置的所有指标信息全部展示出来:

clipboard.png

当指标特别多的时候,这样的鼠标浮动提示信息会失去其说明数据的意义:

clipboard.png

用户无法从浮动提示中一眼就辨认出他想看的那个指标在某个区间的具体数值,甚至可以说,要从这个浮动提示中找出指定区域对应的数值是件想想就令人头皮发麻的事情(尤其对于色弱的我来说T_T)。

这种情况下,比较合适的做法是鼠标移动到哪个位置,就只显示当前位置对应的指标数据。

ECharts 中,堆叠柱状图的 tooltip 默认会显示出每个柱子的数值,以及该柱子所属堆叠组的总数值。如果你想定制堆叠柱状图的 tooltip,可以使用 ECharts 提供的 formatter 属性来实现。 下面是一个示例代码,展示如何使用 formatter 来自定义堆叠柱状图的 tooltip: ```javascript option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' // 显示阴影效果 }, formatter: function(params) { var seriesName = params[0].seriesName; var stackName = params[0].name; var totalValue = params[0].data; var currentValue = params[0].value; return seriesName + '<br/>' + stackName + ': ' + currentValue + '<br/>' + 'Total: ' + totalValue; } }, xAxis: { type: 'category', data: ['Category A', 'Category B', 'Category C'] }, yAxis: { type: 'value' }, series: [ { name: 'Series 1', type: 'bar', stack: 'stackGroup', data: [10, 20, 30] }, { name: 'Series 2', type: 'bar', stack: 'stackGroup', data: [15, 25, 35] } ] }; ``` 在这个示例中,我们通过 formatter 函数来自定义 tooltip 的内容。我们使用 `params` 参数来获取当前鼠标悬停的柱子的信息,并将其展示tooltip 中。`params` 是当前柱子的信息对象,你可以从中获取到 seriesName(系列名称)、name(堆叠组名称)、value(当前柱子值)以及 data(堆叠总数值)等信息。 这样,你可以根据自己的需要来定制 tooltip 的内容,例如显示堆叠组的百分比、添加单位等。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值