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

最新推荐文章于 2024-06-06 17:56:34 发布

原创最新推荐文章于 2024-06-06 17:56:34 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#React #Echarts

React 专栏收录该内容

7 篇文章

订阅专栏

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

<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);
            }
        });
}