echarts y轴添加点击事件_JQuery实现Echarts散点图的点击获取坐标事件

内容有点多，慢慢看~~

我的需求是：通过点击坐标轴的任意位置，获取当前位置的坐标，并赋值给x,y

关键js代码：

var height = document.getElementById('hight');

var weight = document.getElementById('weight');

myChart.setOption(option); //关键

var ecConfig = echarts.config; //关键中的关键

function eConsole(param){

if(param.value.length > 1) {

height.innerText = param.value[0]+'cm';

weight.innerText = param.value[1]+'cm';

} else {

height.innerText = param.name+'cm';

weight.innerText = param.value+'cm';

}

}

//在这里做一个点击事件的监听，绑定的是eConsole方法

myChart.on(ecConfig.EVENT.CLICK, eConsole); //max关键

此外param参数包含的内容有：

param.seriesIndex：系列序号(series中当前图形是第几个图形第几个，从0开始计数)

param.dataIndex：数值序列(X轴上当前点是第几个点，从0开始计数)

param.seriesName：legend名称

param.name：X轴值

param.data：Y轴值

param.value：Y轴值

param.type：点击事件均为click

实现的效果图：

我想要实现的效果是点击任意地方能获取这个地方的坐标，但是并没有实现这个最终效果。

在网上几经搜查无果，后来仔细研究一一下Echart，发现自己走进了一个误区，我们获取的数据都是通过param，当我们点击任意地方时只有这个地方在data中是存在的，才能通过param获取。所以要实现点击任意点获取其坐标，只能在坐标中平铺N多个点，也是在data中添加数以万计的数据才行。unbelievable！amazing！

最后我也是通过这个的方法解决问题的。。。好蠢的方法。。。。网友有更好的方法欢迎评论~

附加几个小知识点：

1. 改变点的颜色是这个地方改变，color： 'transparent'; //点变成透明色

2. Echart实现双击事件

Echart插件本身是没有双击事件的，但是我们可以自己模拟一个双击事件，以下图片是另外一个项目的图片

在网上查找的时候看到有网友通过js的计时器通过时间差来触发双击事件，可以是可以，但是有个问题，这里的时间差必须固定才行，而我们并不知道用户什么时候才发生第二次点击动作。所以我没有采用这种方法，而是通过动态改变类名的形式来判断单击和双击事件

, 

, 

关键js代码：

这里点击任意地方获取坐标也是用了上面的蠢方法，简单粗暴啊！

效果图

通过反复点击测试这种方式来判断单击和双击事件是可行的，当然视情况而定。

欢迎网友指正提出更好的意见~~

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。非常感谢~