Echarts图表中,可以同时存在两个或多个 tooltip中的formatter方法吗?

一个echarts图表可以存在两个tooltip吗

答案是:不可以,这个功能官方似乎并没有实现

我们在画echarts时,可能会多个图结合,比如在map地图上加上散点图。
如果只有一个map地图,我们给它的series属性加上一个tooltip和formatter方法,当鼠标移动到每一个区域时,会显示出信息。
如果只有一个散点图,我们给它的series属性加上一个tooltip和formatter方法,当鼠标移动到每一个区域时,会显示出信息。

问题来了:如果在map上加上散点图,并且鼠标移动到每一个区域和每一个点上都有对应的信息那不就完美了?那就给map地图的geo加一个tooltip和formatter方法,给散点图的series加一个tooltip和formatter方法。

问题就在于我们不能用两个tooltip,当我们加上后就会发现,只有散点图会生效,说具体点,只有series的tooltip和formatter方法会生效,因为geo不能存储数据,自然没有tooltip和formatter方法。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要在 ECharts 同时展示多个 tooltip 提示框,您可以使用 tooltip 的 axisPointer 配置项,并设置为多个轴指示器类型。每个轴指示器类型对应一个 tooltip 提示框。 下面是一个示例,展示了同时展示多个 tooltip 提示框的配置: ```javascript option = { // 其他配置项... tooltip: { trigger: 'axis', axisPointer: { type: ['line', 'cross'], // 设置多个轴指示器类型 lineStyle: { color: '#999999', width: 1 } }, formatter: function(params) { var tooltips = ''; for (var i = 0; i < params.length; i++) { var seriesName = params[i].seriesName; var value = params[i].value; tooltips += seriesName + ': ' + value + '<br/>'; } return tooltips; } }, series: [ { name: 'Series 1', type: 'line', data: [10, 20, 30, 40, 50], // 其他配置项... }, { name: 'Series 2', type: 'line', data: [100, 200, 300, 400, 500], // 其他配置项... } ] }; ``` 在上述代码,我们通过 axisPointer 的 type 属性设置了两个轴指示器类型:'line' 和 'cross'。这样,当鼠标移动到图表上时,会同时展示两个 tooltip 提示框,分别对应这两个轴指示器类型。 在 tooltipformatter 函数,我们遍历 params 参数,获取每个系列的名称和对应的数值,并将它们拼接到一个字符串。最后,返回这个字符串作为 tooltip 的内容。 这样,当鼠标悬停在图表上时,会同时显示多个 tooltip 提示框,展示各个系列的名称和数值。 您可以根据实际需求和图表配置进行适当的调整。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值