Echarts 图形背景点击事件

关键点: echarts 灰色区域 背景 点击;

Echarts 图形点击事件分为两种

1. 最简单的点击事件

此种方式只有点击数据才会触发事件,如果数据为空,则不会触发

myChart.on('click', function (params) {
...
});

2. 进阶点击事件

echarts 图形点击直接触发,点击柱状图后面的灰色区域也会触发,后续操作需要自己根据参数判断

myChart1.getZr().on('click', params => {
    // 获取点击位置
    const pointInPixel = [params.offsetX, params.offsetY];
        // 是否在 grid 里面点击
        if (consts.myChart1.containPixel('grid', pointInPixel)) {
            // 获取 点击的图是第几个(柱状图)
            let xIndex = consts.myChart1.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0];

            if (!consts.datasj[xIndex]) {
                return;
            }

            ...
        }
    })