代码地址：https://github.com/BadMooncc/echarts-scatter

转载注明出处：https://blog.csdn.net/badmoonc/article/details/80983854

如若不想看我啰嗦，可以直接去项目查看代码，代码实现非常简单

echarts散点图trigger设置为item的情况下，多个点重合在一起当我们鼠标指向该点时，数据只会显示一个，其他的数据是不会显示的，某些情况下我们其实是需要看到重合点的所有数据的，比如数据中有不同的人名，但是他们重合在了一起，很显然我们需要知道这些人都是谁，so～

注：本文实现案例以vue-echarts为例，当然为了照顾伸手党（我本人也是，哈哈），项目根目录下有个demo.html，是普通开发的示例代码，如果对您有帮助，麻烦点个star，不胜感激

ok，废话不多说，直接入正题，散点图多点重合的状态下，我们的配置一般是下边这样的：

option: {
        xAxis: {
          data:['big', 'cat', 'fox','dog']
        },
        yAxis: {},
        tooltip: {
          show: true,
          trigger: 'item',
          axisPointer: {
            type: 'cross',
            snap: true,
            axis: 'x', // x轴选项
            label: {
              // show: false,
              color: '#fff',
              backgroundColor: 'rgba(0, 0, 0, .55)'
            }
          },
          // formatter (params) {
          //   console.log(params);
          // }
        },
        series: [{
            symbolSize: 20,
            data: [
                ['big', 4.82],
                ['cat', 1.82],
                ['cat', 2.82],
                ['dog', 1.82],
                ['fox', 5.68],
                ['fox', 5.68]
            ],
            type: 'scatter'
        }]
      }

注：代码仅为示例

网上查了类似的问题，有说将tooltip中的trigger设置为'axis'，首先来说设置成axis确实可以解决重合点不显示的问题，但是也带来了一个新的问题：散点图这一竖列的数据都会显示出来，那这样的话就跟需求不符合了。问题如下图所示：

当指向某个点时，此点相同x轴的点全部被显示出来（具体显示x轴y轴以你具体配置为准），而配置项确实只提供了这两种方式。不过，解决办法肯定是有的我们继续往下看。

首先说下我们想实现的效果：当鼠标指向单独点时还是只显示这一个点的数据，如果有重合的点，则全部让其显示出来。

根据需求，首先我们知道，tooltip中的trigger设置为'axis'，确实可以将被覆盖的点显示出来，但是也会显示一些我们不需要的点的数据。那么可以想一下，如果我们可以拿到当前指向的这个点，去跟显示的这一组点的数据做比对，如果x轴和y轴的值跟当前鼠标指向的点的x，y值都相等，则说明当前这一列中存在重合点，就让他们都显示出来。

1、现在我们可以把上边示例代码中注释部分formatter打开，在控制台输出一下，可以观察到，输出的将是一个数组，这也就是显示的这一组点，其中有我当前指向的点和重合的点，也有x值相等的其他点。

2、接下来我们只需要在拿到鼠标当前指向的这个点的x，y值，与拿到的这一组点做比较，如果相等的话说明该点是重合点和当前指向的点。这样我们就让其显示。

3、上边第一步我们已经拿到了当前这一竖列的所有点，那我们如何获取当前指向的这个点的值呢，其实也简单，echarts的API实际上为我们提供了一些鼠标事件的API，其中有个mouseover事件，我们来看一下：

当鼠标移入点时，会在回调中输出params，我们来看下输出的params是个什么东西：

可以看到，输出的正是我们想拿到的当前点的信息，其中有个data属性，里边便是x，y的值。

到此为止，我们就把当前指向的点的信息，和当前这一组点的信息都拿到了，现在只要遍历这一组点，如果跟当前指向点的信息一致，是我们需要的，那么就将其保存下来，循环结束时，将比对成功的点显示出来就可以了。

完成后的效果

选中没有重合的点时：

有重合点时：

完整代码如下：

var myChart = echarts.init(document.querySelector('#echart'));
    var currentData;
    var option = {
      xAxis: {
        data: ['big', 'cat', 'fox', 'dog']
      },
      yAxis: {},
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          snap: true,
          axis: 'x', // y轴选项
          label: {
            // show: false,
            color: '#fff',
            backgroundColor: 'rgba(0, 0, 0, .55)'
          }
        },
        formatter: (params) => {
          console.log(params, 'dsad');
          if (!currentData) return;
          var htmlF = '';
          params.forEach(item => {
            if (currentData[0] === item.data[0] && currentData[1] === item.data[1]) {
              htmlF += `<div>
                            <h3>${item.data[0] }</h3>
                            <p>${item.data[1] }</p>
                          </div>`;
            }
          });
          return htmlF;
        }
      },
      series: [{
        symbolSize: 20,
        data: [
          ['big', 4.82],
          ['cat', 1.82],
          ['cat', 2.82],
          ['dog', 1.82],
          ['fox', 5.68],
          ['fox', 5.68]
        ],
        type: 'scatter'
      }]
    }
    myChart.on('mouseover',function(params){
      currentData = params.data;
    })
    myChart.setOption(option);