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

这篇博客介绍了如何使用JQuery实现Echarts散点图的点击事件,以便获取坐标轴上的点击位置。博主发现只有点击已存在的数据点时才能获取坐标,因此采取了在图表上添加大量数据点的方法来实现在任意位置获取坐标。同时,文中还分享了如何改变点颜色以及模拟实现双击事件的技巧。欢迎读者提供更好的解决方案。
摘要由CSDN通过智能技术生成

内容有点多,慢慢看~~

我的需求是:通过点击坐标轴的任意位置,获取当前位置的坐标,并赋值给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代码:

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

效果图

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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值