echarts地图点击展示tooltip

ECharts是一款强大的JavaScript数据可视化库，它支持地图插件，可以方便地在地图上显示数据。如果你想在地图点击时弹出Tooltip（提示框），你可以按照以下步骤操作：

1. **初始化地图组件**：
首先，你需要引入ECharts和相关的地图JSON文件，并创建一个echarts实例。设置maptype为你想要的地图类型。

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
  map: 'China', // 或者其他地图名
});

2. **配置地图上的点击事件**：
在`series`部分，添加鼠标点击事件处理函数，当用户点击地图区域时，会在该点触发Tooltip并显示数据。

option = {
  series: [{
    name: '地图',
    type: 'map',
    data: [], // 这里需要替换为实际的数据源
    mapType: 'China', // 地图类型
    roam: true,
    selectedMode: 'single',
    onclick: function (params) { // 点击事件回调
      var provinceName = params.name; // 获取点击省份的名称
      myChart.dispatchAction({
        type: 'showTip', // 显示 Tooltip
        seriesIndex: 0,
        dataIndex: params.dataIndex, // 数据索引
        value: params.value // 如果有额外的数据值
      });
    }
  }]
};

3. **启用Tooltip**：
需要在全局配置项中开启Tooltip功能，并自定义其样式和内容格式。

myChart.setOption({
  tooltip: {
    trigger: 'item', // 点击触发
    formatter: '{b}: <br>{c} ({d}%)', // 格式化Tooltip内容
    position: ['50%', '80%'] // 定位位置
  }
});