echarts地图渲染时,tooltip下的formatter不执行,排查后发现:
地图没有触发formatter
的原因可能与geo
组件的配置有关。在代码中,tooltip
组件的触发器(trigger
)被设置为'item'
,但是geo
组件并没有提供series
数据。为了解决这个问题,您可以尝试将tooltip
组件的触发器设置为'geo'
,并在geo
组件中添加data
属性,将listData
作为其值。这样,tooltip
组件应该能够正确触发formatter
函数。
以下是修改后的optionMap
配置:
var optionMap = {
tooltip: {
show: true,
trigger: 'geo', // 将触发器设置为 'geo'
formatter: function (params) {
// ...
}
},
geo: {
map: nameMap,
show: true,
silent: false,
aspectScale: 0.8,
layoutCenter: ["56%", "51%"],
layoutSize: '120%',
roam: false,
itemStyle: {
// ...
},
z: 0,
label: {
// ...
},
data: listData // 在 geo 组件中添加 data 属性
}
};
这样修改后,当鼠标悬停在地图区域上时,formatter
函数应该会被触发。
function getEcharts() {
const chartDom = document.getElementById("centerMap");
const mapPopWin = document.getElementById("mapPopWin");
const mapAddress = document.getElementById("mapAddress");
const myChart = echarts.init(chartDom);
const img = document.getElementById('centerMapImg');
const centerMap = document.getElementById('centerMap');
centerMap.style.width = img.offsetWidth + 'px';
centerMap.style.height = img.offsetHeight + 'px';
myChart.clear();
myChart.resize();
const nameMap = '地图数据';
var listData = [
{
"value": [121.539698, 29.874452],
"name": "海曙区",
"img": 'haishuqu'
}, {
"value": [121.559282, 29.888361],
"name": "江北区",
"img": 'jiangbeiqu'
}, {
"value": [121.831303, 29.90944],
"name": "北仑区",
"img": 'beilunqu'
}, {
"value": [121.713162, 29.952107], "name": "镇海区",
"img": 'zhenhaiqu'
}, {
"value": [121.558436, 29.831662],
"id": 4,
"name": "鄞州区",
"num": "58",
"img": 'yinzhouqu'
}, {
"value": [121.41089, 29.662348], "name": "奉化区",
"img": 'fenghuaqu'
}, {
"value": [121.877091, 29.470206],
"id": 6,
"name": "象山县",
"num": "31",
"img": 'xiangshanxian'
}, {
"value": [121.432606, 29.299836], "name": "宁海县",
"img": 'ninghaixian'
}, {
"value": [121.156294, 30.045404],
"id": 8,
"name": "余姚市",
"num": "36",
"img": 'yuzhaoshi'
}, {
"value": [121.248052, 30.177142], "name": "慈溪市",
"img": 'cixishi'
}]
// 图标数据
echarts.registerMap(nameMap, gdMap);
var optionMap = {
tooltip: {
show: true,
trigger: 'item', // 设置为 'item'
formatter: function (params) {
console.log(1222)
// 获取所有的图片元素
var imgs = document.querySelectorAll('.map img');
// 从listData中找到对应的img
var imgId;
for (var i = 0; i < listData.length; i++) {
if (listData[i].name === params.name) {
imgId = listData[i].img;
break;
}
}
console.log(imgId)
// 遍历所有的图片元素
for (var i = 0; i < imgs.length; i++) {
var img = imgs[i];
console.log(imgId)
// 如果图片元素的id和找到的img对应,则将其显示,否则将其隐藏
if (img.id === imgId) {
img.style.display = 'block';
} else {
img.style.display = 'none';
}
}
return 111;
}
},
geo: {
map: nameMap,
show: true,
silent: false,
aspectScale: 0.8,
layoutCenter: ["56%", "51%"],
layoutSize: '120%',
roam: false,
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 0)',
borderWidth: 0.5,
areaColor: 'red',
opacity: 0,
},
emphasis: {
borderColor: 'rgba(147, 235, 248, 0)',
borderWidth: 0.5,
areaColor: 'rgba(147, 235, 248, 0)',
opacity: 0,
}
},
z: 0,
label: {
normal: {
show: true,
position: 'center',
offset: [0, 5],
formatter: function (params) {
console.log(params)
var text = `{name|${params.name}}`
return text
},
color: '#fff',
rich: {
name: {
width: 101,
align: 'center',
padding: [0, 0, 0, 0],
color: '#FEFEFE',
fontSize: 16,
fontWeight: 500,
fontFamily: 'YouSheBiaoTiHei'
},
},
},
},
}
};
myChart.clear();
myChart.resize();
myChart.setOption(optionMap);
}