echarts 地图渲染tooltip没有触发formatter的原因

echarts yekong

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);
}  
喜欢