Echarts map tooltip不显示问题

最新推荐文章于 2024-04-22 15:36:45 发布
最新推荐文章于 2024-04-22 15:36:45 发布
阅读量1.4k 收藏 3
点赞数 4
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013776700/article/details/131451649
版权

Echarts map tooltip不显示问题

问题复现

echarts map 如果使用了geo配置，这个时候tooltip无法自定义格式化显示，formatter格式化函数无法生效。仅能显示当前feature的名称。
在这里插入图片描述
问题如上

解决方案

这个问题需要通过，在geo下和根配置下同时配置tootip才能生效，经过测试是以geo下的tooltip为主。
在这里插入图片描述

以上配置即可实现，对tooltip的格式化显示。
在这里插入图片描述
格式化效果

xiaolongyu3
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
Echarts图标tooltip添加按钮点击.zip
07-06
tooltip中添加一个查看按钮，并且点击获得触发点的数据进行操作 ehcarts显示正常，并且在toopltip中添加formatter(params)函数对toopltip进行html设置显示按钮，点击跳转其他页面
vue+echarts 实现地图tooltip点击事件；toolTip数据动态渲染；同时鼠标滑过涟漪点时实现地图多区域联动
qq_49496611的博客
12-30 6412
vue+echarts 实现地图tooltip点击事件；toolTip数据动态渲染；同时鼠标滑过涟漪点时实现地图多区域联动
echarts中series和tooltip地图的注意点
qq_45402495的博客
05-21 779
以上所有的都是没有问题的，formatter中的参数params的值是从series.data中获取的，最后矛头对准了key和value，在数据中要使用name来匹配数据，一旦name名称对不上，数据就是获取不到的。目前在公司做的项目中就是使用的echarts进行地图的展示，遇到一个很奇怪的问题，就是在option的配置下面，formatter获取不到值，如果为字符串是可以正常显示的。总之，刚开始接触echarts，各种细节和小点都很多，要多研究，多动手操作才好。
Vue3 echarts tooltip 无法正常显示
黄彪博客
03-17 1148
在开发可视化项目的时候，使用的是 Vue2 自定义的组件（只需要传入 echarts options）就可以联动产生效果，但是，在开发项目使用的是 vue3+vite 技术栈，反复比对 options 没有问题，但是就是没有效果。最终，将自定义组件改为 Vue3的模式，就正常了代码中的备注方便以后自己理解
echarts tooltip属性加背景图片
见贤思齐焉，见不贤内自省
12-03 4804
代码： tooltip: { trigger: "item", // borderColor: "#12D5FC", // backgroundColor: "#033394 80%", backgroundColor: "transparent", borderWidth: 1, padding: 10, formatter: function(par
echarts map tootip 显示多条信息
USTC_ygg的博客
03-28 653
data.data.name data = { name: 'Tom', value: 25， price: 1000 } tooltip: { trigger: 'item', formatter: function (data) { var res = [];...
Vue3 中 echarts 不显示 tooltip 的问题
Ljwen_的博客
02-28 3764
Vue3 中 echarts 不显示 tooltip 的问题
echarts地图的tooltip自定义样式显示图表
weixin_43931898的博客
10-18 9354
实现在Echarts地图的tooltip提示框中绘制图表 最近遇到一个需求是需要在地图中，鼠标点击或者停留在地图中某一片区域时，该区域显示亮高和显示tooltip提示框信息，但是难点在于需要在tooltip提示框中再绘制一层图表。按以往我们做过都是这种，tooltip提示框中只是单纯显示文本信息。 但是，需求要的不是这种，先不多说，直接给你们看最终展示的效果。 这里我们以广州市作为模板，可以看出这是我们想要的在tooltip提示框中绘制另外一层图表。 ok，接下来我们直接上代码。 <templat
Echarts 地图使用，以及tooltip轮播使用
qinjinhua_的博客
10-09 4704
echarts地图使用 tootip
Echarts图表不显示tooltip提示框
热门推荐
陈新科的博客
03-14 1万+
方法1： // 若只将tooltip的触发方式改为 'item', 那么点击 线上的点，能有提示框弹出 tooltip: { trigger: 'item' }, 方法2： // tooltip的触发方式仍为 'axis'，改变echarts实例的赋值语句 // charts.chart = echarts.init(chartContainer.value as HTMLElement) // 保存echarts 实例，赋值给 reactive 响应式对象 // c
echarts地图自定义tooltip样式
JiAyInNnNnN123的博客
05-20 6898
效果图： 自定义tooltip样式 tooltip: { position: ['50%', '50%'], trigger: 'item', backgroundColor: 'rgba(0,0,0,0)', borderColor: 'rgba(0,0,0,0)', extraCssText: 'box-shadow: 0 0 0 rgba(0, 0, 0, 0);', zInde
echarts自作地图显示散点图 tooltip自定义内容
07-10
echarts自作地图高亮显示散点图 tooltip自定义内容。
jQuery实现ToolTip元素定位显示功能示例
10-21
主要介绍了jQuery实现ToolTip元素定位显示功能,结合实例形式分析了jQuery针对页面元素属性的动态操作相关技巧,需要的朋友可以参考下
Echarts地图添加引导线效果(labelLine)
12-13
最近有粉丝问我能不能出个案例：地图上的地区文字，或其他标示类的图层，因为区块面积相对太小，想放在地图之外，通过labelLine连接到对应的区块上。今天就分享一个类似简单的案例，铺设散点形式铺设label，部分地区用线连接，地图以广州地图为例： 如果需要地图geojson或js文件的话，可以到我的个人 github 上自取：https://github.com/zhangqian00/echarts3-mapFile 1、初始化地图： 2、 声明label数据： 配置需要铺设的label，value值为坐标点，注释的四个区，需要用连线连接到地图外面，在后面会有单独配置，所以在此label
echarts4.x版本radar图tooltip实现显示单轴数据
09-26
使用echarts.js最新版版本实现雷达图提示框显示单“极”数据，已修改经测试并无Bug
echarts版本4.9
09-04
echarts版本4.9，官方示例用的版本是4.9，亲测可用，打开后找dist文件夹引用echarts.js使用即可
echarts上各个省的3DMap以及地图上加柱状图以及tooltip集成
01-07
文档适用于内网环境，主要展示各个地区的3D地图，支持离线以及地图加柱状图。具体样式自行修改。没有积分的可以私聊我的QQ 1219649500
Echarts地图 详细镇区的划分
09-17
_chinaMap = echarts.init(dom); _chinaMap.on('click', function(params) { console.log(params); var _type = params.seriesType; if (_type == "map") { //window.parent.aaa('aa') //调用父页面方法 } ...
【前端】数组的常用处理函数
最新发布
lcukyNwa的博客
04-22 418
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
echarts地图不用鼠标事件tooltip一直显示
05-31
您可以在使用 ECharts 地图时，设置 tooltip 的触发条件为 `always`，以达到不需要鼠标事件时一直显示 tooltip 的效果。具体实现方法如下： 1. 在 ECharts 的 option 中，设置 tooltip 的触发条件为 `always`，例如： ```js { ... tooltip: { trigger: 'always' }, series: [{ type: 'map', map: 'china', ... }] ... } ``` 在上述代码中，设置了 tooltip 的触发条件为 `always`。 2. 设置 tooltip 的显示内容，例如： ```js { ... tooltip: { trigger: 'always', formatter: function (params) { return params.name + ': ' + params.value; } }, series: [{ type: 'map', map: 'china', ... }] ... } ``` 在上述代码中，设置了 tooltip 的显示内容为地图区域的名称和数据值。 通过以上步骤，就可以实现 ECharts 地图不需要鼠标事件时一直显示 tooltip 的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiaolongyu3

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值