vue2 echarts 地图示例中 tooltip. formatter 自定义 模板，模板中 如何 点击查看详情按钮 ，触发 点击事件 从而显示弹窗

在 Vue2 中结合 ECharts 的地图示例中，如果你想自定义 tooltip 的内容并添加点击查看详情按钮的功能，可以这样做：

首先，在你的 `formatter` 函数中，你可以构建一个包含详细信息的 HTML 渲染结构，然后在其中插入一个带有 `v-on:click` 绑定的元素，比如一个 `<a>` 标签：

<template>
  <div class="custom-tooltip">
    <span v-html="formatTooltip(data)"></span>
    <button :title="detailText" @click="showDetails(data)">查看详情</button>
  </div>
</template>

<script>
export default {
  methods: {
    formatTooltip(data) {
      return '<div>' +
        '<span>地区名称：{{data.name}}</span>' +
        '<span>详细信息：{{data.detail}}</span>' +
        '</div>' +
        '<a href="#" v-bind:href="' + this.showDetailsLink(data) + '" title="点击查看">查看详情</a>';
    },
    
    showDetails(data) {
      // 这里可以处理跳转到新页面、弹窗展示或者其他你想做的操作
      this.$emit('detailClick', data); // 如果你想在组件外部监听这个事件
      return '#'; // 返回默认值，实际应用中可能需要修改成具体的跳转URL或者回调函数
    },
    
    showDetailsLink(data) {
      return '#' + encodeURIComponent(JSON.stringify(data)); // 将数据序列化为 URL 友好的形式
    }
  }
}
</script>

在这个例子中，当用户点击“查看详情”按钮时，会触发 `showDetails` 方法，它可能发射一个名为 `detailClick` 的事件，或者直接链接到一个新的视图或者弹窗中显示详细信息。

在你的 ECharts 配置中，tooltip 的 `formatter` 需要引用上述组件的 `formatTooltip` 方法：

options: {
  tooltip: {
    trigger: 'item',
    formatter: (params) => this.$refs.customTooltip.formatTooltip(params.data), // 使用组件实例方法
    ...
  },
  ...
}

这只是一个基本的例子，实际情况可能需要根据你的项目结构和需求进行调整。记得在组件的父组件上监听 `detailClick` 事件，以便处理相应的业务逻辑。