我之前遇到過這問題,單獨設置 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:{}
}
}