可视化组件:echarts柱状图添加点击事件

一、点击事件

  1、添加点击事件

myChart.getZr().on('click', function(params) {
    var point = [ params.offsetX, params.offsetY ];
    if (myChart.containPixel('grid', point)) {
         var xIndex = myChart.convertFromPixel({seriesIndex : 0}, point)[0];
         var op = myChart.getOption();
         var name = op.xAxis[0].data[xIndex];
    }
})

  通过point得到点击的坐标点x和y。

  myChart.convertFromPixel得到具体x轴序号。

  op获取当前图表的option。

  name则是点击的那个柱子的x轴文字,可进行下一步操作。

  2、关闭点击事件

myChart.getZr().off('click');

  主要作用是解除点击方法的绑定,避免点击时发生二次调用的问题。

  3、柱状图点击事件多用在数据大屏的数据下钻。

原文地址:https://www.cnblogs.com/guobin-/p/12392641.html