echarts地图鼠标悬停弹出提示框

在 Echarts 中，可以通过设置提示框（tooltip）来实现鼠标悬停时弹出提示框。以下是一种实现方式：

1. 首先，在引入 Echarts 的 HTML 文件中添加一个 `<div>` 元素，用于显示提示框的内容：

<div id="tooltip" style="position: absolute; display: none;"></div>

2. 在 JavaScript 中，使用 Echarts 的 `tooltip` 配置项来设置提示框的样式和内容。例如：

var myChart = echarts.init(document.getElementById('chartDiv'));

// 设置提示框
myChart.setOption({
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            // 返回自定义的提示框内容
            return params.name + ': ' + params.value;
        }
    },
    // 其他配置项...
});

// 监听鼠标移动事件，在鼠标移动时显示/隐藏提示框
myChart.getZr().on('mousemove', function (e) {
    var point = [e.offsetX, e.offsetY];
    var coord = myChart.convertFromPixel('grid', point);

    // 在这里可以根据坐标信息自定义提示框的位置
    var tooltip = document.getElementById('tooltip');
    tooltip.style.left = e.event.pageX + 'px';
    tooltip.style.top = e.event.pageY + 'px';
    tooltip.style.display = 'block';
});

myChart.getZr().on('mouseout', function () {
    // 隐藏提示框
    var tooltip = document.getElementById('tooltip');
    tooltip.style.display = 'none';
});

在上述代码中，`formatter` 函数用于自定义提示框的内容，`mousemove` 事件监听鼠标移动事件，根据鼠标位置设置提示框的位置，并显示出来。`mouseout` 事件用于隐藏提示框。

以上就是使用 Echarts 实现鼠标悬停弹出提示框的方法。你可以根据需要自定义提示框的样式和内容。