Echarts给图表添加点击事件

需要在图表的渲染方法的setOption()后面添加事件

1. 给图表的item添加点击事件

myChart.setOption(option,true);
myChart.on('click', function (param) {
    /*param参数包含的内容有：
    //param.name：X轴的值
    //param.data：Y轴的值
    //param.value：Y轴的值
    //param.type：点击事件均为click
    //param.seriesName：legend的名称
    //param.seriesIndex：系列序号（series中当前图形是第几个图形第几个）
    //param.dataIndex：数值序列（X轴上当前点是第几个点）
    //alert(param.seriesName);  //legend的名称
    // alert(param.name);  //X轴的值
    // alert(option.series[param.seriesIndex].barIds[param.dataIndex]);//获取自定义的值
    */
    _this.normalTime = param.name;
}
           

2. 给整个图表添加点击事件

   myChart.getZr()函数获取的是整个画布对象

myChart.getZr().on('click', function (param) {
    const pointInPixel = [param.offsetX, param.offsetY]
    // 使用 convertFromPixel方法 转换像素坐标值到逻辑坐标系上的点。获取点击位置对应的x轴数据的索引		 值，借助于索引值的获取到其它的信息
    let pointInGrid = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
    // x轴数据的索引值
    let xIndex = pointInGrid[0];
    // 使用getOption() 获取图表的option
    let op = myChart.getOption();
    //获取到x轴的索引值和option之后，我们就可以获取我们需要的任意数据。
    var time = op.xAxis[0].data[xIndex];
    var value = op.series[0].data[xIndex];
});