echarts散点图多点重合鼠标移入数据无法全部显示的解决办法

代码地址：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);