echarts点击事件

266 阅读1分钟
  1. 图形点击事件
this.chart.off('click');
this.chart.on('click',(params)=>{
    // params:当前点击图形的参数
    // 代码逻辑
})

image.png

2.柱状图阴影点击

this.chart.getZr().off('click');
this.chart.getZr().on('click',(params)=>{
    const pointInPixel= [params.offsetX, params.offsetY];
    if (this.chart.containPixel('grid', pointInPixel)) {
        const [, yIndex] = this.chart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
        // 逻辑代码
        // 此时无法获取点击图形的参数, 需要在option中配置formatter
    }
})

image.png

 option: {
    formatter: val => {
        //获取当前阴影部分点击的索引值及详细数据
        this.tableData = val[0].data.list 
        this.clickIndex = val[0].dataIndex
    },
 }

image.png