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）怎么使用图表事件_南城夏季的博客