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 数据，为用户提供更加丰富的数据展示和交互体验。