React AntV/G2Plot环形图Pie添加点击事件，即点击图环触发获取相关数据。

步骤：

1、添加相关依赖，引入AntV/G2Plot图表组件

2、添加配置项

3、添加点击事件方法（关键部分：在onReady={onReadyPie}，onReady是图表渲染完成执行回调方法，在该方法中获取chart对象plot，在plot上通过on绑定相关事件）代码片段如下：

/**
         * 添加环形图点击事件， element 代表图形元素，关于图形元素，请查看：https://g2.antv.vision/zh/docs/manual/concepts/element
         * @param plot 在 Plot 上通过 on 绑定事件、off 移除绑定事件。
         * @author QC
         * @since 20220926
         * @version V1.0
         */
        const onReadyPie = (plot) => {
            // 图表的点击事情，可参考文档添加其它事件,https://charts.ant.design/zh/examples/pie/donut#basic
            plot.on('element:click', (...args) => {
                const pieData = args[0].data?.data
                console.log(args)
                console.log('pieData')
                console.log(pieData)
                this.onOpenView(pieData?.indexName)
            })
        }
        return (
            <div>
                <div>{data?.length > 0 ? <Pie {...config} onReady={onReadyPie} /> : <Empty />}</div>
            </div>
        )

4、引用图表

下例中该React组件是用类组件写的，不过不影响使用，完整代码如下：

import React, { Component } from 'react'
import { G2, Pie } from '@ant-design/plots'
import { Empty } from 'antd'
/**
 * 饼状图
 *
 * @author QC
 * @since 20220719
 * @version V1.0
 */
class Index extends Component {
	constructor(props) {
		super(props)
		this.state = {}
	}

	componentDidMount() {
		this.loadData()
	}

	/**
	 * 加载数据方法
	 */
	loadData = () => {}
  
	/**
	 * 显示弹框方法
	 */
	onOpenView = (type) => {
    console.log(type)
  }
  
	render() {
		const data = []
		const G = G2.getEngine('canvas')
		const config = {
			appendPadding: 10,
			data,
			angleField: 'number',
			colorField: 'indexName',
			radius: 0.8,
			innerRadius: 0.7,
			legend: false,
			tooltip: {
				showMarkers: false,
				formatter: (obj) => {
					// 格式化提示
					return {
						name: `<span style="color: #0F1348">${obj.indexName}</span>`,
						value: `<span style="color: #0F1348">${obj.number}次</span>`,
					}
				},
			},
			label: {
				type: 'spider',
				style: {
					fill: 'black',
					opacity: 1,
					fontSize: 14,
				},
				labelHeight: 40,
				formatter: (obj, mappingData) => {
					const group = new G.Group({})
					group.addShape({
						type: 'circle',
						attrs: {
							x: 0,
							y: 0,
							width: 40,
							height: 50,
							r: 5,
							fill: mappingData.color,
						},
					})
					group.addShape({
						type: 'text',
						attrs: {
							x: 10,
							y: 8,
							text: `${obj.indexName}`,
							fill: mappingData.color === '#5D7092' ? '#ffffff' : mappingData.color, // 把默认灰色改为白色方便查看
							fontWeight: 900, // 环形外标签字体粗细
							fontSize: 14, // 环形外标签字体大小
						},
					})
					group.addShape({
						type: 'text',
						attrs: {
							x: 0,
							y: 25,
							text: `${obj.number}次`,
							fill: 'rgba(165, 231, 241, 1)',
							fontWeight: 900, // 环形外标签字体粗细
							fontSize: 14, // 环形外标签字体大小
						},
					})
					return group
				},
			},
			statistic: false,
			interactions: [
				{
					type: 'element-selected',
				},
				{
					type: 'element-active',
				},
				{
					type: 'element:click',
				},
			],
		}
		/**
		 * 添加环形图点击事件， element 代表图形元素，关于图形元素，请查看：https://g2.antv.vision/zh/docs/manual/concepts/element
		 * @param plot 在 Plot 上通过 on 绑定事件、off 移除绑定事件。
		 * @author QC
		 * @since 20220926
		 * @version V1.0
		 */
		const onReadyPie = (plot) => {
			// 图表的点击事情，可参考文档添加其它事件,https://charts.ant.design/zh/examples/pie/donut#basic
			plot.on('element:click', (...args) => {
				const pieData = args[0].data?.data
				console.log(args)
				console.log('pieData')
				console.log(pieData)
				this.onOpenView(pieData?.indexName)
			})
		}
		return (
			<div>
				<div>{data?.length > 0 ? <Pie {...config} onReady={onReadyPie} /> : <Empty />}</div>
			</div>
		)
	}
}
export default Index

其他详细配置请看官方文档：

1、 环图 | Ant Design Charts

2、图表 - Chart | G2

参考文献：

1、react antv（Ant Design Charts）怎么使用图表事件_南城夏季的博客-CSDN博客