关于 echarts 使用 geo 制作地图 tooltip 不显示问题
我之前遇到过这问题,单独设置 tooltip 没效果,geo 下面也有 tooltip 属性,但是也不管用,网上查了一下说 geo 不支持 tooltip 提示框显示,就自己根据 echarts 配置项试了试,弄出两种方法
第一种就是 tooltip 全局设置一个,geo 下面 tooltip 在设置一个,两个都设置才管用,单独设置没效果,
代码附上
const option = {
title: {
text: ""
},
tooltip: {
trigger: "item",
show: true,
formatter: function(params) {
let city = params.name + "市";
let res = "";
sswlist.map(item => {
if (item.properties.name == city) {
res = item.properties.info;
}
});
return res;
},
padding: 2,
textStyle: {
fontSize: 8,
lineHeight: 10,
align: "left"
}
},
geo: {
map: "yns",
zlevel: 10,
show: true,
layoutCenter: ["50%", "48%"],
roam: false,
layoutSize: "150%",
zoom: 1,
label: {
normal: {
show: true,
textStyle: {
fontSize: 12,
color: "#43D0D6"
}
}
},
itemStyle: {
normal: {
color: "#062031",
borderWidth: 1.1,
borderColor: "#43D0D6"
}
},
emphasis: {
areaColor: "#FFB800",
label: {
show: false
}
},
tooltip: {
trigger: "item",
show: true,
formatter: function(params) {
let city = params.name + "市";
let res = "";
sswlist.map(item => {
if (item.properties.name == city) {
res = item.properties.info;
}
});
return res;
},
padding: 2,
textStyle: {
fontSize: 8,
lineHeight: 10,
align: "left"
}
第二种就是 label 通过更改 label 下的 formatter 属性来实现,formatter 和 tooltip 下的 formatterz 作用一样,如果想让鼠标点击或划过显示的话通过 emphasis 下的 label 实现例如:
emphasis:{
label:
{formatter:{}
}
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· AI与.NET技术实操系列(六):基于图像分类模型对图像进行分类