ECharts地图中tooltip提示框通过formatter分别显示多个数值

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 7.4w累计阅读 7.4w+平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄11年

关注

VIP免费原创最新推荐文章于 2026-03-24 00:08:41 发布 7.4w 阅读 AI 写同款· GEO 优化 ›

自定义Echarts柱状图，一图显示多组数据这个自定义的功能是参考一位大佬的帖子做出来的，以此为基础加了一些优化，但是我找不到大佬的帖子链接了，如果有发现的请告诉我，我在帖子上加一下，以谢大佬指点之恩。//先定义图表容器，至于图表所需要的js啥的，请自行搜索教程，不多赘述。... 阅读详情

Echarts官方实例中地图最后一个是 iphone销量的全国地图实例链接

但是tooltip提示框组件里默认显示的数量信息是所有value的和，而不是每一个单独展示。如图所示，666是iphone3和iphone4值的和。

现在我们想要分别显示iphone3，iphone4，iphone5的值，只需要修改tooltip即可。

//官方实例tooltip
tooltip: {
        trigger: 'item'
    },

tooltip.formatter 可以做到分别显示多个值（提示框浮层内容格式器，支持字符串模板和回调函数两种形式）
官方API链接

最低0.47元/天解锁文章

收录于

当前文章被以下社区和专栏收录：

标签

#ECharts #地图 #tooltip #formatter #显示多个值

Echarts地图的tooltip提示框只显示需要的一个或多个值在Echarts的官网地图实例《全国主要城市空气质量》中，当鼠标悬浮在城市图标上的时候，提示框显示的是 “城市名：纬度” 而非对应的pm2.5的数值。在网上搜索解决方案的时候看了 GiScript用户的这篇博客受到了启用，可以用 tooltip.formatter 试试。但是他这个iPhone销量地图的实例和我们这个不太一样，我们的直接return需要的data就好。只需要加入： too... 阅读详情

相关推荐

【Echarts】多条折线图 y轴数值与实际值不一致，tooltip提示框--自定义小圆点/formatter分别显示多个数值

qq_26780317的博客 9261

给Echarts地图的tooltip添加按钮

tootip配置自定义内容并提供按钮可点击查看详细信息效果如下图所示：思路： tooltip的formatter支持自定义提示框浮层内容，可在此处自定义显示内容及按钮给按钮绑定事件，触发时调用method中的方法。该方法中去做地图容器的事件监听，在回调函数中处理路由跳转显示详细信息。 <template> <div id="map"></div> ...

Tempta的博客 5059

echarts地图散点悬浮显示多条数据

echarts地图散点悬浮显示多条数据echarts地图散点悬浮显示多条数据echarts地图散点悬浮显示多条数据

Android Profiler 帧率优化实战与性能调优

本文详细介绍了使用Android Profiler进行帧率优化与性能调优的实战方法。通过分析主线程状态、FPS曲线和渲染阶段耗时，精准定位卡顿根源，并提供减少过度绘制、优化绘制命令及改善资源使用的具体策略。文章结合电商、游戏等真实案例，帮助开发者有效解决卡顿问题，提升应用流畅度。

palm99的专栏 536

银河麒麟V10 SP1 x86_64架构下离线部署全栈开发环境：Java8+Mysql5.7+Tomcat8实战指南

本文详细介绍了在银河麒麟V10 SP1 x86_64架构下离线部署全栈开发环境的实战指南，包括Java8、Mysql5.7和Tomcat8的安装与配置。通过步骤详解和常见问题排查，帮助开发者在国产操作系统上高效搭建稳定可靠的开发环境，特别适合政务系统和企业级应用部署。

weixin_29230901的博客 373

ComfyUI Impact Pack实战：如何用三大检测器打造高效人脸修复工作流（附2025最新模板）

本文详细解析了如何利用ComfyUI Impact Pack中的BBOX、Segm和SAM三大检测器构建高效人脸修复工作流。通过技术选型、参数优化和实战案例，帮助用户掌握从精准定位到细节修复的全流程技巧，特别适用于商业摄影和影视制作场景。文章还提供了2025年最新模板和性能优化方案，显著提升人脸精修效率。

weixin_29040367的博客 243

腾讯大佬总结的170道 python面试题

简述基于 TCP 协议的套接字通信流程。19.面向对象中`__new__` 和 `__init__` 区别。86. 解释 Python 中的`//`，`％`和`**`运算符。45.isinstance 的作用以及与 type()的区别。3. 简述下 Python 中的字符串、列表、元组和字典。143. 如何高效的找到 redis 中的某个 KEY。140. 如何保证 redis 中的数据都是热点数据。147. redis 中的 watch 的命令的作用。108. 简述进程、线程、协程的区别以及应用场景。

AudiA6LV6的博客 486

Windows系统监控实战：Grafana+Prometheus+node_exporter配置全攻略

本文提供了一套完整的Windows系统监控解决方案，详细介绍了如何使用Grafana、Prometheus和node_exporter（Windows版为windows_exporter）构建可视化监控平台。从环境准备、组件安装配置，到数据可视化与常见问题排查，手把手指导您实现从数据采集到仪表盘展示的全过程，帮助您从被动救火转向主动预警，有效保障Windows服务器稳定运行。

assembly8low的博客 246

基于STM32设计的老人监护系统(OneNet)_118

该项目是基于STM32设计的老人监护系统。本系统可以通过脉搏心率传感器，体温传感器检测老人的脉搏状态，体温状态，把老人的数据状态在STM32单片机内部进行处理，然后通过GSM模块上传到OneNet云平台，在通过可视化界面显示出来，这样可以让子女随时随地了解到老人现在的身体情况，以便对老人的突发情况能够做出及时的预防和处理。而且如今，随着老人年纪不断的增长，身体体质不断的衰弱，在上楼梯或者走斜坡的时候很容易会发生摔倒或跌倒，如果不及时的接收到治疗，很可能会造成很严重的后果。

7455

零基础做完YOLOv8船只检测系统：HRSC2016数据集 + 完整UI，稳过答辩

亲爱的同学，通过这篇教程，你已经掌握了“基于YOLOv8的HRSC2016微小船只检测系统”从数据集处理、模型训练到Tkinter界面开发的全流程。这个课题既贴合“海事智能化”的产业战略，又涵盖了“目标检测、深度学习、界面开发”等多个毕设评分点，非常适合作为计算机或海事工程专业的毕业设计。在实践中，你可能会遇到“海面背景复杂导致船只漏检”“微小船只识别精度不足”“UI与模型推理同步卡顿”等挑战——别担心，这些都是技术成长的必经之路。

FJN110的博客 107

【Cursor+Playwright-MCP 实现 AI 自主功能测试】含实例代码脚本+保姆级教程

本文档详细介绍了如何使用 Cursor（AI 编程助手）和 Playwright-MCP 库实现基于 GPT 模型的自动化功能测试。文档从环境搭建开始，逐步指导读者如何通过 Playwright 进行浏览器自动化，并利用 Playwright-MCP 集成 GPT 模型生成测试计划、执行测试步骤及生成测试报告。核心步骤包括安装依赖、配置 OpenAI API 密钥、编写代码实现 AI 驱动的测试流程，以及生成详细的测试报告。通过本文档，读者可以快速掌握从 0 到 1 实现 AI 自主功能测试的全流程。

Dreams°的博客 2890

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android：LinePhone3.2.7(最新版本)，官网地址：http://www.linphone.org/

Camera2Demo

在Camera2 的基础上进行封装，使得Camera2一堆初始化逻辑与Activity分离，降低耦合度，完成预览拍照并保存的操作

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具，可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

OV9734 DATASHEET，完整规格书

OV9734完整规格书，包括电气参数，尺寸规格，寄存器配置表等

上一篇：在Linux服务器Tomcat中部署转成Maven的JavaWeb项目

下一篇： What is npm?