how to add a click event in ol3Echarts about ol3echarts

[sakitam-fdd]

@yangdengxian 这块目前不太能确定是 ol 的问题还是 echarts 的问题，echarts 的事件目前无法响应了：https://codesandbox.io/s/zealous-shape-q32gb

[sakitam-fdd]

@yangdengxian AppndTo currently does not instantiate echarts, temporarily adding event listeners by delaying, and subsequently considering adding a loaded event to make callbacks.

[yangdengxian]

I'm a little confused, there is a instance about echarts in your native code I see
This is the native code

EChartsLayer.prototype.render = function render() {
            if (!this.$container) {
                this._createLayerContainer(this.$Map, this.$options);
                this._resizeContainer();
            }
            if (!this.$chart) {
                this.$chart = echarts.init(this.$container);
                if (this.$chartOptions) {
                    this._registerMap();
                    this.$chart.setOption(this.reConverData(this.$chartOptions), false);
                }
            } else if (this._isVisible()) {
                this.$chart.resize();
                this.reRender();
            }
        };

Thank you

[sakitam-fdd]

@yangdengxian 确实会创建实例，但是在你appendTo的时候不会立即创建echarts 实例，你可以延时一下去添加事件监听。

__this.echartLayer.appendTo(__this.map);
//chart click event
setTimeout(() => {
  __this.echartLayer.$chart.on('click', (evt) => {
      console.log(evt);
  });
}, 2 * 1000)

[yangdengxian]

@yangdengxian 确实会创建实例，但是在你appendTo的时候不会立即创建echarts 实例，你可以延时一下去添加事件监听。

__this.echartLayer.appendTo(__this.map);
//chart click event
setTimeout(() => {
  __this.echartLayer.$chart.on('click', (evt) => {
      console.log(evt);
  });
}, 2 * 1000)

哈哈，我以为你是国外程序员呢。
应该不是实例化时间差的问题，我调试你的源码，在创建完echarts实例后，绑定click事件，也不生效。
我想咨询一下，EChartsLayer这个类里，可以监听click事件吗，我好像也没找到。
我现在的需求就是点击拿到饼图或者柱状图的数据，能在echarts上点击获取是最合适的。
或者我自己再改造一下，谢谢你了

[sakitam-fdd]

@yangdengxian 不是类似于这样吗？link，ol-echarts 这个也是类似的，只要拿到 echarts 的实例，就能正常监听 😄

[yangdengxian]

@yangdengxian 不是类似于这样吗？link，ol-echarts 这个也是类似的，只要拿到 echarts 的实例，就能正常监听 😄

ol3Echarts这个echarts点击click事件能正常监听，切换到ol-echarts这个版本监听就不生效😄，我现在openlayers版本5.1.2,只能使用ol-echarts这版本,能麻烦看看吗，万分感谢

[yangdengxian]

@yangdengxian 不是类似于这样吗？link，ol-echarts 这个也是类似的，只要拿到 echarts 的实例，就能正常监听 😄

[sakitam-fdd]

@yangdengxian 这问题不太好定位，我本地测试没有问题，可以尝试降级一下 echarts 的版本到 4.2.1

[yangdengxian]

@sakitam-fdd 这问题不太好定位，我本地测试没有问题，可以尝试降级一下 echarts 的版本到 4.2.1

好的，太麻烦你了。谢谢了，我试试。

[yangdengxian]

@sakitam-fdd 这块目前不太能确定是 ol 的问题还是 echarts 的问题，echarts 的事件目前无法响应了：https://codesandbox.io/s/zealous-shape-q32gb

应该不是echarts版本问题，单独使用echarts监听click事件，生效的。猜测是不是与ol的事件机制冲突了，或者图层顺序有关，被遮盖无法点中。😄

[sakitam-fdd]

@yangdengxian 有兴趣可以看下实现原理, 目前的做法是放到 ol 实例化的容器的 ol-overlaycontainer, 这个里面会进行事件透传，在之前版本 echarts 本身也是可以拦截到事件的，但是新版本不知道为什么不行了，这个可以考虑使用 ol 的事件手动触发。

[yangdengxian]

@sakitam-fdd 有兴趣可以看下实现原理, 目前的做法是放到 ol 实例化的容器的 ol-overlaycontainer, 这个里面会进行事件透传，在之前版本 echarts 本身也是可以拦截到事件的，但是新版本不知道为什么不行了，这个可以考虑使用 ol 的事件手动触发。

好的，谢谢分享资料。还有讨论一个题外问题，echarts图表内容放在ol实例化容器的ol-overlaycontainer中，假如其他overlay覆盖物，比如:ol-cesium，也会在同一ol-overlaycontainer容器中。关闭cesium，设置ol-overlaycontainer容器不可见，也会影响到ol-overlaycontainer容器的所有要素。不知道楼主是否遇到这样的问题。总感觉ol将所有overlay要素放在同一个ol-overlaycontainer容器下面，设计是否合理。不管怎么说，还是非常感谢楼主不辞辛苦，为我解答。还是得多看一下ol源码设计，谢谢楼主

[xuxinkun0591]

l3Echarts这个echarts点击click事件能正

我这边 ol3Echarts 也不能添加监听啊

[sakitam-fdd]

l3Echarts这个echarts点击click事件能正

我这边 ol3Echarts 也不能添加监听啊

收到，这块现在还在重构，需要一点时间

[sakitam-fdd]

@yangdengxian @xuxinkun0591 fixed link, 暂时添加了一个参数控制：

polyfillEvents: true, // 代理echrats图层的 mousedown mouseup click 事件