Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

echarts event 事件问题 #3853

Closed
Jackie-5 opened this issue Aug 16, 2016 · 13 comments
Closed

echarts event 事件问题 #3853

Jackie-5 opened this issue Aug 16, 2016 · 13 comments
Assignees
Labels
enhancement stale Inactive for a long time. Will be closed in 7 days.

Comments

@Jackie-5
Copy link

Jackie-5 commented Aug 16, 2016

为什么 echarts的 click 事件必须得点击到某一个数据的原点位置才可以触发呢? 不应该是点到图表上的任意位置 就会触发click事件吗?求解决,因为用到了事件。

@Jackie-5
Copy link
Author

还有一个问题 我通过getZr() 这个方法拿到了全局的click事件 但是我该怎么获取到 当前我点的地方的那个数据呢? 线图问题。

@Jackie-5
Copy link
Author


image

我可以通过click事件拿到具体的数据 但是如果click绑定到了全局 那么就无法拿到具体数据的值,但是 click只能通过点击那个具体的原点来触发,有方法让click不去点击到原点 点击到图上就触发吗?就像tooltip 这个组件一样 点击到charts表上就可以直接显示出来当前的值。

@imingyu
Copy link

imingyu commented Aug 17, 2016

我结合我的使用经验尝试给你解答,但正确性有待考量,但是就目前而言可以解决问题;
问题1:点击图表实体部分(如数据点,饼,柱等)才会触发click,空白部分不触发;
问题2:我一般绑定两个click事件,一个在echart实例上,一个在getZr()上,前者无需多言,后者getZr().click触发时,会传递event对象,而这个对象的target应该就是鼠标点击的实体对象或者空白部分,当点击实体对象时它不为空,点击空白部分时它为undefined;由此可做进一步的判断和逻辑处理。

myChart.getZr().click(function(event){
  if(!event.target){ console.log("点击空白处"); }
})

@Jackie-5
Copy link
Author

我可以绑定两个事件 但是,当他触发了全局的事件的时候event.target 这个方法一定是undefined,其实最终还是必须要点击到某一个数据点上才可以拿到当前的数据。所以这个方法不太好用。我读了点击事件的源码,当点击到除了点的位置 event里都是获取不到target的,但是我不太清楚为什么 tooltip 这个插件为什么可以只要点击charts表上 就可以获取到当前的数据点。

@hustcc
Copy link
Contributor

hustcc commented Dec 12, 2016

@jackie-web 遇到同样的问题,之前用 echart2 的时候,修改 2 的代码来实现了这个,现在用 3 了,也需要这样的功能,结果不知道怎么弄,求官方解答~

#3440

@hustcc
Copy link
Contributor

hustcc commented Dec 13, 2016

@jackie-web @imingyu 目前我这里的解决办法有两种:

一、showTip 事件

  1. chart 监听 showTip 事件,每次全局记录一个 lastTipIndex,存储最后一次 tooltip 显示的位置的坐标位置。
  2. zr 监听 click 事件,然后使用上面的 lastTipIndex 数据做自己的操作。

二、tooltip formatter

  1. chart 的 tooltip formatter 方法中,缓存最后一次 tooltip 的数据,同样为:lastTipIndex
  2. zr 监听 click 事件,然后使用上面的 lastTipIndex 数据做自己的操作。

两种方法都绕路实现楼主的需求,目前我们这么做的。其他chart 似乎都有这个功能,只有 echart 没有,而且是 2 和 3 都没有

感谢 @hustcc @flyYoyo ✨。

@waitinghope
Copy link

3.3之后增加了两个api。
http://echarts.baidu.com/api.html#echartsInstance.convertToPixel

@ZhuGYao
Copy link

ZhuGYao commented Mar 19, 2018

遇到了同样的问题,timeline的前进后退键的点击事件无法捕获,真的耽误事啊。

@moumyu
Copy link

moumyu commented Apr 25, 2019

@hustcc 其实都有问题,zr监听的是全局点击事件。如果记录了lastTipIndex后,点击了非数据图的位置也会响应

@moumyu
Copy link

moumyu commented Apr 26, 2019

可以配合hideTip事件清空lastTipIndex

var lastTipIndex = null;
chart.on('showTip', function(event) {
  lastTipIndex = event.dataIndex;
});
chart.on('hideTip',  function(event) {
  lastTipIndex = null;
});
chart.getZr().on('click', function() {
  if (dataIndex != null) {
    // 执行点击事件动作
  }
});

@suneai
Copy link

suneai commented Jun 20, 2019

回传到父组件的函数还是触发不了啊

@Ovilia Ovilia added the stale Inactive for a long time. Will be closed in 7 days. label Jul 8, 2019
@stale stale bot closed this as completed Jul 15, 2019
@linupychiang
Copy link

我可以绑定两个事件 但是,当他触发了全局的事件的时候event.target 这个方法一定是undefined,其实最终还是必须要点击到某一个数据点上才可以拿到当前的数据。所以这个方法不太好用。我读了点击事件的源码,当点击到除了点的位置 event里都是获取不到target的,但是我不太清楚为什么 tooltip 这个插件为什么可以只要点击charts表上 就可以获取到当前的数据点。

同问

@linupychiang
Copy link

我可以绑定两个事件 但是,当他触发了全局的事件的时候event.target 这个方法一定是undefined,其实最终还是必须要点击到某一个数据点上才可以拿到当前的数据。所以这个方法不太好用。我读了点击事件的源码,当点击到除了点的位置 event里都是获取不到target的,但是我不太清楚为什么 tooltip 这个插件为什么可以只要点击charts表上 就可以获取到当前的数据点。

同问

点击空白处时,之前柱状图的选中状态会消失。怎样才能使点击了空白处后,选中状态不消失?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement stale Inactive for a long time. Will be closed in 7 days.
Projects
None yet
Development

No branches or pull requests

9 participants