Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义数据

Echarts 地图插件提供了丰富的交互功能，包括鼠标悬停（hover）、点击、缩放等。其中，鼠标悬停可以通过设置 tooltip 来显示自定义数据。
下面是一个示例代码，演示如何在地图上添加自定义的 tooltip 数据：
// 引入 Echarts 和地图数据
import echarts from 'echarts'
import 'echarts/map/js/china.js'

// 初始化 Echarts 实例
const chart = echarts.init(document.getElementById('chart'))

// 设置地图配置项
const option = {
tooltip: {
trigger: 'item',
formatter: function(params) {
// 自定义 tooltip 显示的数据
return params.name + '<br/>' + '自定义数据：' + params.data.value
},
},
series: [
{
type: 'map',
map: 'china',
// 自定义数据
data: [
{ name: '北京', value: 100 },
{ name: '上海', value: 200 },
{ name: '广州', value: 300 },
],
},
],
}

// 将配置项设置给 Echarts 实例
chart.setOption(option)
登录后复制
上面的代码中，我们通过在 tooltip 配置项中设置 formatter 函数来自定义 tooltip 显示的数据。函数的参数 params 包含了当前鼠标悬停的地图区域的信息，我们可以通过 params.name 来获取区域名称，通过 params.data 来获取该区域的自定义数据。
另外，我们还在地图系列（series）中设置了 data 属性来定义每个区域的自定义数据，这些数据将会在 formatter 函数中被使用。
通过这种方式，我们可以灵活地在地图上添加自定义的 tooltip 数据，为用户提供更加丰富的数据展示和交互体验。