关于echarts堆叠图tooltip中如何仅展示鼠标当前位置相应的指标数据(转载)

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 的内容,例如显示堆叠组的百分比、添加单位等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值