背景

用echarts展示图表的时候，有时候需要点击当前图表，进行一些其他”effect side”操作,这个时候就需要得到当前这个点的横纵坐标的数据信息了。

探索方法

方法一

查看官网API文档 http://www.echartsjs.com/api.html#echarts, 支持鼠标click事件，拿到基础的 line bar 图例上试验。
发现click触发条件是：

  1. line图需要点击到数据气泡点上，需要精准点击，数据多的时候，精准点击是困难的
  2. bar图需要点击到柱状上，如果某几个数据bar很小，也存在精准点击困难的问题

方法二

官网给出的API方法不尽如人意，去github上查找issue，发现有不少提出这问题。
解决方法：给出一个透明的bar坐标系重叠到图表上，透明bar的数据都是当前最大值，这样在图表对应的x轴都能实现触发点击，类似于tooltip那样方便。
https://github.com/apache/incubator-echarts/issues/6106

但是，这个方法也有缺点：

  1. 多了一个坐标系，增加了页面的数据量，加大了浏览器绘制压力
  2. 数据量大的时候，每个bar区域很小，bar之间存在空隙，准确点击也不那么容易

所以，这个方法体验也不是那么好

方法三

在试验方法二的时候，虽然准确点击体验不那么好，但hover触发的tooltip仍然十分流畅，但查看文档，tooltip虽然可以得到当前坐标的data数据，但无法判断事件。
所以想要tooltip那种点击得到当前数据的体验，需要结合一个click事件。

在官网示例上，找到一个click的示例， http://echarts.baidu.com/examples/editor.html?c=line-pen

zr的click在点击整个chart区域的时候都会触发，但往往需要排除掉图表区域外的无关区域，所以需要convertFromPixel转化到当前的坐标系，containPixel判断是否在当前坐标系中。
坐标点的数据呢？ 在tooltip的formatter中维护。 逻辑示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var clickParams = null;
myChart.options.tooltip.formatter = function(params){
    clickParams = params;
    // return formaater string
}

var zr = myChart.getZr();
zr.on('click', function (params) {
    var pointInPixel = [params.offsetX, params.offsetY];   //得到点击事件的触发点
    var pointInGrid = myChart.convertFromPixel('grid', pointInPixel);

    if (myChart.containPixel('grid', pointInPixel)) {  //判断是否在坐标系中
        // 得到clickParams， effect side 处理
    }
});

issue讨论：https://github.com/apache/incubator-echarts/issues/3853