React echarts y轴数据过小导致无法处理点击事件解决方法

obf13

于 2019-04-01 15:38:14 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： React Echarts

本文链接：https://blog.csdn.net/obf13/article/details/88949553

React 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在React中使用ECharts并实现点击事件处理。通过获取图表元素坐标，判断点击位置是否在有效区域内，并根据点击位置获取对应数据索引及值，进而触发相关业务逻辑。适用于需要对图表进行交互操作的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<ReactEcharts onChartReady={this.onChartReady}/>

onChartReady(echart) {
        echart.getZr().on('click',params=>{
            const pointInPixel = [params.offsetX, params.offsetY];
            if (echart.containPixel('grid',pointInPixel)) {
                let xIndex = echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
                /*事件处理代码书写位置*/
                let score = this.props.xData[xIndex];
                this.props.showYear(score);
            }
        });
}